编辑#4:突破!!

我开始递归遍历父节点并返回相同的值,如下所示.其中一个父母 - 内部 - 也mat-drawer-container为isDisplayed返回false(所有其他人返回true,这似乎很奇怪).

看看那个节点,结果发现它是网站上唯一拥有CSS的标签display: contents.删除它会导致有问题的按钮- 以及它下面的所有其他内容 - 为isDisplayed返回true.哎呀,量角器甚至可以点击按钮,我可以在浏览器中看到预期的结果.

现在我想问题仍然存在:这是预期的行为还是一个错误？它不像显示祖先那样简单:应用内容; 我直接应用它rb-container,Protractor仍然能够找到按钮.

我是第一次在Protractor中进行端到端测试,在尝试测试按钮可见时遇到了问题.尽管按钮元素在DOM中并且可见,但isDisplayed返回false并且我的断言失败.

这是失败的最初断言:

expect(element(by.css("mat-drawer-content rb-container rb-fab-button[data-qaid='create-button'] > button")).isDisplayed()).toBe(true);

(是的,选择器很乱,但我无法控制HTML.)

我已经使用了很长的browser.sleep()间隔来基本上暂停浏览器,所以我可以使用开发工具来检查人类可见的元素,而CSS让我相信它应该被检测为可见.

在搜索答案和/或错误无效后,我将一些信息记录到控制台,这仍然让我相信isDisplayed应该返回true:

[ EDITS#2,#3:记录了rb-container的所有直接子节点的更多信息; 根据量角器,只有一个节点是"可见的".]

  let selector = element.all(by.tagName("mat-drawer-content")).get(0).all(by.css("rb-container > *"));

  selector.count().then(function(selCount) {

    for (let match = 0; match < selCount; match ++) {

      browser.sleep(1000).then(() => {
        let elm = selector.get(match);

        console.log("\n >> " + match + "]");

        elm.getTagName().then(tag => { console.log("tag name:", tag); });
        elm.getCssValue("visibility").then(vis => { console.log("visibility:", …

我试图在表格结构中设置日历，但我不知道如何在表格顶部设置标题。

我也无法更改表结构。我希望它看起来像下面这样：

.calendar_wrap table {\r\n    width: 100%;\r\n}\r\n.calendar_wrap #wp-calendar thead th {\r\n    font-weight: 500;\r\n    color: #45515a;\r\n    font-size: 20px;\r\n    line-height: 28px;\r\n}\r\n.calendar_wrap #wp-calendar tbody td {\r\n    font-weight: 400;\r\n    font-size: 24px;\r\n    line-height: 36px;\r\n    color: #5b666f;\r\n}\r\n.calendar_wrap #wp-calendar tfoot td a {\r\n    color: #3d9596;\r\n    font-weight: 500;\r\n    margin-top: 10px;\r\n    display: inline-block;\r\n    font-size: 22px;\r\n    line-height: 32px;\r\n}\r\n.calendar_wrap #wp-calendar tbody td a {\r\n    color: #EF9950;\r\n}\r\n.calender-box {\r\n    padding: 15px;\r\n    border: 1px solid #d4d9dd;\r\n    border-radius: 8px;\r\n}\r\ncaption {\r\n    font-size: 30px;\r\n    line-height: 36px;\r\n    color: #007ab0;\r\n}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" …

我最近开始使用Javascript和API数组,以尝试了解如何检索和使用不同的API.

在StackOverflow和其他网站中,已经多次询问和回答了Javascript循环和数组的问题.

但是,我似乎无法找到(可能由于我缺乏理解和/或使用的关键字)正是我正在寻找的.

我目前的项目是创建一个WebApp,它从API中检索信息(我选择了随机用户API)并在屏幕上显示这些信息.

实施和问题

到目前为止,我一直专注于从API中检索特定数据(我已经在某种程度上成功完成)并在浏览器上显示它们.我决定我想同时显示几个用户,将其限制为一次显示的15个用户(当刷新浏览器时,它应该随机显示另外15个用户(部分API)).

虽然我知道我可以直接请求多个用户,但是通过使用results参数,我试图通过循环自己做这个,这样我就可以理解如何检索多个信息并将它们显示为列表.

履行

• HTML文件:非常基本,它包含一个主div,在div内部是一个无序列表元素,也包含一个元素.我将需要从HTML文件中删除某些元素,并让JS文件在我前进时通过innerHTML方法创建它们.

• CSS文件:现在非常基础,专注于JS文件.

• Javascript文件:现在也很基本.它包含带有获取的API URL的常量变量.它将数据检索为JSON,然后使用document.getElementById()在其指定的ID中添加特定信息(在本例中为名字和照片).

我研究了从API检索和显示信息的方法,到目前为止已经获得了基本的了解.但是,我似乎已经停止了(因为我不完全了解如何使用for循环或map()来浏览我当前的JS代码并为N个用户显示相同的数据N次).

问题

在添加for循环之前,js文件检索一个随机用户所需的信息,这是我期望它做的.但是,一旦我的for循环被添加,它就会停止显示任何内容,并且不会提供任何可以帮助我解决问题的错误消息.

我确实尝试了以下for循环,看看我是否至少了解了基础知识并在控制台中打印了结果:

for ( var i = 0; i < 15 ; i++) {
    console.log(i)
}

我已将代码片段块附加到JSbin链接.在那里,您可以看到当前的状态和问题.

当前的HTML + JS文件和输出(JS Bin):在这个例子中,我已经注释掉了for循环,以表明它确实可以工作到某一点.

const testapi = fetch("https://randomuser.me/api/?gender=male");


/*for ( var i = 0; i < testapi.length ; i++) {*/
testapi
.then(data => data.json())
.then(data => document.getElementById('test').innerHTML = "<h1>" + …

我想改变水平滚动条CSS。在这里我使用代码来更改它，但它也更改了我的垂直滚动条，我只想更改水平滚动条。怎么做？在这里我也上传图片。

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

我想让按钮与之前表单控件中的输入文本保持在同一行。

<div class="row">
  <div class="form-group col-xs-6 col-md-5 ">
    <label for="">Name</label>
    <input class="form-control " type="text" >
  </div>
  <div class="form-group col-xs-6 col-md-5 ">
    <label for="">E-mail</label>
    <input class="form-control " type="text" ">
  </div>
  <div class="form-group col-xs-6 col-md-2">
    <button class="btn btn-primary">Save</button>
  </div>
</div>

检查这个小提琴，看看它是怎么回事： 小提琴

我试图在按钮标签上方放置一个“标签”。但我不认为这是更好和正确的方式来做到这一点。