如何在 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