Teraz Ty - operacje na listach lokatorów

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

Spis treści

Teraz Ty – operacje na listach lokatorów

Prezentacja

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

Przygotuj nowy test w Playwright
Przejdź na testowaną stronę
Wyszukaj wszystkie elementy typu checkbox
Dodaj asercję sprawdzającą czy jest 5 elementów
Zaznacz każdy z elementów typu checkbox i wypisz na konsoli wynik z pola results dla każdego zaznaczenia
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

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:

});

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: }); });

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();

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);


await expect(elementLocator).toHaveCount(5);

Podpowiedź 5 - liczba elementów

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

await elementLocator.count();

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

}

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

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

Zewnętrzne linki i zasoby

Nasza aplikacja GAD do testów: Aplikacja do testów – gdzie będziemy testować koncepty automatyzacji? lekcja o pobraniu, instalacji i uruchomieniu
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)

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();

2 komentarze

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();
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();
```
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();
```
Radosław

10 stycznia 2025 o 02:20 3 miesiące temu

Odpowiedz
1. Zgadza się, że lepiej wykorzystać taj const Zaktualizowałem kod
  
  Krzysiek
  
  10 stycznia 2025 o 07:08 3 miesiące temu
  
  Odpowiedz