那些遇到过的问题

isDisplayed为Protractor中的可见元素返回false

kj.*_*kj. 10 html javascript css css3 protractor

编辑#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);
Run Code Online (Sandbox Code Playgroud)

(是的,选择器很乱,但我无法控制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:", vis); });
        elm.getCssValue("display").then(disp => { console.log("display:", disp); });
        elm.getCssValue("opacity").then(opa => { console.log("opacity:", opa); });
        elm.getCssValue("overflow").then(ov => { console.log("overflow:", ov); });
        elm.getAttribute("hidden").then(hid => { console.log("hidden:", hid); });
        elm.getAttribute("class").then(c => { console.log("class:", c)});
        elm.getSize().then(size => { console.log("size:", size); });
        elm.getCssValue("position").then(ov => { console.log("position:", ov); });
        elm.getLocation().then(loc => { console.log("location:", loc); });
        elm.isPresent().then(pres => { console.log("isPresent:", pres); });
        elm.isDisplayed().then(disp => { console.log("isDisplayed:", disp); });
      });

    }

  });
Run Code Online (Sandbox Code Playgroud)

这是我看到的记录:

 >> 0]
tag name: div
visibility: visible
display: block
opacity: 1
overflow: auto
hidden: null
class: title-tab dn db-m mediumGreyColor pl4 pv2 overflow-auto
size: { ceil: {},
  clone: {},
  floor: {},
  height: 62,
  round: {},
  scale: {},
  toString: {},
  width: 898 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 0,
  y: 74.765625 }
isPresent: true
isDisplayed: false

 >> 1]
tag name: div
visibility: visible
display: block
opacity: 1
overflow: auto
hidden: null
class: player-menu container overflow-auto dn db-m pv2 ng-star-inserted
size: { ceil: {},
  clone: {},
  floor: {},
  height: 64,
  round: {},
  scale: {},
  toString: {},
  width: 834 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 32,
  y: 136.765625 }
isPresent: true
isDisplayed: false

 >> 2]
tag name: rb-fab-button
visibility: visible
display: block
opacity: 1
overflow: visible
hidden: null
class: add-fab-button absolute dn db-m ng-star-inserted
size: { ceil: {},
  clone: {},
  floor: {},
  height: 56,
  round: {},
  scale: {},
  toString: {},
  width: 56 }
position: absolute
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 762,
  y: 154.765625 }
isPresent: true
isDisplayed: false

 >> 3]
tag name: div
visibility: visible
display: block
opacity: 1
overflow: visible
hidden: null
class: mr4-l w-100-m
size: { ceil: {},
  clone: {},
  floor: {},
  height: 0,
  round: {},
  scale: {},
  toString: {},
  width: 834 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 32,
  y: 200.765625 }
isPresent: true
isDisplayed: false

 >> 4]
tag name: rb-table-wrapper
visibility: visible
display: block
opacity: 1
overflow: visible
hidden: null
class: dn db-m
size: { ceil: {},
  clone: {},
  floor: {},
  height: 672,
  round: {},
  scale: {},
  toString: {},
  width: 834 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 32,
  y: 200.765625 }
isPresent: true
isDisplayed: true

 >> 5]
tag name: div
visibility: visible
display: block
opacity: 1
overflow: visible
hidden: null
class: container
size: { ceil: {},
  clone: {},
  floor: {},
  height: 0,
  round: {},
  scale: {},
  toString: {},
  width: 834 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 32,
  y: 872.5625 }
isPresent: true
isDisplayed: false

 >> 6]
tag name: rb-table-wrapper
visibility: visible
display: none
opacity: 1
overflow: visible
hidden: null
class: db dn-m
size: { ceil: {},
  clone: {},
  floor: {},
  height: 0,
  round: {},
  scale: {},
  toString: {},
  width: 0 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 0,
  y: 0 }
isPresent: true
isDisplayed: false

 >> 7]
tag name: div
visibility: visible
display: none
opacity: 1
overflow: auto
hidden: null
class: player-menu container overflow-auto db dn-m ng-star-inserted
size: { ceil: {},
  clone: {},
  floor: {},
  height: 0,
  round: {},
  scale: {},
  toString: {},
  width: 0 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 0,
  y: 0 }
isPresent: true
isDisplayed: false
Run Code Online (Sandbox Code Playgroud)

如果没有隐藏属性集,显示值不是"none",可见性设置为"visible",非零尺寸维度,我希望isDisplayed返回true.

有趣的是,查看节点4,isDisplayed的唯一子元素返回true,并将其与节点2(我正在尝试访问的rb-fab-button元素)进行比较.我能看到的唯一值得注意的差异是rb-fab-button绝对定位; 但是,其他静态定位元素也会为isDisplayed返回false.

我错过了什么吗？我决定检查css可见性,但我的下一个测试是单击该按钮,如果元素不可见则会出错.

[ 编辑#1:添加了一些HTML: ]

<mat-drawer-container _ngcontent-c0="" class="root-container w-100 mat-drawer-container mat-drawer-container-explicit-backdrop" hasbackdrop="true" ng-reflect-has-backdrop="true">
    <div class="mat-drawer-backdrop ng-star-inserted"></div>
    <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
    <mat-drawer _ngcontent-c0="" class="mobile-drawer dn-m w-80 mat-drawer ng-tns-c2-0 ng-trigger ng-trigger-transform mat-drawer-over ng-star-inserted" tabindex="-1" ng-reflect-mode="over" style="box-shadow: none; visibility: hidden;">
      <!-- [... mobile nav ...] -->
    </mat-drawer>
    <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
    <mat-drawer-content _ngcontent-c0="" class="mat-drawer-content">
        <rb-navbar _ngcontent-c0="" _nghost-c7="" class="ng-star-inserted">
          <!-- [... nav bar ...] -->
        </rb-navbar>
        <div _ngcontent-c0="" class="main-body">
            <div _ngcontent-c0="" class="container h-100">
                <router-outlet _ngcontent-c0=""></router-outlet>
                <rb-system-setup _nghost-c18="" class="ng-star-inserted">
                    <router-outlet _ngcontent-c18=""></router-outlet>
                    <rb-site-tab class="ng-star-inserted">
                        <mat-drawer-container autosize="" class="mat-drawer-container" ng-reflect-autosize="">
                            <div class="mat-drawer-backdrop ng-star-inserted"></div>
                            <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
                            <mat-drawer class="mat-drawer ng-tns-c2-8 ng-trigger ng-trigger-transform mat-drawer-end mat-drawer-over ng-star-inserted" disableclose="true" mode="over" position="end" tabindex="-1" ng-reflect-position="end" ng-reflect-mode="over" ng-reflect-disable-close="true" style="box-shadow: none; visibility: hidden;">
                                <rb-create-site _nghost-c20="" ng-reflect-side-panel="[object Object]" ng-reflect-side-panel-container="[object Object]" ng-reflect-ng-grid="[object Object]" ng-reflect-is-editing="false" ng-reflect-timezones="[object Object],[object Object">
                                    <rb-side-panel _ngcontent-c20="" _nghost-c24="" ng-reflect-title="Add Site" ng-reflect-close-button-label="Cancel" ng-reflect-submit-button-label="CREATE_SITE.SUBMIT" ng-reflect-show-submit-button="true" ng-reflect-modal-submitting="true" ng-reflect-side-panel-container="[object Object]">
                                      <!-- [... side panel ...] -->
                                    </rb-side-panel>
                                </rb-create-site>
                            </mat-drawer>
                            <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
                            <mat-drawer-content cdkscrollable="" class="mat-drawer-content ng-star-inserted">
                                <div class="ph4-m h-100">
                                    <rb-card _nghost-c21="">
                                        <div _ngcontent-c21="" class="card rb-min-width-1 h-100">
                                            <div _ngcontent-c21="" class="relative h-100">
                                                <rb-container _nghost-c22="" ng-reflect-row-data="[object Object]" ng-reflect-show-player="true" ng-reflect-show-search-bar="true" ng-reflect-include-edit="true" ng-reflect-include-delete="true" ng-reflect-include-stop="false" ng-reflect-include-sync="false" ng-reflect-include-checkbox="true" ng-reflect-include-fab-button="true" ng-reflect-route-type="systemSetup" ng-reflect-header="Sites" ng-reflect-mobile-table="site" ng-reflect-show-site-selector="false" ng-reflect-mobile-navigation="true">
                                                    <div _ngcontent-c22="" class="title-tab dn db-m mediumGreyColor pl4 pv2 overflow-auto">
                                                        <h1 _ngcontent-c22="" class="header-text pa2 fl ng-star-inserted">Sites</h1></div>
                                                    <div _ngcontent-c22="" class="player-menu container overflow-auto dn db-m pv2 ng-star-inserted">
                                                      <!-- [... player menu ...] -->
                                                    </div>
                                                    <rb-fab-button _ngcontent-c22="" class="add-fab-button absolute dn db-m ng-star-inserted" data-qaid="create-button" _nghost-c28="">
                                                        <button _ngcontent-c28="" class="w-10 z-1 mat-fab mat-accent" mat-fab="" type="button" ng-reflect-disabled="false"><span class="mat-button-wrapper"><mat-icon _ngcontent-c28="" aria-label="add" class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">add</mat-icon></span>
                                                            <div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div>
                                                            <div class="mat-button-focus-overlay"></div>
                                                        </button>
                                                    </rb-fab-button>
                                                    <div _ngcontent-c22="" class="mr4-l w-100-m"></div>
                                                    <rb-table-wrapper _ngcontent-c22="" class="dn db-m" ng-reflect-row-data="[object Object]" ng-reflect-enable-sorting="true" ng-reflect-include-checkbox="true" ng-reflect-is-clickable="false" ng-reflect-row-selection="multiple" ng-reflect-dom-layout="" ng-reflect-columns="[object Object],[object Object" ng-reflect-un-select-all_="[object Object]" ng-reflect-mobile-table="site" ng-reflect-mobile-navigation="true" ng-reflect-row-drag="false" ng-reflect-row-drag-field-name="">
                                                        <ag-grid-angular class="ag-theme-material" ng-reflect-grid-options="[object Object]" ng-reflect-row-data="[object Object]" ng-reflect-column-defs="[object Object],[object Object" ng-reflect-default-col-def="[object Object]" ng-reflect-row-selection="multiple" ng-reflect-suppress-row-click-selection="true" ng-reflect-enable-sorting="true" ng-reflect-enable-filter="true" ng-reflect-suppress-no-rows-overlay="true" ng-reflect-dom-layout="" ng-reflect-row-drag-managed="false">
                                                          <!-- [... data grid ...] -->
                                                        </ag-grid-angular>
                                                        <div class="backgroundColor w-100 fixed bottom-0 left-0 dn db-m ng-star-inserted">
                                                            <div class="item-selection fr w-20">0/ 1 Selected</div>
                                                        </div>
                                                    </rb-table-wrapper>
                                                    <div _ngcontent-c22="" class="player-menu container overflow-auto db dn-m ng-star-inserted"></div>
                                                </rb-container>
                                            </div>
                                        </div>
                                    </rb-card>
                                </div>
                            </mat-drawer-content>
                        </mat-drawer-container>
                    </rb-site-tab>
                </rb-system-setup>
            </div>
            <div _ngcontent-c0="" class="snacks fixed mw6 rb-min-width-2">
                <rb-global-snack-bar _ngcontent-c0="" _nghost-c8="" class="ng-tns-c8-3">
                    <div _ngcontent-c8="" class="snackBar">
                        <ul _ngcontent-c8="" class="ma0 pa0 list"></ul>
                    </div>
                </rb-global-snack-bar>
            </div>
        </div>
    </mat-drawer-content>
</mat-drawer-container>
Run Code Online (Sandbox Code Playgroud)

kj.*_*kj. 3

我开始递归地遍历父节点并返回与下面相同的值。其中一个父母（内部父母mat-drawer-container）也为 isDisplayed 返回 false （所有其他父母都返回 true，这看起来很奇怪）。

\n\n

查看该节点，结果发现它是网站上唯一具有display: contents. 删除它会导致相关按钮及其下面的所有其他内容为 isDisplayed 返回 true。哎呀，量角器甚至可以单击按钮，我可以在浏览器中看到预期的结果。

\n\n

现在我想问题仍然存在：这是预期的行为还是错误？它不像祖先应用了 display:contents 那样简单；我直接应用它rb-container，量角器仍然能够找到按钮。

\n\n

我在量角器 GitHub 上提出了一个问题，以便他们可以进一步研究。

\n\n
\n\n

[更新：我已经在 GitHub 上更新了该问题，但我想我也应该在这里分享：]

\n\n

经过一番挖掘，我发现它是两种样式声明的组合：display: contentswith overflow: hidden.

\n\n

从表面上看，这听起来像是常识，您不应该真正将它们一起使用，因为您试图隐藏实际上不存在的容器元素的溢出；但是，我觉得如果浏览器正在以可见方式呈现所述元素的子元素（在本例中，它是），它可能应该被量角器检测为可见。

\n\n

HTML/CSS：

\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>isDisplayed() issue</title>\n    <style>\n\n    .not-displayed .display-contents {\n        overflow: hidden;\n        display: contents; \n    }\n\n    </style>\n</head>\n<body>\n\n<div class="not-displayed">\n    <div class="display-contents">\n        <div class="wrong">isDisplayed() returns false</div>\n    </div>\n</div>\n\n<div class="displayed">\n    <div class="display-contents">\n        <div class="right">isDisplayed() returns true</div>\n    </div>\n</div>\n\n</body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n\n

规格文件：

\n\n
import { browser, by, element } from \'protractor\';\n\ndescribe(\'Testing the Protractor Bug\', () => {\n\n    it(\'should display debugging info\', () => {\n\n        browser.waitForAngularEnabled(false);\n        browser.get(\'_[file location]_\');\n\n        element(by.css(\'.wrong\')).isDisplayed().then(disp => { console.log(\'"wrong" isDisplayed:\', disp); });\n        element(by.css(\'.right\')).isDisplayed().then(disp => { console.log(\'"right" isDisplayed:\', disp); });\n\n    });\n});\n
Run Code Online (Sandbox Code Playgroud)\n\n

其输出：

\n\n
[17:04:50] I/launcher - Running 1 instances of WebDriver\n[17:04:50] I/direct - Using ChromeDriver directly...\n\nDevTools listening on ws://127.0.0.1:59412/devtools/browser/3f76f1a9-25f5-4497-8ae3-6933d01d0c7e\nJasmine started\n"wrong" isDisplayed: false\n"right" isDisplayed: true\n\n  Testing the Protractor Bug\n    \xe2\x88\x9a should display debugging info\n\nExecuted 1 of 1 spec SUCCESS in 0.202 sec.\n[17:04:53] I/launcher - 0 instance(s) of WebDriver still running\n[17:04:53] I/launcher - chrome #01 passed\n
Run Code Online (Sandbox Code Playgroud)\n

归档时间：

查看次数：

1006 次

最近记录：

7 年，8 月 前
相关归档
`throw new Error`和`throw someObject`有什么区别？ 336
CSS:如何在元素内容之前添加空格？ 101
使用JavaScript/JQuery将html表数据导出到Excel在chrome浏览中无法正常工作 83
为什么我们需要ng-click？ 73
HTML电子邮件:表格或div？ 72
TinyMce允许所有Html标记 35
在精灵中使用徽标标签是好还是坏？ 24
错误:无法实例化模块restangular,原因是:'_'未定义 20
AngularJS:使用ng-animate和ng-view,如何制作3D立方体旋转效果？ 10
为Protractor设置Screenshot Reporter 7
难疑归档
如何撤消Git中最近的提交？ 20327
如何在本地和远程删除Git分支？ 16311
检测未定义的对象属性 2742
Java中的"实现Runnable"与"扩展线程" 2023
如何在jQuery中选择具有多个类的元素？ 1985
'using'指令应该在命名空间的内部还是外部？ 1975
原子和非原子属性之间有什么区别？ 1828
从Git提交中删除文件 1484
为什么人们在AWS出现时会使用Heroku？Heroku与AWS的区别是什么？ 1082
如何在Vim中有效地处理多个文件？ 1074