@uxf/e2e-playwright 11.125.0 → 11.127.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +117 -116
  2. package/package.json +5 -5
  3. package/ui/combobox.js +4 -1
package/README.md CHANGED
@@ -14,11 +14,11 @@ Všechny helpery se vytváří přes `createUi(page)`, které vrací objekt se v
14
14
  import { createUi } from "@uxf/e2e-playwright";
15
15
 
16
16
  test("example", async ({ page }) => {
17
- const ui = createUi(page);
17
+ const ui = createUi(page);
18
18
 
19
- await ui.textInput({ $name: "username" }).change("john");
20
- await ui.button({ text: "Uložit" }).click();
21
- await ui.flashMessages().shouldExistMessage("Uloženo");
19
+ await ui.textInput({ $name: "username" }).change("john");
20
+ await ui.button({ text: "Uložit" }).click();
21
+ await ui.flashMessages().shouldExistMessage("Uloženo");
22
22
  });
23
23
  ```
24
24
 
@@ -28,34 +28,34 @@ test("example", async ({ page }) => {
28
28
 
29
29
  ### UI helpery
30
30
 
31
- | Helper | Popis |
32
- |--------|-------|
33
- | [`button`](#button) | Kliknutí na tlačítko |
34
- | [`flashMessages`](#flashmessages) | Ověření flash zpráv |
35
- | [`h1`](#h1) | Ověření nadpisu stránky |
31
+ | Helper | Popis |
32
+ | --------------------------------- | ----------------------- |
33
+ | [`button`](#button) | Kliknutí na tlačítko |
34
+ | [`flashMessages`](#flashmessages) | Ověření flash zpráv |
35
+ | [`h1`](#h1) | Ověření nadpisu stránky |
36
36
 
37
37
  ### Formulářové helpery
38
38
 
39
- | Helper | Typ hodnoty | Popis |
40
- |--------|-------------|-------|
41
- | [`checkboxInput`](#checkboxinput) | `boolean` | Checkbox |
42
- | [`combobox`](#combobox) | `string` | Vyhledávací combobox |
43
- | [`datePickerInput`](#datepickerinput) | `Date` | Výběr data |
44
- | [`datetimePickerInput`](#datetimepickerinput) | `Date` | Výběr data a času |
45
- | [`dropzone`](#dropzone) | `string[]` | Upload souborů |
46
- | [`multiCombobox`](#multicombobox) | `string[]` | Vícenásobný vyhledávací combobox |
47
- | [`multiSelect`](#multiselect) | `string[]` | Vícenásobný dropdown select |
48
- | [`radioGroup`](#radiogroup) | `string` | Radio skupina |
49
- | [`select`](#select) | `string` | Dropdown select |
50
- | [`textarea`](#textarea) | `string` | Víceřádkový textový vstup |
51
- | [`textInput`](#textinput) | `string` | Textový vstup |
52
- | [`timePickerInput`](#timepickerinput) | `` `${number}:${number}` `` | Výběr času |
53
- | [`toggle`](#toggle) | `boolean` | Toggle/switch |
39
+ | Helper | Typ hodnoty | Popis |
40
+ | --------------------------------------------- | --------------------------- | -------------------------------- |
41
+ | [`checkboxInput`](#checkboxinput) | `boolean` | Checkbox |
42
+ | [`combobox`](#combobox) | `string` | Vyhledávací combobox |
43
+ | [`datePickerInput`](#datepickerinput) | `Date` | Výběr data |
44
+ | [`datetimePickerInput`](#datetimepickerinput) | `Date` | Výběr data a času |
45
+ | [`dropzone`](#dropzone) | `string[]` | Upload souborů |
46
+ | [`multiCombobox`](#multicombobox) | `string[]` | Vícenásobný vyhledávací combobox |
47
+ | [`multiSelect`](#multiselect) | `string[]` | Vícenásobný dropdown select |
48
+ | [`radioGroup`](#radiogroup) | `string` | Radio skupina |
49
+ | [`select`](#select) | `string` | Dropdown select |
50
+ | [`textarea`](#textarea) | `string` | Víceřádkový textový vstup |
51
+ | [`textInput`](#textinput) | `string` | Textový vstup |
52
+ | [`timePickerInput`](#timepickerinput) | `` `${number}:${number}` `` | Výběr času |
53
+ | [`toggle`](#toggle) | `boolean` | Toggle/switch |
54
54
 
55
55
  ### Data Grid helpery
56
56
 
57
- | Helper | Popis |
58
- |--------|-------|
57
+ | Helper | Popis |
58
+ | --------------------------------- | ------------------------------ |
59
59
  | [`dataGridTable`](#datagridtable) | Interakce s data grid tabulkou |
60
60
 
61
61
  ---
@@ -75,17 +75,17 @@ ui.button({ text: "Uložit" }).click();
75
75
  ui.button({ text: "Smazat", nth: 1 }).click(); // druhé tlačítko se stejným textem
76
76
  ```
77
77
 
78
- | Finder | Typ | Popis |
79
- |--------|-----|-------|
80
- | `text` | `string` | Text tlačítka |
81
- | `nth?` | `number` | Index při více tlačítkách se stejným textem (výchozí: `0`) |
82
- | `parent?` | `Locator` | Volitelný rodičovský locator |
78
+ | Finder | Typ | Popis |
79
+ | --------- | --------- | ---------------------------------------------------------- |
80
+ | `text` | `string` | Text tlačítka |
81
+ | `nth?` | `number` | Index při více tlačítkách se stejným textem (výchozí: `0`) |
82
+ | `parent?` | `Locator` | Volitelný rodičovský locator |
83
83
 
84
- | Metoda | Parametr | Popis |
85
- |--------|----------|-------|
86
- | `click()` | — | Klikne na tlačítko |
87
- | `shouldExist()` | — | Ověří, že tlačítko je viditelné |
88
- | `shouldNotExist()` | — | Ověří, že tlačítko není viditelné |
84
+ | Metoda | Parametr | Popis |
85
+ | ------------------ | -------- | --------------------------------- |
86
+ | `click()` | — | Klikne na tlačítko |
87
+ | `shouldExist()` | — | Ověří, že tlačítko je viditelné |
88
+ | `shouldNotExist()` | — | Ověří, že tlačítko není viditelné |
89
89
 
90
90
  ---
91
91
 
@@ -97,11 +97,11 @@ Ověří přítomnost flash zprávy na stránce.
97
97
  ui.flashMessages().shouldExistMessage("Záznam byl úspěšně uložen");
98
98
  ```
99
99
 
100
- | Metoda | Parametr | Popis |
101
- |--------|----------|-------|
100
+ | Metoda | Parametr | Popis |
101
+ | -------------------------- | -------- | -------------------------------------------------- |
102
102
  | `shouldExistMessage(text)` | `string` | Ověří, že se zobrazila flash zpráva s daným textem |
103
- | `shouldExist()` | — | Ověří, že je kontejner flash zpráv viditelný |
104
- | `shouldNotExist()` | — | Ověří, že kontejner flash zpráv není viditelný |
103
+ | `shouldExist()` | — | Ověří, že je kontejner flash zpráv viditelný |
104
+ | `shouldNotExist()` | — | Ověří, že kontejner flash zpráv není viditelný |
105
105
 
106
106
  ---
107
107
 
@@ -113,11 +113,11 @@ Ověří text nadpisu `<h1>` na stránce. Porovnání je přesná shoda (case-in
113
113
  ui.h1().shouldHaveText("Přehled uživatelů");
114
114
  ```
115
115
 
116
- | Metoda | Parametr | Popis |
117
- |--------|----------|-------|
116
+ | Metoda | Parametr | Popis |
117
+ | ---------------------- | -------- | ---------------------------------------------------------------- |
118
118
  | `shouldHaveText(text)` | `string` | Ověří, že `<h1>` přesně odpovídá danému textu (case-insensitive) |
119
- | `shouldExist()` | — | Ověří, že `<h1>` je viditelný |
120
- | `shouldNotExist()` | — | Ověří, že `<h1>` není viditelný |
119
+ | `shouldExist()` | — | Ověří, že `<h1>` je viditelný |
120
+ | `shouldNotExist()` | — | Ověří, že `<h1>` není viditelný |
121
121
 
122
122
  ---
123
123
 
@@ -126,6 +126,7 @@ ui.h1().shouldHaveText("Přehled uživatelů");
126
126
  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`).
127
127
 
128
128
  Všechny formulářové helpery dědí z `FormComponentModel` a mají:
129
+
129
130
  - `change(value)` — nastaví hodnotu komponenty
130
131
  - `shouldExist()` — ověří, že komponenta je viditelná
131
132
  - `shouldNotExist()` — ověří, že komponenta není viditelná
@@ -141,12 +142,12 @@ Ovládá checkbox — přepne stav pokud neodpovídá požadované hodnotě.
141
142
  ui.checkboxInput({ $name: "agree" }).change(true);
142
143
  ```
143
144
 
144
- | Finder | Typ | Popis |
145
- |--------|-----|-------|
145
+ | Finder | Typ | Popis |
146
+ | ------- | -------- | ---------------------------- |
146
147
  | `$name` | `string` | Hodnota atributu `data-name` |
147
148
 
148
- | Metoda | Parametr | Popis |
149
- |--------|----------|-------|
149
+ | Metoda | Parametr | Popis |
150
+ | --------------- | --------- | ----------------------------------- |
150
151
  | `change(value)` | `boolean` | Nastaví checkbox na požadovaný stav |
151
152
 
152
153
  ---
@@ -159,12 +160,12 @@ Vyplní vyhledávací vstup a vybere první odpovídající položku z dropdownu
159
160
  ui.combobox({ $name: "city" }).change("Praha");
160
161
  ```
161
162
 
162
- | Finder | Typ | Popis |
163
- |--------|-----|-------|
163
+ | Finder | Typ | Popis |
164
+ | ------- | -------- | ---------------------------- |
164
165
  | `$name` | `string` | Hodnota atributu `data-name` |
165
166
 
166
- | Metoda | Parametr | Popis |
167
- |--------|----------|-------|
167
+ | Metoda | Parametr | Popis |
168
+ | --------------- | -------- | ------------------------------------------ |
168
169
  | `change(value)` | `string` | Vyplní vstup a vybere odpovídající položku |
169
170
 
170
171
  ---
@@ -177,13 +178,13 @@ Vyplní vstup pro výběr data. Hodnota se formátuje jako `DD.MM.YYYY`.
177
178
  ui.datePickerInput({ $name: "birthDate" }).change(new Date("1990-05-15"));
178
179
  ```
179
180
 
180
- | Finder | Typ | Popis |
181
- |--------|-----|-------|
181
+ | Finder | Typ | Popis |
182
+ | ------- | -------- | ---------------------------- |
182
183
  | `$name` | `string` | Hodnota atributu `data-name` |
183
184
 
184
- | Metoda | Parametr | Popis |
185
- |--------|----------|-------|
186
- | `change(value)` | `Date` | Vyplní vstup datem ve formátu `DD.MM.YYYY` |
185
+ | Metoda | Parametr | Popis |
186
+ | --------------- | -------- | ------------------------------------------ |
187
+ | `change(value)` | `Date` | Vyplní vstup datem ve formátu `DD.MM.YYYY` |
187
188
 
188
189
  ---
189
190
 
@@ -195,13 +196,13 @@ Vyplní vstup pro výběr data a času. Hodnota se formátuje jako `DD.MM.YYYY H
195
196
  ui.datetimePickerInput({ $name: "scheduledAt" }).change(new Date("2025-01-15T14:30:00"));
196
197
  ```
197
198
 
198
- | Finder | Typ | Popis |
199
- |--------|-----|-------|
199
+ | Finder | Typ | Popis |
200
+ | ------- | -------- | ---------------------------- |
200
201
  | `$name` | `string` | Hodnota atributu `data-name` |
201
202
 
202
- | Metoda | Parametr | Popis |
203
- |--------|----------|-------|
204
- | `change(value)` | `Date` | Vyplní vstup datem a časem ve formátu `DD.MM.YYYY HH:mm:ss` |
203
+ | Metoda | Parametr | Popis |
204
+ | --------------- | -------- | ----------------------------------------------------------- |
205
+ | `change(value)` | `Date` | Vyplní vstup datem a časem ve formátu `DD.MM.YYYY HH:mm:ss` |
205
206
 
206
207
  ---
207
208
 
@@ -213,12 +214,12 @@ Nahraje soubory do dropzone komponenty a počká na potvrzení úspěšného nah
213
214
  ui.dropzone({ $name: "avatar" }).change(["path/to/image.png"]);
214
215
  ```
215
216
 
216
- | Finder | Typ | Popis |
217
- |--------|-----|-------|
217
+ | Finder | Typ | Popis |
218
+ | ------- | -------- | ---------------------------- |
218
219
  | `$name` | `string` | Hodnota atributu `data-name` |
219
220
 
220
- | Metoda | Parametr | Popis |
221
- |--------|----------|-------|
221
+ | Metoda | Parametr | Popis |
222
+ | --------------- | ---------- | ----------------------------------------------------- |
222
223
  | `change(value)` | `string[]` | Nastaví soubory na file input a ověří úspěšné nahrání |
223
224
 
224
225
  ---
@@ -231,12 +232,12 @@ Vyplní vyhledávací vstup a vybere více položek z dropdownu.
231
232
  ui.multiCombobox({ $name: "skills" }).change(["JavaScript", "CSS"]);
232
233
  ```
233
234
 
234
- | Finder | Typ | Popis |
235
- |--------|-----|-------|
235
+ | Finder | Typ | Popis |
236
+ | ------- | -------- | ---------------------------- |
236
237
  | `$name` | `string` | Hodnota atributu `data-name` |
237
238
 
238
- | Metoda | Parametr | Popis |
239
- |--------|----------|-------|
239
+ | Metoda | Parametr | Popis |
240
+ | --------------- | ---------- | ------------------------------------------------------------- |
240
241
  | `change(value)` | `string[]` | Pro každou hodnotu vyplní vstup a vybere odpovídající položku |
241
242
 
242
243
  ---
@@ -249,12 +250,12 @@ Otevře dropdown a vybere více možností podle textu.
249
250
  ui.multiSelect({ $name: "tags" }).change(["React", "TypeScript"]);
250
251
  ```
251
252
 
252
- | Finder | Typ | Popis |
253
- |--------|-----|-------|
253
+ | Finder | Typ | Popis |
254
+ | ------- | -------- | ---------------------------- |
254
255
  | `$name` | `string` | Hodnota atributu `data-name` |
255
256
 
256
- | Metoda | Parametr | Popis |
257
- |--------|----------|-------|
257
+ | Metoda | Parametr | Popis |
258
+ | --------------- | ---------- | ------------------------------ |
258
259
  | `change(value)` | `string[]` | Vybere všechny zadané možnosti |
259
260
 
260
261
  ---
@@ -267,12 +268,12 @@ Vybere radio button s odpovídajícím textem.
267
268
  ui.radioGroup({ $name: "gender" }).change("Muž");
268
269
  ```
269
270
 
270
- | Finder | Typ | Popis |
271
- |--------|-----|-------|
271
+ | Finder | Typ | Popis |
272
+ | ------- | -------- | ---------------------------- |
272
273
  | `$name` | `string` | Hodnota atributu `data-name` |
273
274
 
274
- | Metoda | Parametr | Popis |
275
- |--------|----------|-------|
275
+ | Metoda | Parametr | Popis |
276
+ | --------------- | -------- | --------------------------------------------- |
276
277
  | `change(value)` | `string` | Klikne na radio option s odpovídajícím textem |
277
278
 
278
279
  ---
@@ -285,12 +286,12 @@ Otevře dropdown a vybere možnost podle textu.
285
286
  ui.select({ $name: "country" }).change("Česká republika");
286
287
  ```
287
288
 
288
- | Finder | Typ | Popis |
289
- |--------|-----|-------|
289
+ | Finder | Typ | Popis |
290
+ | ------- | -------- | ---------------------------- |
290
291
  | `$name` | `string` | Hodnota atributu `data-name` |
291
292
 
292
- | Metoda | Parametr | Popis |
293
- |--------|----------|-------|
293
+ | Metoda | Parametr | Popis |
294
+ | --------------- | -------- | ------------------------------------- |
294
295
  | `change(value)` | `string` | Vybere možnost s odpovídajícím textem |
295
296
 
296
297
  ---
@@ -303,12 +304,12 @@ Vyplní textarea.
303
304
  ui.textarea({ $name: "description" }).change("Popis...");
304
305
  ```
305
306
 
306
- | Finder | Typ | Popis |
307
- |--------|-----|-------|
307
+ | Finder | Typ | Popis |
308
+ | ------- | -------- | ---------------------------- |
308
309
  | `$name` | `string` | Hodnota atributu `data-name` |
309
310
 
310
- | Metoda | Parametr | Popis |
311
- |--------|----------|-------|
311
+ | Metoda | Parametr | Popis |
312
+ | --------------- | -------- | ------------------------ |
312
313
  | `change(value)` | `string` | Vyplní textarea hodnotou |
313
314
 
314
315
  ---
@@ -321,14 +322,14 @@ Vyplní textový vstup.
321
322
  ui.textInput({ $name: "email" }).change("test@example.com");
322
323
  ```
323
324
 
324
- | Finder | Typ | Popis |
325
- |--------|-----|-------|
325
+ | Finder | Typ | Popis |
326
+ | ------- | -------- | ---------------------------- |
326
327
  | `$name` | `string` | Hodnota atributu `data-name` |
327
328
 
328
- | Metoda | Parametr | Popis |
329
- |--------|----------|-------|
330
- | `change(value)` | `string` | Vyplní vstup hodnotou |
331
- | `getValue()` | — | Vrátí aktuální hodnotu vstupu |
329
+ | Metoda | Parametr | Popis |
330
+ | --------------- | -------- | ----------------------------- |
331
+ | `change(value)` | `string` | Vyplní vstup hodnotou |
332
+ | `getValue()` | — | Vrátí aktuální hodnotu vstupu |
332
333
 
333
334
  ---
334
335
 
@@ -340,12 +341,12 @@ Vyplní vstup pro výběr času. Hodnota musí být ve formátu `HH:MM`.
340
341
  ui.timePickerInput({ $name: "startTime" }).change("09:30");
341
342
  ```
342
343
 
343
- | Finder | Typ | Popis |
344
- |--------|-----|-------|
344
+ | Finder | Typ | Popis |
345
+ | ------- | -------- | ---------------------------- |
345
346
  | `$name` | `string` | Hodnota atributu `data-name` |
346
347
 
347
- | Metoda | Parametr | Popis |
348
- |--------|----------|-------|
348
+ | Metoda | Parametr | Popis |
349
+ | --------------- | --------------------------- | ------------------------------------- |
349
350
  | `change(value)` | `` `${number}:${number}` `` | Vyplní vstup časem ve formátu `HH:MM` |
350
351
 
351
352
  ---
@@ -358,12 +359,12 @@ Ovládá toggle/switch — přepne stav pokud neodpovídá požadované hodnotě
358
359
  ui.toggle({ $name: "notifications" }).change(true);
359
360
  ```
360
361
 
361
- | Finder | Typ | Popis |
362
- |--------|-----|-------|
362
+ | Finder | Typ | Popis |
363
+ | ------- | -------- | ---------------------------- |
363
364
  | `$name` | `string` | Hodnota atributu `data-name` |
364
365
 
365
- | Metoda | Parametr | Popis |
366
- |--------|----------|-------|
366
+ | Metoda | Parametr | Popis |
367
+ | --------------- | --------- | --------------------------------- |
367
368
  | `change(value)` | `boolean` | Nastaví toggle na požadovaný stav |
368
369
 
369
370
  ---
@@ -384,24 +385,24 @@ await table.shouldHaveCellValue({ column: "Jméno", content: "Jan Novák" });
384
385
  await table.shouldHaveCellValue({ column: "Jméno", content: "Jana Nováková", row: 1 });
385
386
  ```
386
387
 
387
- | Finder | Typ | Popis |
388
- |--------|-----|-------|
389
- | `nth?` | `number` | Index při více tabulkách na stránce (výchozí: `0`) |
390
- | `parent?` | `Locator` | Volitelný rodičovský locator |
388
+ | Finder | Typ | Popis |
389
+ | --------- | --------- | -------------------------------------------------- |
390
+ | `nth?` | `number` | Index při více tabulkách na stránce (výchozí: `0`) |
391
+ | `parent?` | `Locator` | Volitelný rodičovský locator |
391
392
 
392
- | Metoda | Parametr | Popis |
393
- |--------|----------|-------|
394
- | `getRowCount()` | — | Vrátí počet řádků v těle tabulky |
395
- | `shouldHaveCellValue(data)` | viz níže | Ověří hodnotu buňky |
396
- | `shouldExist()` | — | Ověří, že tabulka je viditelná |
397
- | `shouldNotExist()` | — | Ověří, že tabulka není viditelná |
393
+ | Metoda | Parametr | Popis |
394
+ | --------------------------- | -------- | -------------------------------- |
395
+ | `getRowCount()` | — | Vrátí počet řádků v těle tabulky |
396
+ | `shouldHaveCellValue(data)` | viz níže | Ověří hodnotu buňky |
397
+ | `shouldExist()` | — | Ověří, že tabulka je viditelná |
398
+ | `shouldNotExist()` | — | Ověří, že tabulka není viditelná |
398
399
 
399
400
  **Parametry `shouldHaveCellValue`:**
400
401
 
401
- | Pole | Typ | Popis |
402
- |------|-----|-------|
403
- | `content` | `string` | Očekávaný text buňky |
404
- | `column` | `number \| string` | Index sloupce nebo text záhlaví |
405
- | `row?` | `number` | Index řádku (výchozí: `0`) |
402
+ | Pole | Typ | Popis |
403
+ | --------- | ------------------ | ------------------------------- |
404
+ | `content` | `string` | Očekávaný text buňky |
405
+ | `column` | `number \| string` | Index sloupce nebo text záhlaví |
406
+ | `row?` | `number` | Index řádku (výchozí: `0`) |
406
407
 
407
- > **Poznámka:** Při použití číselného indexu sloupce se počítají i sloupce s checkboxem a akcemi.
408
+ > **Poznámka:** Při použití číselného indexu sloupce se počítají i sloupce s checkboxem a akcemi.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/e2e-playwright",
3
- "version": "11.125.0",
3
+ "version": "11.127.0",
4
4
  "description": "UXF Playwright helpers",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -17,14 +17,14 @@
17
17
  "license": "MIT",
18
18
  "devDependencies": {
19
19
  "@playwright/test": "1.62.1",
20
- "@uxf/core": "11.124.0",
21
- "@uxf/ui": "11.125.0",
20
+ "@uxf/core": "11.127.0",
21
+ "@uxf/ui": "11.127.0",
22
22
  "dayjs": "^1.11.21"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "@playwright/test": "1.62.1",
26
- "@uxf/core": "11.124.0",
27
- "@uxf/ui": "11.125.0",
26
+ "@uxf/core": "11.127.0",
27
+ "@uxf/ui": "11.127.0",
28
28
  "dayjs": "^1.11.21"
29
29
  }
30
30
  }
package/ui/combobox.js CHANGED
@@ -11,7 +11,10 @@ class ComboboxModel extends form_component_model_1.FormComponentModel {
11
11
  }
12
12
  async performChange(value, textFilter) {
13
13
  await this.inputLocator.fill(value);
14
- const item = this.page.locator("li.uxf-dropdown__item").filter({ hasText: textFilter }).first();
14
+ // Match on the class alone, never on the element name. HeadlessUI rendered dropdown options
15
+ // as `li` inside a `ul`; Base UI renders `div` with `role="option"` inside a `div` with
16
+ // `role="listbox"`, so a `li.uxf-dropdown__item` selector matches nothing.
17
+ const item = this.page.locator(".uxf-dropdown__item").filter({ hasText: textFilter }).first();
15
18
  await item.waitFor({ state: "visible" });
16
19
  await item.click();
17
20
  await item.waitFor({ state: "hidden" });