Przewodnik po selektorach i metodach klikania w Playwright

Klikanie i selekcja elementów na stronie internetowej są kluczowymi aspektami testów automatycznych. Playwright, nowoczesny framework do testowania aplikacji webowych, oferuje różnorodne metody selekcji i klikania elementów, co pozwala na precyzyjne i skuteczne testowanie interakcji użytkownika z aplikacją. W tym artykule przedstawimy podstawowe i zaawansowane techniki korzystania z selektorów oraz metod klikania w Playwright, podkreślając ich znaczenie i zastosowanie w codziennej pracy testerów automatyzujących. Omówimy również przypadki, w których musimy iterować po selektorach, ponieważ nie możemy ich indywidualnie zlokalizować, a także najlepsze praktyki, które mogą zwiększyć stabilność i niezawodność testów oraz typowe wyzwania, z którymi można się spotkać w czasie pracy, jak i sposoby radzenia sobie z nimi.

Podstawowe rodzaje selektorów:

• Selekcja za pomocą identyfikatora (ID): Selekcja elementów za pomocą ich unikalnych identyfikatorów jest jedną z najprostszych i najczęściej używanych metod.

await page.click('#submit-button');

Powyższy kod klika w przycisk o identyfikatorze submit-button.

• Selekcja za pomocą klasy: Klasy CSS są kolejnym popularnym sposobem identyfikacji elementów.

await page.click('.btn-primary');

Ten kod klika w pierwszy element na stronie z klasą btn-primary.

• Selekcja za pomocą nazwy znacznika: Możemy również wybierać elementy na podstawie ich znaczników HTML.

await page.click('button');

Powyższy kod klika w pierwszy przycisk <button> na stronie.

• Selekcja za pomocą atrybutów: Możemy selekcjonować elementy na podstawie dowolnego atrybutu HTML.

await page.click('input[name="username"]');

Ten kod klika w pole wejściowe <input> z atrybutem name o wartości username.

• Selekcja za pomocą tekstu: Możliwe jest również wybieranie elementów na podstawie ich widocznego tekstu.

await page.click('text="Log in"');

await page.click(’text=”Log in”’);

Zaawansowane techniki selekcji:

• Selekcja za pomocą CSS Selector: Playwright obsługuje pełną składnię selektorów CSS, co pozwala na bardziej precyzyjne wybieranie elementów.

await page.click('form#loginForm > input[type="submit"]');

Ten kod klika w przycisk typu submit wewnątrz formularza o identyfikatorze loginForm.

• Selekcja za pomocą XPath: XPath jest językiem do selekcji węzłów w dokumentach XML, który jest również obsługiwany przez Playwright.

await page.click('//button[text()="Submit"]');

Powyższy kod klika w przycisk z tekstem „Submit” za pomocą XPath.

• Selekcja za pomocą selektorów łańcuchowych: Możemy łączyć różne selektory, aby dokładniej określić element do kliknięcia.

await page.click('#main-content .article .title');

Ten kod klika w element z klasą title, który jest wewnątrz elementu z klasą article, który z kolei znajduje się w elemencie z identyfikatorem main-content.

Podstawowe metody klikania:

• click(): Metoda click() to podstawowa metoda kliknięcia w Playwright. Umożliwia ona kliknięcie w element na stronie identyfikowany za pomocą selektora.

await page.click('button#submit');

Powyższy kod klika w przycisk o identyfikatorze submit.

• dblclick(): Metoda dblclick() pozwala na wykonanie podwójnego kliknięcia, co może być potrzebne przy testowaniu interakcji wymagających tego typu akcji jak np. edycja tekstu.

await page.dblclick('text=Edit');

Ten kod wykonuje podwójne kliknięcie na elemencie z tekstem Edit.

• rightClick(): Metoda rightClick() służy do symulowania kliknięcia prawym przyciskiem myszy, co może być użyteczne przy testowaniu menu kontekstowych.

await page.click('div.context-menu', { button: 'right' });

Powyższy kod klika prawym przyciskiem myszy na elemencie div z klasą context-menu.

Zaawansowane techniki klikania:

• click() z opcjami: Metoda click() może być używana z różnymi opcjami, takimi jak button, clickCount, delay, co pozwala na dokładniejsze symulowanie różnych scenariuszy kliknięć.

await page.click('button#submit', { button: 'middle', clickCount: 2, delay: 100 });

Ten kod wykonuje dwukrotne kliknięcie środkowym przyciskiem myszy na przycisku submit z opóźnieniem 100 ms między kliknięciami.

• click() z flagą force: Czasami element może być ukryty lub zasłonięty przez inny element, co uniemożliwia jego kliknięcie. W takich przypadkach można użyć opcji force: true w metodzie click().

await page.click('button#hidden-submit', { force: true });

Ten kod wymusza kliknięcie w ukryty przycisk hidden-submit.

• click() z przemieszczeniem kursora: Playwright umożliwia również kliknięcie w określonym miejscu w obrębie elementu, co jest szczególnie przydatne przy testowaniu interfejsów graficznych.

await page.click('canvas#chart', { position: { x: 50, y: 100 } });

Ten kod klika w punkt o współrzędnych (50, 100) na elemencie canvas z identyfikatorem chart.

Inne przydatne metody klikania:

• hover(): Metoda hover() umożliwia najechanie kursorem na element, co jest przydatne przy testowaniu efektów pojawiających się po najechaniu myszą, takich jak rozwijane menu.

await page.hover('button#menu');
await page.click('button#submenu');

Ten kod najpierw najeżdża kursorem na przycisk menu, a następnie klika w przycisk submenu, który pojawia się po najechaniu.

• dispatchEvent(): Metoda dispatchEvent() pozwala na bardziej szczegółową symulację zdarzeń, w tym kliknięć. Umożliwia ona wysyłanie niestandardowych zdarzeń do elementów.

await page.dispatchEvent('button#submit', 'click');

Ten kod wysyła zdarzenie kliknięcia do przycisku submit.

Iteracja po selektorach:

Czasami zdarza się, że na stronie znajduje się wiele elementów, które musimy przetestować, ale nie mają one unikalnych identyfikatorów lub klas, które umożliwiałyby ich indywidualną selekcję. W takich przypadkach możemy iterować po wszystkich pasujących elementach i wykonywać na nich operacje.

• Iteracja za pomocą page.$$: Metoda page.$$ zwraca tablicę wszystkich elementów pasujących do danego selektora. Możemy następnie przeiterować po tej tablicy i wykonać operacje na każdym z elementów.

const elements = await page.$$('div.item');
for (let element of elements) {
  await element.click();
}

Powyższy kod klika w każdy element z klasą item.

• Iteracja za pomocą locator() i nth(): Metoda locator pozwala na bardziej zaawansowaną interakcję z grupą elementów. Możemy użyć metody nth(), aby wybrać konkretny element z grupy.

const items = page.locator('div.item');
for (let i = 0; i < await items.count(); i++) {
  await items.nth(i).click();
}

Ten kod klika w każdy element z klasą item za pomocą locator.

• Iteracja z użyciem pętli forEach: Możemy również użyć pętli forEach do iteracji po elementach i wykonywania na nich operacji.

const elements = await page.$$('div.item');
elements.forEach(async (element) => {
  await element.click();
});

Ten kod klika w każdy element z klasą item za pomocą pętli forEach.

Najlepsze praktyki w korzystaniu z selektorów i metod klikania w Playwright

Podczas korzystania z selektorów i metod klikania w Playwright, ważne jest, aby stosować najlepsze praktyki, które zapewnią stabilność i niezawodność testów automatycznych. Oto kilka wskazówek:

• Unikanie zbyt ogólnych selektorów: Wybierając selektory, staraj się unikać zbyt ogólnych elementów, takich jak button czy div. Zamiast tego, korzystaj z bardziej precyzyjnych selektorów, które uwzględniają atrybuty, klasy lub hierarchię elementów. Na przykład, zamiast używać button, lepiej jest wybrać button#submit-button lub button.btn-primary.
• Stabilność selektorów: Upewnij się, że używane selektory są stabilne i nie zmienią się przy najmniejszych modyfikacjach w kodzie HTML. Warto stosować selektory, które opierają się na stałych atrybutach lub klasach, takich jak np. ID, a nie na dynamicznie generowanych wartościach, takich jak klasy CSS o losowych nazwach, które mogą się zmieniać przy każdej aktualizacji kodu.
• Czekanie na elementy: Często zdarza się, że testy nie działają poprawnie, ponieważ próbują interakcji z elementami, które nie są jeszcze dostępne na stronie. W takich przypadkach warto używać metod oczekiwania, takich jak page.waitForSelector(), aby upewnić się, że elementy są dostępne przed wykonaniem kliknięcia.
• Obsługa wyjątków: Zawsze warto przewidzieć, że niektóre elementy mogą być niedostępne lub mogą wystąpić inne problemy podczas klikania. W takich przypadkach dobrze jest zaimplementować mechanizmy obsługi wyjątków, które mogą ponownie próbować wykonania akcji lub zgłaszać odpowiednie błędy.

Typowe wyzwania i rozwiązania w Playwright

Podczas pracy z Playwright, napotkać można kilka typowych wyzwań, szczególnie gdy chodzi o selekcję elementów i symulację kliknięć.

• Zasłonięte elementy: Czasami element, który chcesz kliknąć, może być zasłonięty przez inne elementy, co spowoduje błąd w teście. W takich przypadkach pomocna jest opcja force: true w metodzie click(), która wymusi kliknięcie, nawet jeśli element jest niewidoczny.
• Dynamika aplikacji: W nowoczesnych aplikacjach webowych elementy mogą być dynamicznie dodawane lub usuwane ze strony. To może prowadzić do problemów z selektorami, które nagle przestają działać. Używanie selektorów opartych na bardziej stabilnych cechach, takich jak stałe atrybuty, może pomóc w rozwiązaniu tego problemu.
• Różnice w środowiskach testowych: Testy mogą działać różnie w zależności od środowiska (np. lokalnego, CI/CD, różnych przeglądarek). Warto więc regularnie uruchamiać testy w różnych konfiguracjach, aby upewnić się, że są one uniwersalne i niezawodne.

Podsumowanie

Rozwijając umiejętności związane z selektorami i metodami klikania w Playwright, można znacznie zwiększyć jakość testów automatycznych. Zrozumienie najlepszych praktyk oraz typowych wyzwań, z którymi można się spotkać, pozwala na efektywniejsze testowanie aplikacji i minimalizowanie problemów, które mogą pojawić się na różnych etapach rozwoju projektu. Playwright oferuje zaawansowane narzędzia, które odpowiednio wykorzystane, mogą dostarczyć wartościowych i stabilnych testów, niezależnie od złożoności aplikacji.