对于我的 Angular 应用程序，我正在编写一个简单的脚本来测试两个按钮的功能。 html 看起来像这样:
<body>
<my-app _nghost-c0 ng-version="4.46">
<mat-card _ngcontent-c) class="overflow mat-card">
<div _ngcontent-c) class="login">...</div>
<div _ngcontent-c) float-right>
<button _ngcontent-c0> List Button </button>
<button _ngcontent-c0> User Button </button>
</div>
</mat-card>
...
</body>
因为我没有两个按钮的 CSS 选择器 ID 或类，所以我需要遍历 DOM 才能单击它们。我尝试了以下方法:
await page.evaluate(() => {
document.getElementsByClassName('login').children('button').click();
});
这种方法的问题是它找不到节点，事实上它无法找到“列表按钮”或“用户按钮”的特定按钮。在这种情况下，遍历特定按钮上的 DOM 和 click() 的最简单/最干净的方法是什么。
最佳答案
您试图在错误的父元素中查找子元素。您需要在登录类旁边的元素中找到子项。所以基于给定的DOM结构。以下是返回 btn 元素的代码片段
var loginElement = document.querySelectorAll('.login')[0];
var listBtn = loginElement.nextElementSibling.children[0];
var userBtn = loginElement.nextElementSibling.children[1];
listBtn.addEventListener("click",function(){
console.log('listBtn clicked');
})
userBtn.addEventListener("click",function(){
console.log('userBtn clicked');
})
listBtn.click();
userBtn.click();
关于javascript - 遍历 DOM 以选择特定的 child 进行 e2e 测试，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48154789/