How to write robust test with puppeteer and jest?

Question

This is the test I wrote and my problem is, that I tried to build it as robust as possible and still, it sometimes works and sometimes it fails for reasons like shown below. Maybe I am missing something I'd appreciate it if one of you could help me make the tests more robust.

Note: That I removed sensitive information from the code.

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,
  };

  await page.waitForTimeout(500);
  await page.evaluate((user_local) => {
    <FUNCTION LOGIN>
  }, user_local);
  await page.waitForTimeout(600);
  //////// SETUP & LOGIN  DONE /////////

  //////// TEST START /////////
  getStatement({ msg: "[START]: 1.1 title: '' >'Prof'.", runlocally: true });
  await page.waitForTimeout(650);
  await page.goto(webSiteUrlMe, {
    waitUntil: "networkidle0",
  });
  // 1 change #user_personal_title from '' >> 'Prof.'
  console.log("1 change #user_personal_title from '' >> 'Prof.'");
  await page.waitForTimeout(650);
  await page.evaluate((user_personal_title) => {
    document.querySelector(user_personal_title).value = "";
  }, user_personal_title);
  await page.type(user_personal_title, "Prof.");
  let user_personal_title_val = await page.$eval(
    user_personal_title,
    (el) => el.value
  );
  expect(user_personal_title_val).toBe("Prof.");
  await page.click(save_user_changes_btn);
  await page.waitForNavigation({
    //wait until there are no more conections that have traffic
    waitUntil: "networkidle0",
  });
  user_personal_title_val = await page.$eval(
    user_personal_title,
    (el) => el.value
  );
  expect(user_personal_title_val).toBe("Prof.");
  await page.waitForTimeout(650);
  await page.evaluate(() => {
    document.querySelector("#user_personal_title").value = "";
  });
  await page.click(save_user_changes_btn);
  await page.waitForNavigation({
    //wait until there are no more conections that have traffic
    waitUntil: "networkidle0",
  });
  user_personal_title_val = await page.$eval(
    user_personal_title,
    (el) => el.value
  );
  expect(user_personal_title_val).toBe("");
  ////// TEST DONE //////////

  await page.click(".sign-out");
  await page.removeAllListeners();
  await page.close();
  await browser.close();
  getStatement({ msg: "[ENDING]: 1.1 ", runlocally: true });
}, 12000);

Failing:

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)

score 2 · Accepted Answer · answered Oct 23 '20 at 14:26

The element you are selecting in document.querySelector(user_personal_title).value isn't available on page yet. You need to wait for your selector element to be available on page before you execute your page using waitForSelector(selector).
Simple POC is as following:

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

//or simply
 await page.waitForSelector(user_personal_title)

How to write robust test with puppeteer and jest?

1 Answers1