Puppeteer Testing Example

import puppeteer from "puppeteer";
import faker from "faker";

const User = {
  name: faker.name.findName(),
  phone: faker.phone.phoneNumber(),
  notes: faker.random.words(1),
};

const User1 = {
  name: faker.name.findName(),
  phone: faker.phone.phoneNumber(),
  notes: faker.random.words(1),
};

let page;
let browser;

const isDebugging = () => {
  const debuggingMode = {
    headless: false,
    slowMo: 50,
  };
  return process.env.JEST_ENV === "debug" ? debuggingMode : {};
};

jest.setTimeout(10000);

beforeAll(async () => {
  browser = await puppeteer.launch(isDebugging());
  page = await browser.newPage();
  await page.goto(
    `http://localhost:${process.env.JEST_ENV === "debug" ? "3003" : "3000"}/`
  );
  page.setViewport({
    width: 1000,
    height: 1080,
  });
});

afterAll(async () => {
  await page.close();
  await browser.close();
});

describe("Login Page", () => {
  test("Page has content", async (assert) => {
    const content = await page.content();
    assert.ok(content.length > 0);
  });

  test("Page doesn't have any visual change", async (assert) => {
    await page.screenshot({
      path: "screenshots/full.png",
      fullPage: true,
    });
  });

  test("Page has password", async () => {
    await page.click('[data-test-id="password"]');
    await page.type('[data-test-id="password"]', "password");
  });
});

describe("Edit User", () => {
  test("The page update user info", async () => {
    await page.click(`[data-test-username="${User.name}"]`);

    await page.click('[data-test-id="userName"]', { clickCount: 3 });
    await page.type('[data-test-id="userName"]', User1.name);

    await page.click('[data-test-id="userPhone"]', { clickCount: 3 });
    await page.type('[data-test-id="userPhone"]', User1.phone);

    await page.click('[data-test-id="signInButton"]');

    let userName;
    let res = await page.waitForSelector(
      `[data-test-username="${User1.name}"]`
    );
    console.log(res);
    expect(res).toBeDefined();
  });
});

describe("Delete User", () => {
  test("The page lets you to change your mind when deleting the video call", async () => {
    await page.click(`[data-test-username="${User1.name}"]`);
    await page.click('[data-test-id="deleteUser"]');
    await page.click('[data-test-id="no"]');
    const res = await page.waitForSelector(
      `[data-test-username="${User1.name}"]`
    );
    expect(res).toBeDefined();
  });

  test("The page lets you to delete the video call", async () => {
    await page.click(`[data-test-username="${User1.name}"]`);
    await page.click('[data-test-id="deleteUser"]');
    await page.click('[data-test-id="yes"]');
  });
});