Powrót do: Playwright – Praktyczne wprowadzenie do testów automatycznych opartych o język Python
Playwright – Piszemy testy w oparciu o codegen
Już teraz sprawdź pierwsze lekcje w całości za darmo! 👉 Program Testy Automatyczne z Playwright.
Zautomatyzujemy przypadki testowe, jakie zaproponowaliśmy w poprzedniej lekcji:
- Poprawne logowanie do serwisu.
- Niepoprawne logowanie do serwisu – zbyt krótki identyfikator.
Testowana strona: Demobank i jej adres:
https://demobank.jaktestowac.pl/
Aby przyśpieszyć nasza pracę wykorzystamy codegen.
Kod prezentowany w tej i kolejnych lekcjach został zrealizowany w oparciu o konkretną wersję Playwrighta i kod z lekcji może się różnić od kodu, który Ty wygenerujesz na najnowszej wersji biblioteki.
Powodem są zmiany i ulepszenia jakie zachodza w Playwrighcie. Dodawane są nowe metody, sposoby lokalizacji elementów oraz interakcji z kontrolkami.
Jeśli Twój kod działa poprawnie/ to śmiało możesz progresować z materiałem 🙂
Automatyzujemy pierwszy przypadek testowy
Automatyzujemy drugi przypadek testowy
Komendy
Generowanie kodu na podstawie akcji na stronie:
playwright codegen
Kod testów
Test poprawnego logowania:
# test_demobank_login_valid.py
from playwright.sync_api import sync_playwright
def run(playwright):
browser = playwright.chromium.launch(headless=False)
context = browser.new_context()
# Open new page
page = context.new_page()
# Go to https://demobank.jaktestowac.pl/logowanie_etap_1.html
page.goto("https://demobank.jaktestowac.pl/logowanie_etap_1.html")
# Fill input[type="text"]
page.fill("input[type=\"text\"]", "12341321")
# Press Enter
with page.expect_navigation():
page.press("input[type=\"text\"]", "Enter")
# Click input[name="haslo"]
page.click("input[name=\"haslo\"]")
# Fill input[name="haslo"]
page.fill("input[name=\"haslo\"]", "12341231")
# Press Enter
with page.expect_navigation():
page.press("input[name=\"haslo\"]", "Enter")
# assert text=Jan Demobankowy
assert page.inner_text('#user_name') == r'Jan Demobankowy', f"Actual value: {page.inner_text('#user_name')}"
# ---------------------
context.close()
browser.close()
with sync_playwright() as playwright:
run(playwright)
Test niepoprawnego logowania:
# test_demobank_login_invalid.py
from playwright.sync_api import sync_playwright
def run(playwright):
browser = playwright.chromium.launch(headless=False)
context = browser.new_context()
# Open new page
page = context.new_page()
# Go to https://demobank.jaktestowac.pl/logowanie_etap_1.html
page.goto("https://demobank.jaktestowac.pl/logowanie_etap_1.html")
# Fill input[type="text"]
page.fill("input[type=\"text\"]", "123")
# Press Enter
page.press("input[type=\"text\"]", "Enter")
# assert error
assert page.inner_text('#error_login_id') == r"identyfikator ma min. 8 znaków", f"Actual value: {page.inner_text('#error_login_id')}"
# ---------------------
context.close()
browser.close()
with sync_playwright() as playwright:
run(playwright)
Czy jest jakiś powód dla którego mój codegen działa inaczej? tj nie ma opisów i najpierw lokalizuje element a dopiero potem wykonuje akcję
page1.get_by_role(“link”, name=”Program Testy Automatyczne z Playwright”).first.click()
page2.goto("https://demobank.jaktestowac.pl/")
page2.locator("#login_id").click()
page2.locator("#login_id").fill("abc")
Powodem może być wersja Playwrighta 🙂
Z każdą kolejną wersją jest szansa, że narzędzie do nagrywania będzie dalej usprawniane, a tym samym zmieni się wygenerowany kod.
Kod z tej lekcji (i kursu) był realizowany na bibliotece kilka wersji wstecz i od tamtego czasu pojawiło się już kilka usprawnień – np. w sposobie lokalizowania elementów czy interakcji z kontrolkami.
Jeśli wygenerowany kod działa poprawnie, a akcje wykonują się w zaplanowany przez Ciebie sposób – to nie masz czym się przejmować i możesz dalej progresować 🙂
PS. Tymczasem dodam stosowną informację do samego kursu o potencjalnych różnicach w kodzie wygenerowanym przez codegen 🙂
No w kwestii tego czy działa to opinie mogą być różne 😀 znaczy w nieco bardziej złożonym przypadku, ogarnięcie jaki selektor użyć może być zaporowe (w przeciwieństwie do Cypressa). Logika łapania elementów w tabeli po różnych atrybutach które są dość oczywiste gdzieś indziej tutaj po paru godzinach kończą się porażką bo wszystkie materiały omawiają jakieś banalne przypadki. Znaczy nawet jak problem jest z dwoma na dziesięć to i tak nie wiadomo co dalej
Wygenerowany kod przez codegen jest zazwyczaj w miarę przyzwoitej jakości 😀
Dokładnie tak jak mówisz wszystko zależy od przypadku – głównie od testowanej aplikacji i jakości architektury front-endu. Mając poprawnie przydzielone ID (albo data-testid) – sprawa jest banalnie prosta.
Gorzej, jeśli aplikacja posiada elementy bez id, z powtarzającymi się klasami etc. To wtedy znajdowanie elementów może być wyzwaniem.
Jeśli chodzi o znajdowanie elementów to zarówno Playwright jak i Cypress domyślnie bazują na selektorach CSS. W Playwrighcie v1.27 dodano metody ułatwiające znajdowanie elementów po różnych najpopularniejszych atrybutach, jak role, label etc.
https://playwright.dev/docs/release-notes#version-127
Z doświadczenia moge powiedzieć, że w znacznej większości przypadków łatwiej znajdowało mi się takie bardziej nietrywialne elementy w Playwrigcie niż w Cypressie. PW m.in. pozwala na więcej możliwości manipulacji lokatorami etc.
Wracając – wszystko zależy od danego przypadku i potrzeby. Faktycznie niektóre element może być ciężko namierzyć i wtedy trzeba się zastanowić czy:
– możemy się dobrać do danego elementu stosując bardziej zaawansowane selektory CSS?
– jest to dla nas niezbędne w danym teście?
– czy można to jakoś obejść? (np jak z danego wiersza mamy problem z wyciągnięciem 2 komórek z 10 to można spróbować użyć metody innerText() na całym wierszu)
W tym materiale omawiamy podstawy na zasadzie “jak wystartować”, ale obecnie wypuszczamy całkowicie nowy materiał, gdzie pokażemy również nietrywialne przypadki 🙂
Masz może jakieś konkretne, publicznie dostępne (na testowych stronach) przykłady elementów, które były ciężkie do zlokalizowania?