Кукловод: правильный подбор внутреннего текста

Question

Я хочу получить строку с определенным именем класса, скажем, 'CL1'.

Это то, что используется, и это работает: (мы внутри функции asycn)

var counter = await page.evaluate(() => {
            return document.querySelector('.CL1').innerText;
        });

Теперь, через несколько месяцев, когда я пытаюсь запустить код, я получаю эту ошибку:

Error: Evaluation failed: TypeError: Cannot read property 'innerText' of null

Я провел некоторую отладку с некоторыми console.log() до и после предыдущего фрагмента кодаи обнаружил, что это виновник.

Я посмотрел код веб-страницы, и конкретный класс находится внутри.

Но я обнаружил еще два класса с тем же именем.

Все три из них вложены глубоко во многие классы.

Итак, как правильно выбрать тот, который я хочу, учитывая, что я знаю иерархию классов для интересующего меня?

РЕДАКТИРОВАТЬ: Поскольку существует три имени класса с одним и тем же именем, и я хочу извлечь информацию из первого, могу ли я использовать запись массива в querySelector () для доступа к информации из первого?

EDIT2: я запускаю это:

return document.querySelector('.CL1').length;

, и я получил

Error: Evaluation failed: TypeError: Cannot read property 'length' of null

Это становится еще более запутанным ...

РЕДАКТИРОВАТЬ 3: Я пишу предложение г-на Абу Тахера, и я увидел, что предоставленный им фрагмент кодане вернуть неопределенное.Это означает, что селектор виден моему коду.

Затем я запускаю этот фрагмент кода:

var counter = await page.evaluate(() => {
            return document.querySelector('#react-root > section > main > div > header > section > ul > li:nth-child(1) > a > span').innerText;
            });

И я получил ту же ошибку:

Error: Evaluation failed: TypeError: Cannot read property 'innerText' of null

Answer 1

Ответ делится на части. Получение правильного селектора и получение данных.

1. Получение правого селектора

Использовать проверяющий элемент

• Щелкните правой кнопкой мыши по вашему желаемому элементу и нажмите "проверить элемент"
• Затем щелкните правой кнопкой мыши и выберите Копировать> Селектор копирования.

Это даст вам уникальный селектор для этого конкретного элемента.

Использовать инструмент выбора

Существует множество расширений Chrome, которые помогут вам найти правильный селектор.

• Selectorgadget
• Получить уникальный селектор CSS
• Копирование Css Selector

2. Получение данных

Учитывая, что ваш селектор .CL1 , вам нужно сделать несколько вещей.

Дождаться завершения всех сетевых событий

В основном, при навигации вы можете подождать, пока сеть не будет работать.

await page.goto(url, {waitUntil: 'networkidle2'});

Подождите, пока элемент появится в DOM.

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

await page.waitFor('.CL1');

Или проверить, существует ли элемент и вернуть данные, только если он существует

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

await page.evaluate(() => {
  const element = document.querySelector('.CL1');
  return element && element.innerText; // will return undefined if the element is not found
});

Answer 2

попробуйте проверить элемент до

var x = document.getElementsByClassName("example");

ИЛИ

var x = document.getElementsById("example");

, а затем

var counter = await page.evaluate(() => {
            return x.innerText;
        });