将 await / async 与 Puppeter 函数一起使用时出错

Question

我正在尝试放置一系列连续的步骤，我将在我的程序中重复几次，例如登录，在表单中搜索某些数据条件或结束会话。

这就是我将Puppeter的步骤放在函数中的方式

login: function (page, selector){
(async () => {
await page.goto(“localhost:8080/login”);
await page.type(“#username”, “admin”);
console.log("STEP 1 USERNAME”);
await page.type(“#password”, “admin1”);
console.log("STEP 2 PASSWORD”);
await page.waitForSelector(“#submit”).then(() =>
page.click(“#submit”)
);
console.log("STEP 3 - Login"); 
})();
}

这是我的主要js程序(main.js(

CASE1: function (req, res) {
(async () => {
const puppeteer = require('puppeteer');
const browser = await puppeteer.launch();
const page = await browser.newPage();
try {
console.log("STARTING CASE 1”);
await page.setViewport({ "width": 1280, "height": 720 });
login (page, selector);
await page.waitForSelector(“#combobox_of_day”).then(() =>
page.click(“#combobox_of_day”)
);
console.log("SELECT combobox of day”);
await page.waitForSelector(“#combobox_of_month”).then(() =>
page.click(“#combobox_of_month”)
);
console.log("SELECT combobox of month”);
await page.waitForSelector(“#combobox_of_year”).then(() =>
page.click(“#combobox_of_ year”)
);
console.log("SELECT combobox of year”);
await browser.close(); 
console.log("ENDING navigation”);
} catch (error) {
console.log(error);
}
})();
}

所以在 NodeJS 控制台上，我希望看到类似的东西

STARTING CASE 1
STEP 1 USERNAME
STEP 2 PASSWORD
STEP 3 Login
SELECT combobox of day
SELECT combobox of month
SELECT combobox of year
ENDING navigation

但是你在控制台上得到的是这样的

STARTING CASE 1
STEP 1 USERNAME
SELECT combobox of day
SELECT combobox of month
SELECT combobox of year
STEP 2 PASSWORD
STEP 3 Login
ENDING navigation

并且是一条错误消息

{ TimeoutError: waiting for selector "#username" failed: timeout 30000ms exceeded
at new WaitTask (Z:DocumentsAR-puppeternode_modulespuppeteerlibFrameManager.js:864:28)
at Frame._waitForSelectorOrXPath (Z:DocumentsAR-puppeternode_modulespuppeteerlibFrameManager.js:755:12)
at Frame.waitForSelector (Z:DocumentsAR-puppeternode_modulespuppeteerlibFrameManager.js:713:17)
at Page.waitForSelector (Z:DocumentsAR-puppeternode_modulespuppeteerlibPage.js:1017:29)
at Z:DocumentsAR-puppeterpruebas-app-armodulosescenariosescenario.js:145:28
at <anonymous> name: 'TimeoutError' }

因为问题似乎是调用函数"Login ()"并没有停止连续行的执行。

如何使程序(main.js(等待我的"Login ()"函数的所有步骤继续？

这不能通过使用async / await和WaitForSelector来解决？

我尝试使用不同的语法从我的程序(main.js(调用"Login ()"函数，但我得到了同样的错误。

async login (page, selector); //Getting same error
await login (page, selector); //Getting same error

Answer 1

你对login的表述很奇怪：你使用 IIFE 来运行一个async函数，但由于包装器不是async的，你永远不会等待承诺。您也不会等待CASE1中的login，但是您不能这样做，因为它不会返回任何内容。您需要首先通过使其async来使login返回Promise(您可以在不将其async的情况下返回Promise，但这样您将无法在其中使用await(：

login: async (page, selector) => {
await page.goto("localhost:8080/login");
await page.type("#username", "admin");
console.log("STEP 1 USERNAME");
await page.type("#password", "admin1");
console.log("STEP 2 PASSWORD");
const submit = await page.waitForSelector("#submit");
await submit.click();
console.log("STEP 3 - Login");
}

waitForSelector返回ElementHandle，因此您无需单独调用page.click，并且在任何情况下都不需要使用then。现在login返回一个Promise。

接下来，您需要await该PromiseCASE1并删除 IIFE 以使函数本身async：

CASE1: async (req, res) => {
const puppeteer = require('puppeteer');
const browser = await puppeteer.launch();
const page = await browser.newPage();
try {
console.log("STARTING CASE 1");
await page.setViewport({ "width": 1280, "height": 720 });
await login(page, selector);
for (const type of ["day", "month", "year"]) {
const combobox = await page.waitForSelector(`#combobox_of_${type}`);
await combobox.click();
console.log(`SELECT combobox of ${type}`);
}
await browser.close(); 
console.log("ENDING navigation");
} catch (error) {
console.log(error);
}
}

我删除了一些重复。似乎没有selector变量，这就像login忽略它一样好，但我还是把它留了下来以匹配你的代码。

顺便说一下，避免使用文字处理器来处理代码。我不得不先花一些时间修复智能引号。