Playwright teszt

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.

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...
  });

});

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.

// 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/);

// 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/);

Példák

React feladatsor megoldva – Társasház letöltés

Kezdolap.jsx

export default function Kezdolap() {

     return (
    <div className="p-8 max-w-4xl mx-auto">
    <h1 className="text-4xl font-bold mb-6 text-blue-800 text-center"> Üdvözöljük a Nemes utcai társasház oldalán!</h1>

      <p className="text-lg mb-6 text-gray-700 text-center leading-relaxed">
        A társasház egy 4 emeletes épület, szintenként 4 lakással.
        Itt követhetők a lakók adatai és havi befizetései.
      </p>

      <div className="flex justify-center">
        <img
          src="https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg"
          alt="Társasház"
          className="rounded-lg shadow-xl max-w-lg border-4 border-blue-100"
        />
      </div>
    </div>
  );
}

export default function Kezdolap() {

return (

<h1 className="text-4xl font-bold mb-6 text-blue-800 text-center"> Üdvözöljük a Nemes utcai társasház oldalán!</h1>

A társasház egy 4 emeletes épület, szintenként 4 lakással.

Itt követhetők a lakók adatai és havi befizetései.

</p>

<img

src="https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg"

alt="Társasház"

className="rounded-lg shadow-xl max-w-lg border-4 border-blue-100"

</div>

);

}

Kezdolap tesztje

import { test, expect } from '@playwright/test';

const BASE_URL = 'http://localhost:5173';

test('A Kezdolap megfelelően betöltődik', async ({ page }) => {
  // Navigáció a helyi fejlesztői szerverre és várakozás, hogy az oldal betöltődjön
  await page.goto(BASE_URL);
  await page.waitForLoadState('networkidle');

  // Cím ellenőrzése: célzottan a „Üdvözöljük...” h1 elem
  const h1 = page.getByRole('heading', { name: /Üdvözöljük/i });
  await expect(h1).toHaveText(/Üdvözöljük a Nemes utcai társasház oldalán!/i);

  // Leírás szövegének ellenőrzése (részlet alapján)
  const description = page.getByText('4 emeletes épület', { exact: false });
  await expect(description).toBeVisible();

  // Kép ellenőrzése (alt szöveg alapján) és src részlet
  const image = page.getByAltText('Társasház');
  await expect(image).toBeVisible();
  await expect(image).toHaveAttribute('src', /pexels-photo-323780/);
});

test('A design elemek (Tailwind class-ok) jelen vannak', async ({ page }) => {
  await page.goto(BASE_URL);
  await page.waitForLoadState('networkidle');

  // Célzottan a „Üdvözöljük...” h1 elem osztályainak ellenőrzése
  const header = page.getByRole('heading', { name: /Üdvözöljük/i });
  await expect(header).toHaveClass(/(^|\s)text-blue-800(\s|$)/);
});

import { test, expect } from '@playwright/test';

const BASE_URL = 'http://localhost:5173';

test('A Kezdolap megfelelően betöltődik', async ({ page }) => {

// Navigáció a helyi fejlesztői szerverre és várakozás, hogy az oldal betöltődjön

await page.goto(BASE_URL);

await page.waitForLoadState('networkidle');

// Cím ellenőrzése: célzottan a „Üdvözöljük...” h1 elem

const h1 = page.getByRole('heading', { name: /Üdvözöljük/i });

await expect(h1).toHaveText(/Üdvözöljük a Nemes utcai társasház oldalán!/i);

// Leírás szövegének ellenőrzése (részlet alapján)

const description = page.getByText('4 emeletes épület', { exact: false });

await expect(description).toBeVisible();

// Kép ellenőrzése (alt szöveg alapján) és src részlet

const image = page.getByAltText('Társasház');

await expect(image).toBeVisible();

await expect(image).toHaveAttribute('src', /pexels-photo-323780/);

});

test('A design elemek (Tailwind class-ok) jelen vannak', async ({ page }) => {

await page.goto(BASE_URL);

await page.waitForLoadState('networkidle');

// Célzottan a „Üdvözöljük...” h1 elem osztályainak ellenőrzése

const header = page.getByRole('heading', { name: /Üdvözöljük/i });

await expect(header).toHaveClass(/(^|\s)text-blue-800(\s|$)/);

});