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)

Answer 1

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)