小编Dom*_*ino的帖子

Playwright 中有没有办法选择动态表中的特定按钮?

我是开发新手,在创建一个 e2e 测试时面临着一个真正的问题。
基本上,我有一个包含 2 行或更多行的表格,每行有 5 列(标题、x、y、z 按钮)。如何使用标题单击正确行上的按钮?(这是为了证明这个表的删除过程有效的测试)。我正在测试的应用程序是用 React 框架编写的,因此所有表都会频繁更改,我需要一种信任代码并且没有任何错误的方法。 我需要单击此元素,但它始终不在同一位置

超文本标记语言

<table>
    <tr>
     <td>Some Title</td>
     <td>x</td>
     <td>y</td>
     <td>
       <button>I need to click this</button>
    </td>
    </tr>
    <!--other rows--!>
</table>  
Run Code Online (Sandbox Code Playgroud)

这是我遇到的解决方案

const rows = await page.$$eval("tr", (row) =>
    row.map((e) => e.textContent)
);
const correctRowIndex = rows.findIndex((e) => e.includes(TITLE_I_KNOW));
await page.click(
    "//tr[normalize-space(.)='" + rows[correctRowIndex] + "']/td/button"
);
Run Code Online (Sandbox Code Playgroud)

期望的行为

我的代码似乎没有遵循最佳实践,我需要一个将其分为两部分的解决方案。
1 - 将正确的行保存到变量中
2 - 单击已保存行中包含的按钮

javascript css-selectors e2e-testing playwright

6
推荐指数
1
解决办法
2万
查看次数