Powrót do: Praktyczne wprowadzenie do testów automatycznych z Playwright
Teraz Ty – podstawowy POM w testach
Prezentacja
Dodatkowe materiały
Bazujemy na kodzie lekcji L04_pom_negative_tests
Treść zadania
Zrefaktoryzuj testy automatyczne pulpitu (z pliku pulpit.spec.ts) oraz płatności (z pliku payment.spec.ts), aby wykorzystywały one wzorzec POM.
Podczas rozwiązywania tego zadania wzoruj się na naszej poprzedniej lekcji, gdzie refaktoryzowaliśmy testy logowania z pliku login.spec.ts.
Wykorzystaj tutaj całą zdobytą we wcześniejszych lekcjach wiedzę 🙂
Na końcu ej lekcji znajdziesz podpowiedzi do tego zadania, ale zachęcam Cię do samodzielnej implementacji i tylko posiłkowania się podpowiedziami 😉
Reasumując:
- zamodeluj stronę Płatności jako payment.page.ts
- wykorzystaj zamodelowaną stronę Płatności w testach payment.spec.ts
- zamodeluj stronę Pulpitu jako pulpit.page.ts
- wykorzystaj zamodelowaną stronę Pulpitu w testach pulpit.spec.ts
- w testach Logowania, w login.spec.ts, również wykorzystywany jest fragment strony Pulpitu – przy sprawdzeniu nazwy użytkownika po zalogownaniu. Wykorzystaj tutaj wcześniej przygotowany obiekt strony pulpit.page.ts
beforeEach wykorzystujemy lewe boczne menu do wejścia na stronę Płatności.
Dokładniej jest to linia:
await page.getByRole('link', { name: 'płatności' }).click();
w beforeEach:
test.beforeEach(async ({ page }) => {
const userId = loginData.userId;
const userPassword = loginData.userPassword;
await page.goto('/');
const loginPage = new LoginPage(page);
await loginPage.loginInput.fill(userId);
await loginPage.passwordInput.fill(userPassword);
await loginPage.loginButton.click();
await page.getByRole('link', { name: 'płatności' }).click();
});
⚠ W tym zadaniu pozostaw ten element w obecnej postaci i nie wykonuj tutaj refaktoryzacji (tylko w beforeEach). ⚠.
Możesz się zastanowić nad rozwiązaniem, jak zamodelować takie menu, ale o tym elemencie opowiem Ci w kolejnych lekcjach 🙂