Teraz Ty – wyszukiwanie elementów na stronie

1. Przygotuj nowy test w Playwright
2. Przejdź na testowaną stronę
3. W teście znajdź pole checkbox na 5 różnych sposobów – czyli za pomocą:
   • ID
   • klasy
   • roli
   • data-testid
   • atrybutu ckbx, który ma wartość val1
4. Dla każdego powyższego sposobu sprawdź czy znaleziony element jest widoczny na stronie

W tym zadaniu wykorzystaj oficjalną dokumentację Playwright😉 Dzięki temu oswoisz się z szukaniem wartościowej wiedzy w dokumentacji – playwright.dev.

Plik z testami możesz nazwać jako:

ex1-input.spec.ts

Aby przejść na testowaną stronę możesz wykorzystać konstrukcję:

test.beforeEach(async ({ page }) => {
    await page.goto("/practice/simple-elements.html");
});

Są 2 podejścia 😉

Zadanie możesz zrealizować w formie 5 osobnych testów.
W każdym z testów wyszukasz elementy checkbox na jeden z zadanych sposobów, a następnie w każdym teście sprawdzisz czy element jest widoczny na stronie.

Drugie podejście to jeden test.
W teście tym wyszukasz element checkbox na 5 sposobów i dla każdego sposobu sprawdzisz czy jest widoczny. Ten sposób będziemy tutaj preferować 😉

Aby sprawdzić widoczność, użyj poniższej konstrukcji:

await expect(elementLocator).toBeVisible();

Aby sprawdzić widoczność wielu elementów w jednym teście, użyj poniższej konstrukcji:

    await expect.soft(elementLocatorById).toBeVisible();
    await expect.soft(elementLocatorByClass).toBeVisible();

Selektor, który pozwala na wyszukanie elementu po atrybucie ma postać:

    const resultSelector = "[nazwa_atrybutu='wartosc_atrybutu']";

Czyli, przykładowo aby znaleźć element po atrybucie data-testid oraz wartości atrybutu dti-results, konstrukcja przyjmie postać:

    const resultSelector = "[data-testid='dti-results']";