@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