👨‍🏫 Porady

Co nowego w Playwright 1.42 - praktyczne przykłady!

Language
date
Feb 28, 2024
slug
co-nowego-w-playwright-1.42
author
status
Public
tags
Playwright
Release
summary
Nowe funkcje Playwright przetestowane z kodem, omówieniem i linkami do dokumentacji
type
Post
thumbnail
co-nowego-w-playwright-1.42.jpg
updatedAt
Mar 1, 2024 02:41 AM
category
👨‍🏫 Porady

Mamy nową wersję Playwright 1.42 🎉

 
A w niej oprócz mnóstwa naprawionych bugów i aktualizacji przeglądarek kilka nowych funkcji. 🔗 https://playwright.dev/docs/release-notes#version-142
 
Omówmy i przetestujmy najważniejsze.
Testy wykonam na naszej autorskiej aplikacji do testów GAD, którą pobierzesz tutaj:
 
Zrobimy to na przykładzie szalonych testów, które będą grały w grę w łapanie buga: 🔗 http://localhost:3000/whacker.html
 
notion image
🔥
Aplikacja do testów GAD posiada wiele ciekawych zakątków i bugów które wykorzystujemy przy nauce profesjonalnego frameworka w Playwright 🔗https://jaktestowac.pl/playwright/
Nim zaczniesz testować nie zapomnij o aktualizacji Playwright poprzez npm install @playwright/test i zainstalowaniu nowych przeglądarek npx playwright install.

🔖 Tagi mają teraz natywną implementację - już nie muszą zaśmiecać nazw testów

 
Wcześniej tagi dodawaliśmy tak po znaku @:
import { test, expect } from '@playwright/test'; test('should catch a 3 bugs @release_1_42 @game', async () => { expect(true).toBeTruthy(); });
 
Teraz możemy użyć nowego sposobu:
test( 'should catch a 3 bugs', { tag: ['@release_1_42', '@game'] }, async () => { expect(true).toBeTruthy(); }, );
Różnica jest znacząca - pierwszy test ma tagi w starym stylu a drugi w nowym 👏:
notion image
 

🤖 LocatorHandler czyli automatyczny klikacz w teście

Taka funkcja przyda się gdy chcemy aby jakaś akcja wykonała się automatycznie, i nie wiemy kiedy wydarzy się podczas flow testu…
Załóżmy, że mamy np. wyskakujące okno z zapisem do subskrypcji. Chcemy, aby ono było automatycznie zamknięte, gdy się tylko pojawi.
Nuuuda. Mamy przecież 🐛 do złapania!
 
Jak będzie wyglądało klasyczne łapanie?
test( 'should catch a 3 bugs', { tag: ['@release_1_42', '@game'] }, async ({page}) => { // Arrange await page.goto('http://localhost:3000/whacker.html'); // Act await page.getByRole('button', { name: 'Start Game' }).click(); await page.getByText('🐛').click(); await page.getByText('🐛').click(); await page.getByText('🐛').click(); // Assert const actualScore = await page.locator('#score').innerText().then(Number); expect(actualScore).toBe(3); }, );
Można to zrobić automatycznie🤖 za pomocą nowego handlera.
 
Przed naszymi akcjami testowymi tworzymy handler który to obsłuży: page.addLocatorHandler(lokator, funkcja po identyfikacji lokatora)
 
test( 'should catch a 3 bugs handler', { tag: ['@release_1_42', '@game'] }, async ({ page }) => { // Handler await page.addLocatorHandler(page.getByText('🐛'), async () => { await page.getByText('🐛').click(); }); // Arrange await page.goto('http://localhost:3000/whacker.html'); // Act await page.getByRole('button', { name: 'Start Game' }).click(); const scoreLocatorWaitFor3 = page.locator('#score').filter({hasText: '3'}); await scoreLocatorWaitFor3.focus(); // Assert await expect(scoreLocatorWaitFor3).toBeVisible(); }, );
 
Po odpaleniu testów zobaczysz jak handler sobie klika, gdy zobaczy paskudnego buga💥
 
Brzmi trochę strasznie?
Playwright, podczas wykonania naszego testu, może zacząć klikać samodzielnie jak tylko spełniony będzie warunek przygotowanego handlera.
 
Musisz być świadomy, że może to zaburzyć twój flow testu (o tym też ostrzegają twórcy w dokumentacji)
 
🚧
Uwaga! Handler zadziała tylko podczas wykonywania akcji: await page.getByRole('button', { name: 'Start Game' }).click(); Jeśli akcja jest bardzo szybka (kilka ms) np: await page.getByRole('button', { name: 'Start Game' }).innerText(); To bardzo możliwe, że handler się nie wykona. I testy mogą być podatne na to zachowanie. Więcej się dowiesz analizując nasze zgłoszenie do twórców: 🔗 https://github.com/microsoft/playwright/issues/29701
 

⌛ Ustaw global timeout dla asercji oczekujących na dany stan

 
Przy asercjach, które wykonują funkcję w pętli czekając na zadany stan (polling) mamy możliwość ustawienia globalnego timeout.
 
Jeśli nie wiesz czym są takie asercje - zobacz jak w inny sposób możemy zaczekać na nasz score:
test('should catch a 3 bugs with polling', async ({ page }) => { // Arrange const expectScore = 3; let actualScore = 0; // Act await page.goto('http://localhost:3000/whacker.html'); await page.getByRole('button', { name: 'Start Game' }).click(); // Assert await expect .poll(async () => { await page.getByText('🐛').click(); actualScore = await page.locator('#score').innerText().then(Number); // don't forget to return the value return actualScore; }) .toBe(expectScore); });
 
Tak możemy ustawić ten timeout w playwright.config.ts
expect: { toPass: { timeout: 1000 } },
Dzięki temu nie musimy już dodawać timeout bezpośrednio w expect lub szukać w dokumentacji jaka jest domyślna wartość💪

📑 Dodawanie wielu adnotacji

 
Adnotacje (czyli dodanie takich dodatkowych info do testów i widoczne w raportach np. dla linków do buga).
Wyglądają tak:
notion image
A implementujemy je tak:
test( 'should catch a 3 bugs with one annotation', { annotation: { type: 'issue', description: 'This will be implemented in blog post https://playwright.info', }, }, async () => { expect(true).toBeTruthy(); }, );
 
Teraz można dodawać wiele annotations za jednym razem jako annotation: []
test( 'should catch a 3 bugs with multiple annotations @release_1_42 @game', { annotation: [ { type: 'issue', description: 'This will be implemented in blog post https://playwright.info', }, { type: 'linked-post', description: 'https://playwright.info/co-nowego-w-playwright-1.42', }, { type: 'documentation', description: 'https://playwright.dev/docs/test-annotations#annotate-tests', }, ], }, async () => { expect(true).toBeTruthy(); }, );
Efekt:
notion image
Myślę, że poprosimy o wyłapywanie linków w tekście adnotacji bo obecnie tylko samodzielne linki działają 🤔
 
💡
Więcej o adnotacjach przeczytasz w oficjalnej dokumentacji: 🔗https://playwright.dev/docs/test-annotations#annotate-tests
 

Podsumowanie

 
To nie wszystkie nowości, ale z pewnością te najważniejsze!
Więcej oczywiście znajdziesz w oficjalnych release notes: 🔗 https://playwright.dev/docs/release-notes#version-142
Do zobaczenia w kolejnych zabawach z kodem Playwright!
💡
Jeśli planujesz wprowadzić Playwright do swojego projektu lub chcesz poszerzyć swoje kompetencje z tego frameworka, to zapoznaj się z następującymi materiałami:
  • Mega darmowe materiały na YouTube wprowadzające do Playwright:
Playwright - Twój pierwszy test automatyczny #01 JS/TS (Sekcja 01, Lekcja 01)
🎬 Playlista na YT: https://www.youtube.com/playlist?list=PLfKhn9AcZ-cD2TCB__K7NP5XARaCzZYn7 🙋‍♀️ Kod, polecenia i linki: https://jaktestowac.pl/lesson/pw1s01l01/ 🙋‍♀️ Cały kurs: Praktyczne wprowadzenie do testów automatycznych z Playwright: https://jaktestowac.pl/course/playwright-wprowadzenie/ 🙋‍♀️ Nasze materiały o Playwright: https://jaktestowac.pl/playwright/ 🌐 Testowana strona: https://demo-bank.vercel.app/ Jest to pierwsza lekcja z cyklu nauki automatyzacji testów od podstaw z użyciem Playwright. Język jaki będzie wykorzystywany do budowy kodu testów to TypeScript (TS). Ten tutorial to omówienie nie tylko frameworka Playwright ale także tworzenie rozwiązania do automatyzacji manualnych testów. Dzięki temu tester / QA ma szansę poznać proces automatyzacji testów od zupełnych podstaw. Uzyskane testy automatyczne są bardzo uproszczone abyś łatwo mógł zrozumieć czym jest proces automatyzacji. Poprzez kolejne lekcje usprawniamy kod testów dzięki temu nabierają one szybko formy, którą tester może wdrożyć we własnym projekcie. Rozdziały: 00:00 - Powitanie 00:42 - Instalacja IDE: Visual Studio Code 02:48 - Instalacja środowiska uruchomieniowego NodeJS 06:05 - Strona internetowa do testów 08:11 - Przygotowanie projektu 09:35 - Struktura projektu z Playwright 12:54 - Generowanie kodu testów 16:21 - Opis wygenerowanego kodu 17:25 - Uruchomienie testów 20:02 - Raporty po testach 21:19 - Testy z widoczną przeglądarką 21:59 - Uruchomienie raportu z pliku 22:38 - Asercje w testach 25:05 - Test zakończony niepowodzeniem 28:34 - Podsumowanie i informacje na koniec
Playwright - Twój pierwszy test automatyczny #01 JS/TS (Sekcja 01, Lekcja 01)
 
Pozwolą Ci one poznać wady i zalety tego narzędzia😉 Tym samym, zobaczysz, czy Playwright jest odpowiednim rozwiązaniem dla Ciebie i Twojego projektu🙌