如何用 puppeteer 和 jest 编写健壮的测试？

Question

这是我写的测试，我的问题是，我试图尽可能健壮地构建它，但它有时会工作，有时会由于如下所示的原因而失败。也许我遗漏了一些东西，如果你们中的任何一个能帮助我使测试更健壮，我将不胜感激。注意：我从代码中删除了敏感信息。const { getStatement, portalLogin, getDeletableList } = require("./helper.js");const user = { userName: "*****@*****.de", passWord: "*******" };const puppeteer = require("puppeteer");const headlessVal = false;const webSiteUrlLogin = "https://... .de/dashboard";const webSiteUrlMe = "https://... .de/me";// elements with classesconst change_username_button = ".change-username-button";const save_user_changes_btn = ".save-user-changes-btn";// elements with ID'sconst user_personal_title = "#user_personal_title";// [happy path] 1 user changes #user_personal_titletest("[happy path] 1 user changes #user_personal_title", async () => {  //////// SETUP & LOGIN  START /////////  const browser = await puppeteer.launch({    headless: headlessVal,    args: ["--window-size=1920,1080"],    defaultViewport: null,  });  // new browser window opens  const page = await browser.newPage();  // open specified url and waits for it to be loaded  await page.goto(webSiteUrlLogin, {    //wait until there are no more conections that traffic    waitUntil: "networkidle0",  });  await page.waitForNavigation({    waitUntil: "networkidle2",  });  const user_local = {    userName:      user.userName !== undefined ? user.userName : process.env.USERNAME,    passWord:      user.passWord !== undefined ? user.passWord : process.env.PASSWORD,  };失败：Evaluation failed: TypeError: Cannot set property 'value' of null      at __puppeteer_evaluation_script__:2:55      at ExecutionContext._evaluateInternal (node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:217:19)      at ExecutionContext.evaluate (node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:106:16)      at Object.<anonymous> (joyce_PORTAL/end-to-end/me.test.js:168:3)

Answer 1

您选择的元素document.querySelector(user_personal_title).value在页面上尚不可用。在使用 执行页面之前，您需要等待选择器元素在页面上可用waitForSelector(selector)。

简单POC如下：

 page.waitForSelector(user_personal_title)

    .then(() => //evaluate your document.querySelector(user_personal_title).value code here

 );

//or simply

 await page.waitForSelector(user_personal_title)