кукловод: document.querySelector работает на консоли, но не на кукловоде

Question

когда я использую document.querySelector в консоли Chrome, я получаю что-то, однако, когда использую тот же запрос с puppeeter. Я получаю "undefined" или "Promise {}".

    const text = await page.evaluate(() => document.querySelector('div.tagCloud-slotAble.space--mv-2 > button:nth-child(1)'));
console.log(text)

Спасибо

Answer 1

Насколько я могу судить, причина, по которой вы не можете вернуть текст и вывести его на консоль, происходит по двум причинам:

• Вы не возвращаете значение из вашего evaluate метода.
• Вы извлекаете элемент, но не текстовое содержимое элемента.

Если вы сделаете что-то подобное, это должно решить вашу проблему:

const text = await page.evaluate(() => {
  const uiElement = document.querySelector('div.tagCloud-slotAble.space--mv-2 > button:nth-child(1)'));
  return uiElement.textContent;
});
console.log(text);

Альтернативой вышеупомянутой функции является использование метода кукловодов $eval следующим образом:

const elementSelector = 'div.tagCloud-slotAble.space--mv-2 > button:nth-child(1)';
const text = await page.$eval(elementSelector, (uiElement) => {
  return uiElement.textContent;
});
console.log(text);

Лично я предпочитаю второй вариант (используя $eval), но это вопрос предпочтений. Оба делают одно и то же.

Следует отметить, что все, что вы запускаете в методе evaluate или $eval, выполняется в контексте вашей страницы т.е. он выполняется на веб-странице, которая в данный момент открыта в удаленном браузере. Вы можете в основном использовать этот метод для добавления новых элементов пользовательского интерфейса на вашу веб-страницу во время теста, выполнения кода JavaScript на вашей веб-странице и т. Д.

Или вы можете использовать его, как сейчас, чтобы найти элемент пользовательского интерфейса и вернуть текстовое содержимое из него.

Answer 2

Это потому, что querySelector возвращает узел.Попробуйте вернуть innerText,

const text = await page.evaluate(() => document.querySelector('div.tagCloud-slotAble.space--mv-2 > button:nth-child(1)').innerText);
console.log(text)