当网页上存在多个时如何单击特定按钮

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

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

Answer 1

这里的主要思想是您可以使用多个选择器来选择页面上的元素。我决定将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();

<button data-button="one">Button One</button>
<button data-button="two">Button Two</button>