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或Class，所以我需要遍历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 个答案: