Нажмите на внешний элемент с внутренним элементом с определенным текстом в Puppeteer

Question

Как я могу щелкнуть на внешнем элементе, который содержит span с определенным текстом через кукловода?

Например, у меня есть следующий HTML-код:

<div role="button">
  <div>
    <span>
      <span>OK</span>
    </span>
  </div>
</div>

И я бынравится нажимать на самый внешний элемент (роль = кнопка).Чтобы щелкнуть по промежутку с текстом Ok, я бы сделал следующее:

const [button] = await page.$x("//span[contains(., 'Ok')]");
if (button) {
    await button.click();
}

Но как я могу щелкнуть по внешнему элементу, используя этот текстовый идентификатор?

Answer 1

Вы можете использовать выражение descendant для запроса дочерних элементов.Цитата из ссылки:

На оси descendant указаны все дочерние элементы узла контекста и все их дочерние элементы и т. Д.

Ваш XPathвыражение тогда выглядит так:

//div[@role='button' and descendant::span[contains(., 'Ok')]]

В зависимости от вашего случая использования вы также можете проверить эту информацию о разнице contains(text(), ...) и contains(., ...).