Блог

На веб-странице под названием «Оформить заказ»есть две кнопки. 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>

Я использую Playwright на Javascript, чтобы попытаться нажать на вторую кнопку, но пока не могу добиться успеха. Обе кнопки имеют динамически изменяющиеся классы, поэтому я использую эту строку, чтобы найти кнопку и нажать на нее:
await page.click('//button[contains(text(),"Place Order")]);

Проблема, с которой я сталкиваюсь, заключается в том, что, поскольку обе эти кнопки присутствуют на веб-странице одновременно, я нажимаю первую кнопку «Оформить заказ». Я пытаюсь нажать на вторую кнопку «Оформить заказ», но не преуспел, так как мой код нажимает на первую. Может кто-нибудь показать мне, как я могу нажать на вторую кнопку «Оформить заказ» вместо того, чтобы нажимать на первую? Я все еще новичок в драматургии и постоянно учусь каждый день. Заранее спасибо

Основная идея здесь заключается в том, что вы можете использовать несколько селекторов для выбора элементов на своей странице. Я решил присвоить 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>