如何用 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 classes

const change_username_button = ".change-username-button";

const save_user_changes_btn = ".save-user-changes-btn";

// elements with ID's

const user_personal_title = "#user_personal_title";

// [happy path] 1 user changes #user_personal_title

test("[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如下：&nbsp;page.waitForSelector(user_personal_title)&nbsp; &nbsp; .then(() => //evaluate your document.querySelector(user_personal_title).value code here&nbsp;);//or simply&nbsp;await page.waitForSelector(user_personal_title)