遍历 DOM 到 select 具体 child 进行 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 或 Class 这两个按钮，所以我需要遍历 DOM 才能单击它们。我尝试了以下方法：

await page.evaluate(() => {
    document.getElementsByClassName('login').children('button').click();
});

这种方法的问题是它找不到节点，实际上它无法找到 'List Button' 或 'User Button' 的特定按钮。在这种情况下，遍历特定按钮上的 DOM 和 click() 的 simplest/cleanest 方法是什么。

Answer 1

您试图在错误的 parent 元素中查找 children。您需要在登录 class 旁边的元素中找到 children。所以基于给定的DOM结构。以下是将 return 您 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 到 select 具体 child 进行 e2e 测试

Traverse DOM to select specific child for e2e test

html

javascript

testing

angularjs

puppeteer