Pierwsze testy z mockowaniem w Playwright

Powrót do: Playwright Elements – Kluczowe koncepcje automatyzacji testów

Pierwsze testy z mockowaniem w Playwright

Prezentacja

Dodatkowe materiały

Aby zainicjalizować projekt, musisz wykonać komendę:

npm init playwright@latest

Po przygotowaniu projektu musisz również zainstalować przeglądarki (w tym przypadku – tylko Chromium) za pomocą polecenia:

npx playwright install chromium

npm init playwright@latest --yes -- --quiet --browser=chromium

W tej lekcji będziemy testować stronę http://localhost:3000/practice/random-simple-user-v1.html (jeśli korzystasz z aplikacji GAD lokalnie)

Wynikowy kod

Wynikowy w pliku user-data.spec.ts:

import { test, expect } from "@playwright/test";


test.describe("Test User Data", () => {
  test("Check user name visibility", async ({ page }) => {
    // Arrange:
    const userNameTestId = "user-full-name";
    const userNameSelector = page.getByTestId(userNameTestId);


    await page.route("/api/v1/data/random/simple-user", async (route) => {
      const response = await route.fetch();
      const json = await response.json();
      console.log(json);
      await route.fulfill({ json: json });
    });


    // Act:
    await page.goto("/practice/random-simple-user-v1.html");


    // Assert:
    await expect(userNameSelector).toBeVisible();


    const userName = await userNameSelector.innerText();
    console.log(userName);
  });


  test("Check user name", async ({ page }) => {
    // Arrange:
    const userNameTestId = "user-full-name";
    const userNameSelector = page.getByTestId(userNameTestId);
    const expectedUserName = "John Doe";


    await page.route("/api/v1/data/random/simple-user", async (route) => {
      const response = await route.fetch();
      const json = await response.json();
      console.log(json);
      await route.fulfill({ json: mockedUserData });
    });


    // Act:
    await page.goto("/practice/random-simple-user-v1.html");


    // Assert:
    await expect(userNameSelector).toHaveText(expectedUserName);
  });


  test("Missing birthdate (will fail on a bug!)", async ({ page }) => {
    // Arrange:
    const birthdateTestId = "user-date-of-birth";
    const birthdateSelector = page.getByTestId(birthdateTestId);
    const expectedBirthdate = "[No Data]";


    await page.route("/api/v1/data/random/simple-user", async (route) => {
      const response = await route.fetch();
      const json = await response.json();
      console.log(json);
      json.dateOfBirth = undefined;
      await route.fulfill({ json: json });
    });


    // Act:
    await page.goto("/practice/random-simple-user-v1.html");


    // Assert:
    await expect(birthdateSelector).toHaveText(expectedBirthdate);
  });


  test("birth date 100 years ago (will fail on a bug!)", async ({ page }) => {
    // Arrange:
    const ageTestId = "user-age";
    const ageSelector = page.getByTestId(ageTestId);
    const expectedAge = "101";
    const bithDate = "1923-04-02T00:00:00.000Z";


    await page.route("/api/v1/data/random/simple-user", async (route) => {
      const response = await route.fetch();
      const json = await response.json();
      console.log(json);
      json.dateOfBirth = bithDate;
      await route.fulfill({ json: json });
    });


    // Act:
    await page.goto("/practice/random-simple-user-v1.html");


    // Assert:
    await expect(ageSelector).toHaveText(expectedAge);
  });
});


const mockedUserData = {
  userId: "U7800",
  username: "frankgonzalez282",
  firstName: "John",
  lastName: "Doe",
  email: "frankgonzalez282@test2.test.com",
  phone: "+845-666-357-2761",
  dateOfBirth: "1966-04-02T00:00:00.000Z",
  profilePicture: "83d80aca-da5a-4582-88d6-34a42574a9fe.jpg",
  address: {
    street: "203 Hill Street",
    city: "Zoar",
    postalCode: 79484,
    country: "UK",
  },
  lastLogin: "2022-05-21T00:00:00.000Z",
  accountCreated: "2019-09-26T00:00:00.000Z",
  status: 1,
};

Zewnętrzne linki i zasoby

• Oficjalnym repozytorium: GitHub / 🦎GAD
• Mini kurs, w którym opowiadamy szczegółowo o naszej aplikacji do testów: GAD – poznaj naszą autorską aplikację do nauki automatyzacji (🔒Tylko dla członków Programu Automatyzacja z Playwright)
• Oficjalna dokumentacja Playwright: Mock APIs
• Nasz webinar o mockowaniu: Playwright w akcji – testy GUI bez backendu. Przyspiesz testy z podstawami API i mockowaniem w Playwright (z TypeScript)