Powrót do: Praktyczne wprowadzenie do testów automatycznych z Playwright
Nowe podejście – tagi w Playwright
Prezentacja
Dodatkowe materiały
Cały kod potrzeby do realizacji tematów z tej lekcji znajdziesz też w naszym repozytorium: playwright_automatyzacja_wprowadzenie.
A dokładniej bazujemy na projekcie, który znajdziesz w katalogu S04 / L02_tagi.
Obecnie twórcy Playwright zalecają dodawać tagi za pomocą specjalnej konfiguracji (TestDetails).
Jest to specjalny obiekt, który zawiera tag lub listę tagów, która zostanie przypisana do testu.
Dlaczego ten sposób jest lepszy od dodawania tagów do nazw testów?
Sposób z konfiguracją nie wydłuża dodatkowo nazwy testów, która jest prezentowana w raportach.
Jeden tag
Wcześniejsza forma:
test('quick payment with correct data @integration @pulpit', async ({ page }) => {
Nowsza wersja:
test('unsuccessful login with too short username', { tag: '@login' }, async ({ page }) => {
Wiele tagów
Wcześniejsza forma:
test('quick payment with correct data @integration @pulpit', async ({ page }) => {
Nowsza wersja:
test('quick payment with correct data', { tag: ['@integration', '@pulpit'] }, async ({ page }) => {
Sposób uruchamiania testów
Uruchamianie testów z nowymi tagami jest kompatybilne ze wcześniejszym sposobem. Aby uruchomić testy, które są oznaczone tagiem @login wystarczy, że wykonamy polecenie:
npx playwright test --grep "@login"
Linki
- Oficjalna dokuemntacja o działaniu polecenia grep w Playwright
- Lekcja o formatowaniu kodu w VS Code za pomocą prettiera – Prettier, czyli formatter kodu
Hej! Czy trzeba jakoś zrobić update ESlint do używania tagów w nowszej wersji?
Ciągle hintuje mi te tagi jako błąd składni -> nie pasuje mu przecinek, choć testy działają dobrze.
Jaki dokładnie błąd otrzymujesz i z jakich wersji (ESLinst, VSCode, Playwright) korzystasz? 🙂
“@eslint/js”: “^9.10.0”,
“@playwright/test”: “^1.49.1”,
“eslint”: “^9.10.0”,
“eslint-config-prettier”: “^9.1.0”,
“eslint-plugin-playwright”: “^1.5.3”,
“eslint-plugin-prettier”: “^5.1.3”,
“prettier”: “^3.4.2”,
“typescript-eslint”: “^8.5.0”
VSC Version: 1.96.2
Node.js: 20.18.1
Korzystam jeszcze z Cursora v. 0.44.9 bazującego na wersji VSC 1.93.1
A błąd to zwykł syntax error..
SyntaxError: tests\api\article.delete.api.spec.ts: Unexpected token (57:12)
test(
‘should not delete an article with non logged-in user’,
{ tag: ‘@GAD-R09-05’ },
async ({ request }) => {
Byłem w stanie zreprodukować problem 😉
Ważny punkt – korzystasz z ustawień z lekcji o ESlint https://jaktestowac.pl/lesson/pw2s01l04-2-1/ 😉
Tag jest polem, które moze przyjąć typy
tag?: string | string[] | undefined.Wiec składniowo jest poprawnie i całość działa poprawnie, natomiast prawdopodobnie ESlint ma jakiś problem aby poprawnie zinterpretować ten kod.
Spróbuj przeładować / zrestartowac VS Code i zobacz czy problem nadal występuje (u mnie restart VS Code pomógł i błąd zniknął)
PS. Inne szybkie rozwiązanie – zrobic jednoelementowa listę tagów, czyli:
{ tag: [‘@GAD-R09-05’] },Wiesz co, restart prettier I eslint pomaga, ale… Jednorazowo 😅
Po dopisaniu kolejnych tagów w innych miejscach musiałem każdorazowo zrobić restart, żeby eslint/prettier to łyknęły.
Sprawdzę Twoją propozycje z typem dla tagu j zerkne ponownie na tamtą lekcję!
Ten jeden minus nic nie znaczy przy braku oznaczeń tagów w tytułach testów 🙂
Przy braku tagów nie ma o czym mówić 😀