遍历DOM以选择特定子级进行e2e测试

Question

对于我的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并单击特定按钮上的最简单/最干净的方法是什么。

Answer 1

您试图在错误的父元素中找到子元素。 您需要在登录类旁边的元素中找到子级。 因此基于给定的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();

遍历DOM以选择特定子级进行e2e测试

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-01-08 19:42:03

遍历DOM以选择特定子级进行e2e测试

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-01-08 19:42:03

解决方案1
1 已采纳 2018-01-08 19:42:03