javascript - Playwright 中有没有办法在动态表中选择特定按钮？

Question

我是开发新手，我在创建一个 e2e 测试时遇到了一个真正的问题。
基本上，我有一个包含 2 行或更多行的表，每行有 5 列(标题、x、y、z 按钮)。
如何使用标题单击正确行上的按钮？ (这是一个测试来证明这个表的删除过程是有效的)。
我正在测试的应用程序是使用 React 框架编写的，因此所有表都经常更改，我需要一种方法来信任代码并且没有任何错误。
I need to click this element but it is not ever in the same position
HTML

<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>  

这是我遇到的解决方案

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"
);

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

Answer 1

快速回答
使用以下选择器组合可靠地单击右键。

const row = await page.waitForSelector('*css=tr >> text=Some title');
const button = await row.$('button');
await button.click();

深入解释
Playwright 是一个很棒的工具，可能是迄今为止最好的网络自动化工具之一。但是需要正确使用。
1.选择正确的行

const row = await page.waitForSelector('*css=tr >> text=Some title');

此行指示 Playwright 查找 tr页面中包含文本内容与字符串 Some title 匹配的元素的元素.
该表达式由两个单独的选择器组成，即 css=tr和 text=Some title .
第一个将使用 css选择器引擎，只针对所有 tr元素。第二个使用 text引擎从而匹配文本内容。 >>指示 Playwright 将两个选择器合并为一个。这通过首先评估 css=tr 来工作.在第一个选择器的每个匹配元素上，应用第二个选择器。
通常，组合选择器返回最右边选择器的结果: tr >> text=Some title会给你元素 <td>Some Title</td> .
但是可以用 * 标记所需的选择器。 (同时仍然使用所有组合选择器缩小结果)。
注:星号 *强制明确指定选择器引擎( css=)，否则 Playwright 会猜错引擎。
Here you can read more about Playwright selectors.
2. 选择按钮

const button = await row.$('button');

一旦我们有了正确的行，在这种情况下选择按钮就更容易了。一个简单的查询选择器 ( $ ) 就足够了，因为它是一行中唯一存在的按钮元素。
调用 $在 row (而不是 page )将仅匹配 row 的 DOM 子树中的元素.这与组合匹配器完全一样。
下一节解释为什么步骤 1 必须使用 waitForSelector() .

正确的时机
就像您的示例一样，许多网站都是动态的。这意味着您在使用自动脚本查找页面中的内容时会遇到时间问题:当 Playwright 搜索所需内容时，表格可能尚未呈现。更糟糕的是，如果它在您的计算机上运行，​​它可能会在数周后在另一台计算机上失败。
这就是为什么查看与网页交互的每一行并确定是否存在需要解决的时间问题很重要的原因。
一些 Playwright 方法会定期探测匹配的选择器，并且仅在特定超时后才会失败。其他人不会等待并立即失败。
有时方法会以它们的名称指示它们是否正在等待(例如 page.waitForSelector() )。但情况并非总是如此(例如 elementHandle.click() 实际上正在等待)。
所以必须查看 API reference并仔细阅读说明。
现在回到例子:
在第 1 步中，我们不得不使用等待方法，因为我们不知道动态表何时实际呈现到页面。在第 2 步中，不需要使用等待方法，因为我们可以确定第 1 步成功后该表存在于页面中。