Playwright 1.64 újdonságok

A Playwright 1.64-es verziója számos olyan új funkciót és finomítást hozott, amelyek megkönnyítik az elemkeresést, a tesztek futtatását, valamint a videófelvételek testreszabását.

1. Új Locator API: locator.within()

A locator.within() segítségével két már létező locatort lehet természetes módon kombinálni, és a relatív pozicionálók (pl. .first(), .nth()) a szülő elemen belül értékelődnek ki.

TypeScript

// Összekapcsol két külön definíciót
const dialog = page.getByRole('dialog');
const saveButton = page.getByRole('button', { name: 'Mentés' });

// Mentés gomb keresése kifejezetten a párbeszédablakon belül
await saveButton.within(dialog).click();

// Összekapcsol két külön definíciót
const dialog = page.getByRole('dialog');
const saveButton = page.getByRole('button', { name: 'Mentés' });

// Mentés gomb keresése kifejezetten a párbeszédablakon belül
await saveButton.within(dialog).click();

2. Véletlenszerű tesztfuttatás: --shuffle

Segít kiszűrni a tesztek közötti rejtett függőségeket a futtatási sorrend megkeverésével. A tesztfutás végén megadott seed kód segítségével pontosan reprodukálható a hibás futási sorrend.

Bash

# Tesztek véletlenszerű sorrendben történő futtatása
npx playwright test --shuffle

# Pontos futási sorrend újrajátszása a kapott seed alapján
npx playwright test --shuffle 271828182

# Tesztek véletlenszerű sorrendben történő futtatása
npx playwright test --shuffle

# Pontos futási sorrend újrajátszása a kapott seed alapján
npx playwright test --shuffle 271828182

3. Tesztzárolások (Test Locks) csoportszinten

Míg a 1.63-ban megjelent zárolások csak egyes tesztekre vonatkoztak, a 1.64-ben már egész fájlokra vagy tesztcsoportokra (describe) is alkalmazhatóak. Az azonos zárolási névvel rendelkező tesztek nem futnak párhuzamosan.

TypeScript

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

// Az ebben a csoportban lévő tesztek nem futnak párhuzamosan más 'user-settings' zárral ellátott tesztekkel
test.describe.configure({ lock: 'user-settings' });

test('profil frissítése', async ({ page }) => {
  // ...
});

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

// Az ebben a csoportban lévő tesztek nem futnak párhuzamosan más 'user-settings' zárral ellátott tesztekkel
test.describe.configure({ lock: 'user-settings' });

test('profil frissítése', async ({ page }) => {
  // ...
});

4. default: false beállítás a projekt konfigurációban

A playwright.config.ts-ben megjelölhetők olyan böngészők vagy projektek, amelyeket alapértelmezetten ki szeretnél hagyni a sima npx playwright test futtatásból anélkül, meglévő konfigurációkat kellene törölni.

TypeScript

// playwright.config.ts
export default {
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] }, default: false },
    { name: 'webkit', use: { ...devices['Desktop Safari'] }, default: false },
  ],
};

// playwright.config.ts
export default {
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] }, default: false },
    { name: 'webkit', use: { ...devices['Desktop Safari'] }, default: false },
  ],
};

• Futtatás csak chromium-on: npx playwright test
• Kifejezett futtatás firefox-on: npx playwright test --project=firefox

5. Videófelvételek fejlesztése (VP9, CSS stílusok, FPS)

A videók rögzítése hatékonyabbá és jobban testreszabhatóvá vált:

• VP9 kódolás: Kisebb fájlméret és alacsonyabb CPU-használat.
• Egyedi képkockasebesség (FPS): Testreszabható fps opció.
• CSS stílusok a műveletjelzőkhöz: A korábbi fontSize opció helyett CSS szabályok adhatók meg a mutatók és kiemelések testreszabására.

TypeScript

// playwright.config.ts
export default {
  use: {
    video: {
      mode: 'on',
      fps: 60,
      style: {
        pointMarker: 'background-color: red;',
        targetHighlight: 'border: 2px solid blue;',
      },
    },
  },
};

// playwright.config.ts
export default {
  use: {
    video: {
      mode: 'on',
      fps: 60,
      style: {
        pointMarker: 'background-color: red;',
        targetHighlight: 'border: 2px solid blue;',
      },
    },
  },
};

6. Kísérleti WebMCP támogatás (page.webmcp)

A Playwright kiegészült a böngésző alapú AI modellek eszközeinek (WebMCP) tesztelésére szolgáló felülettel (page.webmcp.tools() és page.webmcp.callTool()), amellyel ellenőrizhetők az oldalak által az AI-ágensek felé regisztrált eszközök.

Fontosabb breaking change-ek / Viselkedésbeli változások

• Rejtett iframe-ek: A nem látható iframe-ben lévő elemeket (pl. visibility: hidden) a Playwright mostantól automatikusan rejtettként kezeli az akciók és a toBeVisible() ellenőrzések során.
• Emulált képernyőméret: A devices['Desktop Chrome'] típusú eszközleírók átadják a screen tulajdonságot, így a window.screen felbontása és a media query-k az emulált kijelzőméretet tükrözik.
• Snapshot frissítés: A --update-snapshots=missing opció használata esetén a hiányzó screenshotok létrehozása után a teszt sikeresként értékelődik.