Селектор XPath в Puppeteer 22.x

Я прочитал новейшую документацию Puppeteer v22.x о XPath, но до сих пор не знаю, как использовать XPath в Puppeteer 22.x.

Я хочу щелкнуть элемент, содержащий текст «Далее». Вот HTML-код с кнопкой «Далее»:

<div class = "bla bla bla" role = "button" tabindex = "0">Next</div>

Вот поведение, которое я проанализировал:

Значение класса не является статическим. Он будет генерироваться случайным образом при каждом запросе или обновлении страницы.
Я не могу использовать role = "button" в качестве индикатора кнопки, потому что на этой странице много тегов, использующих role = "button" в своих атрибутах.

Вот что я пробовал:

await page.waitForSelector("xpath/div[@role='button' and text()='Next']");

await page.waitForSelector("//div[@role='button' and text()='Next']");

Это await page.waitForSelector("xpath///div[@role='button' and text()='Next']"); или await page.waitForSelector("::-p-xpath(//div[@role='button' and text()='Next'])");

— 03.06.2024 18:55

javascript node.js web-scraping xpath puppeteer

03.06.2024 18:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

181

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда вы используете XPath, вам обычно нужно добавить к выражению префикс //, чтобы глубже погрузиться в дерево HTML:

const puppeteer = require("puppeteer"); // ^22.7.1

const html = `<div class = "bla bla bla" role = "button" tabindex = "0">Next</div>`;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.setContent(html);
  const el = await page.waitForSelector(
    "xpath///div[@role='button' and text()='Next']"
  );
  console.info(await el.evaluate(el => el.textContent)); // => Next
  await el.click();
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

Я бы также использовал normalize-space() вместо text(), чтобы справиться с наличием пробелов.

А еще лучше использовать p-селектор вместе с CSS: '[role = "button"]::-p-text(Next)' вместо XPath (хотя это будет совпадение текста подстроки, что может не подойти для вашего варианта использования).

Смотрите также:

03.06.2024 19:01