Rozwiązanie – operacje na listach lokatorów

TIP: Cały kod testów z poszczególnych lekcji znajdziesz w specjalnie przygotowanym repozytorium:
👉jaktestowac/playwright-elements-locators

TIP: Ta lekcja jest częścią rozwijanego Programu Testy Automatyczne z Playwright 🎭

Przykładowe rozwiązanie

Rozwiązanie podstawowe

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 }) => {
    // Arrange:
    const elementRole = "checkbox";
    const resultsTestId = "dti-results";
    const expectedNumberOfElements = 5;


    const checkboxLocator = page.getByRole(elementRole);
    const resultsLocator = page.getByTestId(resultsTestId);


    // Assert:
    await expect(checkboxLocator).toHaveCount(expectedNumberOfElements);


    let numberOfFoundCheckboxes = await checkboxLocator.count();
    for (let i = 0; i < numberOfFoundCheckboxes; i++) {
      // Act:
      await checkboxLocator.nth(i).check();


      // display the text content of the results element
      console.log("results text content:", await resultsLocator.textContent());
    }
  });
});




Rozwiązanie trudniejsze, z asercją

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


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


  test("action on multiple checkboxes (advanced, with assertion)", async ({
    page,
  }) => {
    // Arrange:
    const elementRole = "checkbox";
    const resultsTestId = "dti-results";
    const expectedMessages = {
      0: "Checkbox is checked! (Opt 1!)",
      1: "Checkbox is checked! (Opt 2!)",
      2: "Checkbox is checked! (Opt 3!)",
      3: "Checkbox is checked! (Opt 4!)",
      4: "Checkbox is checked! (Opt 5!)",
    };
    const expectedNumberOfElements = 5;


    const checkboxLocator = page.getByRole(elementRole);
    const resultsLocator = page.getByTestId(resultsTestId);


    // Assert:
    await expect(checkboxLocator).toHaveCount(expectedNumberOfElements);


    // Act & Assert:
    let numberOfFoundCheckboxes = await checkboxLocator.count();
    for (let i = 0; i < numberOfFoundCheckboxes; i++) {
      // Act:
      await checkboxLocator.nth(i).check();
      console.log(await resultsLocator.innerText());


      // Assert:
      await expect.soft(resultsLocator).toHaveText(expectedMessages[i]);
    }
  });


});



Zasoby i dokumentacja

2 komentarze

  1. hej ja w dodatkowym zadaniu użyłem takiego zapisu

       
    const verifyMessage = [
        'Checkbox is checked! (Opt 1!)',
        'Checkbox is checked! (Opt 2!)',
        'Checkbox is checked! (Opt 3!)',
        'Checkbox is checked! (Opt 4!)', 
        'Checkbox is checked! (Opt 5!)'] 

    choć pokazany zapis obiektu bardziej do mnie przemawia 🙂 świetna lekcja i zadania które faktycznie wnoszą praktyczne umiejętności 😉

    Avatar Andrzej S
    1. Dzięki wielkie!🙇‍♂️

      W tym przypadku tka lista też się sprawdzi, a lista obiektów daje więcej możliwości.
      A to moze się przydać w bardziej skomplikowanych przypadkach lub gdy potrzebujemy bardziej skomplikowanych danych testowych 🙂

      Krzysiek Kijas Krzysiek Kijas

Dodaj komentarz

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