Нажмите div с тем же идентификатором

Question

Я хотел бы нажать на div, но этот div имеет тот же идентификатор, что и другой div. Я протестировал несколько решений, особенно с xpath, но ничего не работает.

Есть ли другое решение для щелчка без селектора и xpath?

html

<div class="modal-button" id="button-grey"> Cancel </div>

<div class="modal-button create-modal-button modal-blue-button" id="button-grey"> Accept </div>

Мой код:

await page.click('#button-grey')

С этим кодом он нажимает кнопку «Отмена», когда я хочу, чтобы он нажал «Принять».

Заранее спасибо за вашу помощь

Answer 1

Как следует из комментариев, идентификатор должен быть уникальным.

С этим кодом он нажимает кнопку «Отменить», когда я хочу, чтобы он нажал кнопку «Принять»?

Это происходит потому что браузер будет использовать первый найденный элемент с этим id, потому что он всегда ожидает найти только один. В вашем случае первый найденный для cancel.

Answer 2

ваш html недействителен, вы не можете установить тег serval html с тем же идентификатором.

проверьте свой html в [W3 C валидаторе]: https://validator.w3.org/#validate_by_input

Преобразуйте свой идентификатор с серой кнопкой в ​​класс

Answer 3

Возможно, это нажатие кнопки «Отмена», потому что первый div, с которым он сталкивается с серой кнопкой id, - это ваш div с надписью «Отмена».

Идентификаторы должны быть уникальными. Вместо этого попробуйте сделать класс серой кнопкой и добавить его как дополнительный класс в оба div. Затем дайте div, в котором говорится, что принять уникальный идентификатор. Используйте этот уникальный идентификатор в await page.click (yourUniqueID).

Answer 4

Как упоминал Крис Джи, атрибуты id должны быть уникальными для указанного элемента c.

Веб-документы MDN описывает атрибут id следующим образом :

Глобальный атрибут id определяет идентификатор (ID), который должен быть уникальным во всем документе. Его цель - идентифицировать элемент при связывании (с использованием идентификатора фрагмента), написании сценария или стиле (с CSS).

Не используйте onClick(), а просто измените идентификаторы на что-то более информативное: уникальное . Это также значительно упрощает поиск определенных c элементов в вашем коде.

Если вы не можете изменить код, например, если вы выполняете парсинг в Интернете и нуждаетесь в этих элементах, вы можете использовать .modal-button:nth-child(), чтобы найти любую кнопку вам нужно.

Answer 5

Это ошибочный код HTML, который содержит несколько элементов с одинаковым идентификатором (который должен быть уникальным). Поскольку ваш вопрос:

Есть ли другое решение для щелчка без селектора и xpath?

вот решение с elementHandle.click на второй элемент [1] с тем же идентификатором:

const elementHandles = await page.$$('#button-grey')
await elementHandles[1].click() // click 2nd element [1] with the same id

В любом случае, XPaths может быть полезен иногда, если вам нужно щелкнуть что-либо в зависимости от его текстового содержимого:

const acceptHandle = await page.$x("//div[@id='button-grey' and contains(text(), 'Accept')]")
await acceptHandle[0].click() // XPath returns an array, the first item [0] is the matching element