@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("[email protected]");

| 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.