@uxf/e2e-playwright

Playwright helper classes a factory funkce pro testování UXF komponent.

npm install @uxf/e2e-playwright

Použití

Všechny helpery se vytváří přes createUi(page), které vrací objekt se všemi factory funkcemi:

import { createUi } from "@uxf/e2e-playwright";

test("example", async ({ page }) => {
  const ui = createUi(page);

  await ui.textInput({ $name: "username" }).change("john");
  await ui.button({ text: "Uložit" }).click();
  await ui.flashMessages().shouldExistMessage("Uloženo");
});

Přehled helperů

UI helpery

Helper	Popis
`button`	Kliknutí na tlačítko
`flashMessages`	Ověření flash zpráv
`h1`	Ověření nadpisu stránky

Formulářové helpery

Helper	Typ hodnoty	Popis
`checkboxInput`	`boolean`	Checkbox
`combobox`	`string`	Vyhledávací combobox
`datePickerInput`	`Date`	Výběr data
`datetimePickerInput`	`Date`	Výběr data a času
`dropzone`	`string[]`	Upload souborů
`multiCombobox`	`string[]`	Vícenásobný vyhledávací combobox
`multiSelect`	`string[]`	Vícenásobný dropdown select
`radioGroup`	`string`	Radio skupina
`select`	`string`	Dropdown select
`textarea`	`string`	Víceřádkový textový vstup
`textInput`	`string`	Textový vstup
`timePickerInput`	`${number}:${number}`	Výběr času
`toggle`	`boolean`	Toggle/switch

Data Grid helpery

Helper	Popis
`dataGridTable`	Interakce s data grid tabulkou

UI helpery

UI helpery slouží pro interakci s obecnými prvky stránky (tlačítka, nadpisy, flash zprávy).

`button`

Klikne na tlačítko podle textu.

ui.button({ text: "Uložit" }).click();
ui.button({ text: "Smazat", nth: 1 }).click(); // druhé tlačítko se stejným textem

Finder	Typ	Popis
`text`	`string`	Text tlačítka
`nth?`	`number`	Index při více tlačítkách se stejným textem (výchozí: `0`)
`parent?`	`Locator`	Volitelný rodičovský locator

Metoda	Parametr	Popis
`click()`	—	Klikne na tlačítko
`shouldExist()`	—	Ověří, že tlačítko je viditelné
`shouldNotExist()`	—	Ověří, že tlačítko není viditelné

`flashMessages`

Ověří přítomnost flash zprávy na stránce.

ui.flashMessages().shouldExistMessage("Záznam byl úspěšně uložen");

Metoda	Parametr	Popis
`shouldExistMessage(text)`	`string`	Ověří, že se zobrazila flash zpráva s daným textem
`shouldExist()`	—	Ověří, že je kontejner flash zpráv viditelný
`shouldNotExist()`	—	Ověří, že kontejner flash zpráv není viditelný

`h1`

Ověří text nadpisu <h1> na stránce. Porovnání je přesná shoda (case-insensitive).

ui.h1().shouldHaveText("Přehled uživatelů");

Metoda	Parametr	Popis
`shouldHaveText(text)`	`string`	Ověří, že `<h1>` přesně odpovídá danému textu (case-insensitive)
`shouldExist()`	—	Ověří, že `<h1>` je viditelný
`shouldNotExist()`	—	Ověří, že `<h1>` není viditelný

Formulářové helpery

Formulářové helpery jsou komponentám lokalizovány přes data-component a data-name atributy. Všechny vyžadují finder s polem $name (hodnota atributu data-name).

Všechny formulářové helpery dědí z FormComponentModel a mají:

change(value) — nastaví hodnotu komponenty
shouldExist() — ověří, že komponenta je viditelná
shouldNotExist() — ověří, že komponenta není viditelná
shouldBeInvalid() — ověří, že komponenta má třídu IS_INVALID

`checkboxInput`

Ovládá checkbox — přepne stav pokud neodpovídá požadované hodnotě.

ui.checkboxInput({ $name: "agree" }).change(true);

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`boolean`	Nastaví checkbox na požadovaný stav

`combobox`

Vyplní vyhledávací vstup a vybere první odpovídající položku z dropdownu.

ui.combobox({ $name: "city" }).change("Praha");

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`string`	Vyplní vstup a vybere odpovídající položku

`datePickerInput`

Vyplní vstup pro výběr data. Hodnota se formátuje jako DD.MM.YYYY.

ui.datePickerInput({ $name: "birthDate" }).change(new Date("1990-05-15"));

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`Date`	Vyplní vstup datem ve formátu `DD.MM.YYYY`

`datetimePickerInput`

Vyplní vstup pro výběr data a času. Hodnota se formátuje jako DD.MM.YYYY HH:mm:ss.

ui.datetimePickerInput({ $name: "scheduledAt" }).change(new Date("2025-01-15T14:30:00"));

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`Date`	Vyplní vstup datem a časem ve formátu `DD.MM.YYYY HH:mm:ss`

`dropzone`

Nahraje soubory do dropzone komponenty a počká na potvrzení úspěšného nahrání (data-state="OK").

ui.dropzone({ $name: "avatar" }).change(["path/to/image.png"]);

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`string[]`	Nastaví soubory na file input a ověří úspěšné nahrání

`multiCombobox`

Vyplní vyhledávací vstup a vybere více položek z dropdownu.

ui.multiCombobox({ $name: "skills" }).change(["JavaScript", "CSS"]);

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`string[]`	Pro každou hodnotu vyplní vstup a vybere odpovídající položku

`multiSelect`

Otevře dropdown a vybere více možností podle textu.

ui.multiSelect({ $name: "tags" }).change(["React", "TypeScript"]);

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`string[]`	Vybere všechny zadané možnosti

`radioGroup`

Vybere radio button s odpovídajícím textem.

ui.radioGroup({ $name: "gender" }).change("Muž");

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`string`	Klikne na radio option s odpovídajícím textem

`select`

Otevře dropdown a vybere možnost podle textu.

ui.select({ $name: "country" }).change("Česká republika");

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`string`	Vybere možnost s odpovídajícím textem

`textarea`

Vyplní textarea.

ui.textarea({ $name: "description" }).change("Popis...");

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`string`	Vyplní textarea hodnotou

`textInput`

Vyplní textový vstup.

ui.textInput({ $name: "email" }).change("test@example.com");

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`string`	Vyplní vstup hodnotou
`getValue()`	—	Vrátí aktuální hodnotu vstupu

`timePickerInput`

Vyplní vstup pro výběr času. Hodnota musí být ve formátu HH:MM.

ui.timePickerInput({ $name: "startTime" }).change("09:30");

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`${number}:${number}`	Vyplní vstup časem ve formátu `HH:MM`

`toggle`

Ovládá toggle/switch — přepne stav pokud neodpovídá požadované hodnotě.

ui.toggle({ $name: "notifications" }).change(true);

Finder	Typ	Popis
`$name`	`string`	Hodnota atributu `data-name`

Metoda	Parametr	Popis
`change(value)`	`boolean`	Nastaví toggle na požadovaný stav

Data Grid helpery

`dataGridTable`

Interaguje s data grid tabulkou — zjišťuje počet řádků a ověřuje obsah buněk.

const table = ui.dataGridTable({});

await table.getRowCount(); // vrátí počet řádků
await table.shouldHaveCellValue({ column: "Jméno", content: "Jan Novák" });
await table.shouldHaveCellValue({ column: "Jméno", content: "Jana Nováková", row: 1 });

Finder	Typ	Popis
`nth?`	`number`	Index při více tabulkách na stránce (výchozí: `0`)
`parent?`	`Locator`	Volitelný rodičovský locator

Metoda	Parametr	Popis
`getRowCount()`	—	Vrátí počet řádků v těle tabulky
`shouldHaveCellValue(data)`	viz níže	Ověří hodnotu buňky
`shouldExist()`	—	Ověří, že tabulka je viditelná
`shouldNotExist()`	—	Ověří, že tabulka není viditelná

Parametry shouldHaveCellValue:

Pole	Typ	Popis
`content`	`string`	Očekávaný text buňky
`column`	`number \| string`	Index sloupce nebo text záhlaví
`row?`	`number`	Index řádku (výchozí: `0`)

Poznámka: Při použití číselného indexu sloupce se počítají i sloupce s checkboxem a akcemi.