A Playwright segítségével futtathat egyetlen tesztet, egy tesztcsomagot vagy az összes tesztet. A tesztek futtathatók egy böngészőben vagy a –project kapcsolóval több böngészőben is.
Telepítés
A teszteléshez fel kell telepíteni a Playwright-ot: npm init playwright@latest
Csak a csomag telepítése meglévő projekthez: npm install -D @playwright/test majd npx playwright install
Az npx letölti a legfrissebb telepítőt, és néhány beállítást el kell végezni:
- JavaScriptet vagy TypeScriptet szeretnél?
- Hol legyenek a tesztek? (alapértelmezetten: tests mappa)
- Szeretnél-e GitHub Actions munkafolyamatot?
- Végül letölti a böngészőket is (ez több száz MB is lehet). A saját mappájában található böngészőket használja!
Kezdetben érdemes a npx playwright codegen parancsot kipróbálni, ami legenerálja az éppen megfigyelt elemhez az elérési lehetőséget. ( npx playwright codegen http://weboldal )
Alapvető Parancsok (CLI)
npx playwright test: Összes teszt futtatása (alapértelmezetten headless, azaz háttérben).
npx playwright test –ui: Interaktív UI mód megnyitása (idővonal, hálózati forgalom, debug).
npx playwright test –headed: Látható böngészőablakban futtatja a teszteket.
npx playwright codegen : Kódgenerátor megnyitása (rögzíti, amit kattintasz).
npx playwright show-report: Az utolsó futtatás HTML riportjának megnyitása.
npx playwright test sajat.spec.js Megadott nevű teszt futtatása (lehet ts és js fájl is)
Alap Szintaxis (Teszt felépítése)
A tesztfájlok általában .spec.js vagy .test.js kiterjesztésűek.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { test, expect } from '@playwright/test'; // Csoportosítás test.describe('Funkció neve', () => { // Egy konkrét teszteset test('Teszt leírása', async ({ page }) => { await page.goto('/eleresi-ut'); // Navigáció // Interakciók és ellenőrzések helye... }); }); |
Lokátorok (Elemek kiválasztása)
A Playwright a felhasználói szemmel látható elemeket részesíti előnyben (Locators). A lokátor egy olyan objektum, amely bármikor képes megtalálni egy elemet az oldalon. A Seleniummal ellentétben a lokátor nem egy statikus elem, hanem egy „útmutató”: ha az elem eltűnik, majd újra megjelenik (pl. egy React frissítés miatt), a Playwright automatikusan újra megkeresi. Dokumentáció.
- page.getByRole() – elem keresése explicit és implicit akadálymentességi attribútumok alapján.
- page.getByText() – elem keresése szöveges tartalom alapján.
- page.getByLabel() – űrlapvezérlő elem keresése a hozzá tartozó címke szövege alapján.
- page.getByPlaceholder() – beviteli mező keresése a helyőrző szöveg alapján.
- page.getByAltText() – elem (általában kép) keresése a szöveges alternatívája alapján.
- page.getByTitle() az elem címattribútuma alapján történő megkereséséhez.
- page.getByTestId() az elem data-testid attribútuma alapján történő megkereséséhez (más attribútumok is konfigurálhatók).
Akciók (Interakciók)
Minden akció async, tehát await kell eléjük!
- Kattintás:
await page.getByRole('button').click(); - Gépelés:
await page.locator('input').fill('Szöveg'); - Checkbox bepipálás:
await page.getByLabel('Feltételek').check(); - Várakozás (ritkán kell):
await page.waitForTimeout(1000);(Kerülendő, az auto-wait jobb!)
Assertions (Ellenőrzések)
Az expect függvényt használjuk az eredmények validálására. A legtöbb async, így kell eléjük az await.
|
1 2 3 4 5 6 7 8 9 10 11 |
// Láthatóság await expect(page.locator('h1')).toBeVisible(); // Szövegtartalom await expect(page.locator('.status')).toContainText('Kész'); // Attribútum ellenőrzése await expect(page.getByRole('button')).toBeDisabled(); // URL ellenőrzése await expect(page).toHaveURL(/dashboard/); |