Question

在名为“下订单”的网页上有两个按钮。第一个按钮 html 代码如下所示：

<button class="mod-ncss-btn ncss-btn-accent fs14-sm ncss-brand pt3-sm prl5-sm pb3-sm pt2-lg pb2-lg d-sm-b d-md-ib u-uppercase u-rounded mod-button-width">Place Order</button>

第二个按钮的html代码如下：
<button class="d-lg-ib d-sm-h fs14-sm ncss-brand ncss-btn-accent pb2-lg pb3-sm prl5-sm pt2-lg pt3-sm u-uppercase">Place Order</button>

我在 Javascript 上使用 Playwright 尝试单击第二个按钮，但到目前为止无法成功。这两个按钮都有动态变化的类，所以我使用这一行来查找按钮并单击它：
await page.click('//button[contains(text(),"Place Order")]);

我遇到的问题是，由于这两个按钮同时出现在网页上，我单击了第一个“下订单”按钮。我正在尝试单击第二个“下订单”按钮，但由于我的代码单击了第一个按钮，因此没有成功。有人可以告诉我如何点击第二个“下订单”按钮而不是点击第一个？我还是 Playwright 的新手，每天都在不断学习。提前致谢

Answer 1

这里的主要思想是您可以使用多个选择器来选择页面上的元素。我决定将 Pos1 Pos2 Pos3 Pos4 Pos5 Pos6 Pos7 Pos8 Pos9 Pos10 a1 b1 c1 d1 e1 f1 g1 h1 i1 j1 b2 c2 NULL NULL NULL NULL NULL NULL NULL a3 c3 d3 e3 f3 g3 h3 i3 j3 分配给最独特的按钮，因为您提供的类太多，而且大多数都不是唯一的

ids

const buttonOne = document.querySelector('[data-button=one]');
const buttonTwo = document.querySelector('[data-button=two]');

buttonOne.addEventListener('click', e => alert(e.target.innerText));

buttonTwo.addEventListener('click', e => alert(e.target.innerText));

buttonOne.click();
buttonTwo.click();

当网页上有多个按钮时如何点击特定按钮

1 个答案: