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

Teraz Ty – operacje na listach lokatorów

Prezentacja

Teraz Ty - operacje na listach lokatorów

Treść zadania

Na stronie http://localhost:3000/practice/simple-multiple-elements-no-ids.html (jeśli korzystasz z aplikacji GAD lokalnie) wyszukaj wszystkie elementy typu checkbox. Zweryfikuj czy na stronie jest widocznych 5 elementów, a następnie je zaznacz.

Wykorzystaj w tym celu operacje na listach lokatorów 😉

Zadanie dodatkowe (trudniejsze):
Zweryfikuj, czy każde oznaczenia checkboxa dało pożądany wynik w polu results.

Podpowiedź - szczegółowe kroki zadania
  1. Przygotuj nowy test w Playwright
  2. Przejdź na testowaną stronę
  3. Wyszukaj wszystkie elementy typu checkbox
  4. Dodaj asercję sprawdzającą czy jest 5 elementów
  5. Zaznacz każdy z elementów typu checkbox i wypisz na konsoli wynik z pola results dla każdego zaznaczenia
  6. Zadanie dodatkowe (trudniejsze): dodaj asercję sprawdzającą każde oznaczenie checkboxa dało pożądany wynik
TIP: To zadanie możesz realizować w osobnym pliku .spec.ts istniejącym projekcie, jaki przygotowaliśmy w tym kursie 🙂
TIP: Zadanie to zrealizuj o oparciu o naszą aplikację do testów. Więcej o niej znajdziesz w dedykowanej lekcji – Aplikacja do testów – gdzie będziemy testować koncepty automatyzacji?
Powodzenia!

Podpowiedzi

Podpowiedź 1 - nazwa pliku

Plik z testami możesz nazwać jako:

ex2-locator-lists.spec.ts
Podpowiedź 2 - deklaracja describe i test

Aby zaznaczyć element typu checkbox, wykorzystaj funkcję:

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


test.describe("Multiple checkboxes", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/practice/simple-multiple-elements-no-ids.html");
  });


  test("action on multiple checkboxes", async ({ page }) => {
    // TODO:


  });
});
Podpowiedź 3 - zaznaczenie checkboxa

Aby zaznaczyć element typu checkbox, wykorzystaj funkcję:

await checkboxLocator.check();

Pamiętaj, że metoda check() zwraca błąd, jeśli spróbujemy ją wywołać na lokatorze, wskazującym na wiele elementów!

Podpowiedź 4 - sprawdzenie liczby elementów

Aby sprawdzić liczbę elementów, wykorzystaj funkcję:



await expect(elementLocator).toHaveCount(5);
Podpowiedź 5 - liczba elementów

Aby pobrać liczbę elementów, wykorzystaj funkcję:

await elementLocator.count();
Podpowiedź 6 - iterowanie po elementach

Aby sprawdzić liczbę elementów, wykorzystaj funkcję:

    const numberOfFoundElements = await elementLocator.count();
    for (let i = 0; i < numberOfFoundElements; i++) {
      // action on element
    }

Zewnętrzne linki i zasoby

2 komentarze 

  1. tutaj to samo, zamiast let powinno byc const, ta zmianna się nie zmienia i jest stała 
 let numberOfFoundElements = await elementLocator.count();
const numberOfFoundElements = await elementLocator.count();
    Avatar Radosław Szczap
    Odpowiedz

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *