Как нажать на элементы, возвращенные из page.evaluate?

Question

Как я могу щелкнуть по элементам, возвращенным из page.evaluate?

const allCategoryElements = await page.evaluate(() => {
  const allElements = [...document.querySelectorAll(".mySelector")];

  return allElements.filter((element) => {
    const ul = element.querySelector("ul");
    return !ul || !ul.children.length;
  });
});

for (const categoryHandle of allCategoryElements) {
  await categoryHandle.click(); // ERROR: categoryHandle has no click method
}

По сути, мне нужен массив элементов, на которые я могу затем щелкнуть (ВНЕ ОЦЕНКИ). Элементы должны быть типа ElementHandle, если я прав.

Answer 1

Для работы со всеми элементами Вам необходимо использовать page.evaluate function и оценивать Handle вместе

// Get the "viewport" of the page, as reported by the page.
const jsHandle = await page.evaluateHandle(() => {
const allElements = [...document.querySelectorAll(".mySelector")];
  return allElements.filter((element) => {
    const ul = element.querySelector("ul");
    return !ul || !ul.children.length;
  });
 });
 await page.evaluate(all => {
  for (const elm of all) {
       elm.click();
     }
  } , jsHandle);

Answer 2

элементы не могут быть возвращены с использованием page.evaluate, поскольку они не сериализуемы. Вместо этого используйте page.evaluateHandle.

Из документов

Единственная разница между page.evaluate и page.evaluateHandle заключается в том, что page.evaluateHandle возвращает на страницу объект (JSHandle)

пример:

Здесь элемент не возвращается.

const element = await page.evaluate(() => document.querySelector('a'));

, тогда как здесь элемент будет экземпляром JSHandle:

const element = await page.evaluateHandle(() => document.querySelector('a'));

Вы можете использовать jsHandle.asElement(), чтобы получить ElementHandle.