编辑#4:突破!!
我开始递归地遍历父节点并返回与下面相同的值。其中一个父项——内部 mat-drawer-container——也为 isDisplayed 返回 false(所有其他父项返回 true，这看起来很奇怪)。
查看该节点，发现它是网站上唯一具有 display: contents CSS 的标签。删除它会导致有问题的按钮——和它下面的所有其他内容——为 isDisplayed 返回 true。哎呀， Protractor 甚至可以点击按钮，我可以在浏览器中看到预期的结果。
现在我想问题仍然存在:这是预期的行为还是错误？它不像有一个带有 display: contents applied 的祖先那么简单；我将它直接应用于 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 的所有直接子代的更多信息；根据 Protractor，只有一个节点是“可见的”。 ]
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); });
});
}
});
这是我看到的日志:
>> 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
在没有设置隐藏属性、显示值不是“无”、可见性设置为“可见”以及非零尺寸的情况下，我希望 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>最佳答案
我开始递归地遍历父节点并返回与下面相同的值。其中一个父项——内部 mat-drawer-container——也为 isDisplayed 返回 false(所有其他父项返回 true，这看起来很奇怪)。
查看该节点，发现它是网站上唯一具有 display: contents CSS 的标签。删除它会导致有问题的按钮——和它下面的所有其他内容——为 isDisplayed 返回 true。哎呀， Protractor 甚至可以点击按钮，我可以在浏览器中看到预期的结果。
现在我想问题仍然存在:这是预期的行为还是错误？它不像有一个带有 display: contents applied 的祖先那么简单；我将它直接应用于 rb-container，Protractor 仍然能够找到按钮。
我打开了an issue on the protractor GitHub这样他们就可以进一步调查。
[更新:我已经在 GitHub 上更新了这个问题，但我想我也会在这里分享:]
经过一些挖掘，我发现它是两种样式声明的组合:display: contents 和 overflow: hidden。
从表面上看，您不应该真正将它们一起使用这听起来像是常识，因为您试图隐藏实际上并不存在的容器元素的溢出；但是，我觉得如果所述元素的子元素正在被浏览器渲染为可见——在这种情况下，它是——它可能应该被 Protractor 检测为可见。
HTML/CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>isDisplayed() issue</title>
<style>
.not-displayed .display-contents {
overflow: hidden;
display: contents;
}
</style>
</head>
<body>
<div class="not-displayed">
<div class="display-contents">
<div class="wrong">isDisplayed() returns false</div>
</div>
</div>
<div class="displayed">
<div class="display-contents">
<div class="right">isDisplayed() returns true</div>
</div>
</div>
</body>
</html>
规范文件:
import { browser, by, element } from 'protractor';
describe('Testing the Protractor Bug', () => {
it('should display debugging info', () => {
browser.waitForAngularEnabled(false);
browser.get('_[file location]_');
element(by.css('.wrong')).isDisplayed().then(disp => { console.log('"wrong" isDisplayed:', disp); });
element(by.css('.right')).isDisplayed().then(disp => { console.log('"right" isDisplayed:', disp); });
});
});
输出结果:
[17:04:50] I/launcher - Running 1 instances of WebDriver
[17:04:50] I/direct - Using ChromeDriver directly...
DevTools listening on ws://127.0.0.1:59412/devtools/browser/3f76f1a9-25f5-4497-8ae3-6933d01d0c7e
Jasmine started
"wrong" isDisplayed: false
"right" isDisplayed: true
Testing the Protractor Bug
√ should display debugging info
Executed 1 of 1 spec SUCCESS in 0.202 sec.
[17:04:53] I/launcher - 0 instance(s) of WebDriver still running
[17:04:53] I/launcher - chrome #01 passed
关于javascript - isDisplayed 为 Protractor 中的可见元素返回 false，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52174578/