如何在 pupeteer 中的异步 function page.evalue 中单击和 select 元素

Question

尝试遍历无效字段并在页面上输入/选择值。

const enterTextFields = async (page) => {
  const txtQuestText = await page.evaluate(() =>
    Array.from(
      document.querySelectorAll('div[aria-invalid="true"]'),
      async (element) => {
        const span = element.querySelector(
          'label span[data-test-form-element-label-title="true"]'
        );
        const ques = span.textContent.trim();
        const ans = await window.getAns(ques);
        if (ans) {
          const txtField = element.querySelector('div input[type="text"]');
          if (txtField) {
            txtField.type(ans);
          }
          const dropdownField = element.querySelector(
            "div select[data-test-fb-dropdown-select]"
          );
          if (dropdownField) {
            dropdownField.select(ans);
          }
        }
        return ques + " : " + ans;
      }
    )
  );
  console.log("txtQuestText : ", txtQuestText);
}

在执行上述page.evaluate时，即使有可用于ques的ans ，文本和下拉字段都不会被填充。

在txtQuestText得到：

(2) [{…}, {…}]
0: {}
1: {}
length: 2
[[Prototype]]: Array(0)
[[Prototype]]: Object

如果我从async (element) => {中删除async ，则await window.getAns(ques)调用和if block然后我可以在txtQuestText中看到正确的Ques字符串列表。

由于await window.getAns(ques)而无法删除async 。

不知道出了什么问题以及如何使用它。 请帮忙！

Answer 1

我无法运行您的代码，但问题似乎是从evaluate返回一个数组，而不是单个 promise object。 Puppeteer 不够聪明，无法意识到这是一系列承诺，因此它无法解决它们。 一旦通过序列化/反序列化过程，promise 就会退化为空对象。

这是一个可重现的示例：

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

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const html = "<html><body><p>test</p><p>test2</p></body></html>";
  await page.setContent(html);

  const result = await page.evaluate(() =>
    Array.from(
      document.querySelectorAll("p"),
      async el => el.textContent // pretend we need to await in this func
    )
  );

  console.log(result); // => [ {}, {} ]
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

修复方法是返回单个 promise 而不是一组承诺：

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

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const html = "<html><body><p>test</p><p>test2</p></body></html>";
  await page.setContent(html);

  const result = await page.evaluate(() =>
    Promise.all(Array.from(
      document.querySelectorAll("p"),
      async el => el.textContent
    ))
  );

  console.log(result); // => [ 'test', 'test2' ]
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

如何在 pupeteer 中的异步 function page.evalue 中单击和 select 元素

问题描述

1 个解决方案

解决方案1
0 2022-09-26 18:09:18

如何在 pupeteer 中的异步 function page.evalue 中单击和 select 元素

问题描述

1 个解决方案

解决方案1 0 2022-09-26 18:09:18

解决方案1
0 2022-09-26 18:09:18