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
TIP: Zainicjalizować projekt możesz jeszcze za pomocą 2 metod.
Możesz użyć polecenia:
npm init playwright@latest --yes -- --quiet --browser=chromium
Albo z poziomu naszej darmowej wtyczki do VS Code – Playwright Helpers. Więcej o niej opowiadmy na Wtyczki do VS Code – efektywna automatyzacja testów z Playwright.
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 userNameLocator = 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(userNameLocator).toBeVisible();
const userName = await userNameLocator.innerText();
console.log(userName);
});
test("Check user name", async ({ page }) => {
// Arrange:
const userNameTestId = "user-full-name";
const userNameLocator = 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(userNameLocator).toHaveText(expectedUserName);
});
test("Missing birthdate (will fail on a bug!)", async ({ page }) => {
// Arrange:
const birthdateTestId = "user-date-of-birth";
const birthdateLocator = 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(birthdateLocator).toHaveText(expectedBirthdate);
});
test("birth date 100 years ago (will fail on a bug!)", async ({ page }) => {
// Arrange:
const ageTestId = "user-age";
const ageLocator = 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(ageLocator).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)
Hej hej,
Min 30:00 filmu – wartości które przekazujesz w JSOnie wyświetlają się poprawnie – jako undefined – jeśli natomiast wrzucimy zgodnie z testem pusty String do dateOfBirth w jsonie to wartość Date of Birth będzie : Invalid DAte, a Age = NaN – co by się zgodziło skoro wiek obliczany jest na podstawie daty urodzenia więc jeśli nie jest to wynikowy number to NaN jest poprawną wartością – natomiast ustawiając wartość undefined jednak jakąś wartość przekazujemy dlatego w Date of Birth wyświetla się undefined i w Age również undefined 🙂
Jakby zaginęło w słowotoku
// Arrange" const birthdateTestId = 'user-date-of-birth'; const birthdateLocator = page.getByTestId(birthdateTestId); const expectedBirthdate = '[No Data]'; // ACT await page.route('/api/v1/data/random/simple-user', async (route) => { const response = await route.fetch(); const json = await response.json(); // eslint-disable-next-line no-console console.log(json); json.dateOfBirth = ''; //<-- przekazanie pustego stringa do jsonowego responsea' await route.fulfill({ json: json }); }); // Act await page.goto('practice/random-simple-user-v1.html'); // Assert await expect(birthdateLocator).toHaveText(expectedBirthdate);To da inny rezultat niż na video:
1. Date of Birth: Invalida Date
2. Age: NaN
🙂
Pozdrawiam i spokojności życzę,
Jakub K
Dokładnie 😀
Tzn kazda z przygotowanych przez nas stron w GAD posiada więcej błędów, niż prezentujemy w lekcjach – dzięki temu można je testować i odkrywać we własnym zakresie😁 Nawet proste wyświetlanie danych i przeliczanie wartosci może być popsute na kilka różnych sposób, w zależności od danych wejściowych.
A dzięki mockowaniu – mozemy sprawnie odkryć te błędy bez potrzeby przygotowywania danych w systemie😉
Hej hej,
Włąśnie widzę ale to na spokojnie 🙂
Poadrawiam i spokojności życzę ;),
Jakub K
Hej hej,
Taki drobny błąd w nazewnictwie. Przy deklarowaniu zmiennych powinno być
const userNameTestId = "user-full-name"; <-- OK const userNameLocator = page.getByTestId(userNameTestId); <-- Locator nie selector zamiast: const userNameTestId = "user-full-name"; <-- Ok const userNameSelector = page.getByTestId(userNameTestId); <-- to nie selektor a lokatorTo tylko tak kwoli ścisłości – dzięki za poprawienie.
Pozdrawiam i spokojności życzę,
Jakub K – 🙂
Dzięki za to zgłoszenie – poprawione! 😀
Hej hej,
Super i dzięki za szybką reakcję 🙂
Pozdrawiam i spokojności życzę, 🙂
Jakub K