@uxf/e2e-playwright 11.118.0 → 11.119.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.
package/README.md CHANGED
@@ -1,6 +1,407 @@
1
1
  # @uxf/e2e-playwright
2
2
 
3
+ Playwright helper classes a factory funkce pro testování UXF komponent.
4
+
3
5
  ```sh
4
- yarn add @uxf/e2e-playwright
6
+ npm install @uxf/e2e-playwright
7
+ ```
8
+
9
+ ## Použití
10
+
11
+ Všechny helpery se vytváří přes `createUi(page)`, které vrací objekt se všemi factory funkcemi:
12
+
13
+ ```typescript
14
+ import { createUi } from "@uxf/e2e-playwright";
15
+
16
+ test("example", async ({ page }) => {
17
+ const ui = createUi(page);
18
+
19
+ await ui.textInput({ $name: "username" }).change("john");
20
+ await ui.button({ text: "Uložit" }).click();
21
+ await ui.flashMessages().shouldExistMessage("Uloženo");
22
+ });
23
+ ```
24
+
25
+ ---
26
+
27
+ ## Přehled helperů
28
+
29
+ ### UI helpery
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 |
36
+
37
+ ### Formulářové helpery
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 |
54
+
55
+ ### Data Grid helpery
56
+
57
+ | Helper | Popis |
58
+ |--------|-------|
59
+ | [`dataGridTable`](#datagridtable) | Interakce s data grid tabulkou |
60
+
61
+ ---
62
+
63
+ ## UI helpery
64
+
65
+ UI helpery slouží pro interakci s obecnými prvky stránky (tlačítka, nadpisy, flash zprávy).
66
+
67
+ ---
68
+
69
+ ### `button`
70
+
71
+ Klikne na tlačítko podle textu.
72
+
73
+ ```typescript
74
+ ui.button({ text: "Uložit" }).click();
75
+ ui.button({ text: "Smazat", nth: 1 }).click(); // druhé tlačítko se stejným textem
76
+ ```
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 |
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é |
89
+
90
+ ---
91
+
92
+ ### `flashMessages`
93
+
94
+ Ověří přítomnost flash zprávy na stránce.
95
+
96
+ ```typescript
97
+ ui.flashMessages().shouldExistMessage("Záznam byl úspěšně uložen");
98
+ ```
99
+
100
+ | Metoda | Parametr | Popis |
101
+ |--------|----------|-------|
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ý |
105
+
106
+ ---
107
+
108
+ ### `h1`
109
+
110
+ Ověří text nadpisu `<h1>` na stránce. Porovnání je přesná shoda (case-insensitive).
111
+
112
+ ```typescript
113
+ ui.h1().shouldHaveText("Přehled uživatelů");
114
+ ```
115
+
116
+ | Metoda | Parametr | Popis |
117
+ |--------|----------|-------|
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ý |
121
+
122
+ ---
123
+
124
+ ## Formulářové helpery
125
+
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
+
128
+ Všechny formulářové helpery dědí z `FormComponentModel` a mají:
129
+ - `change(value)` — nastaví hodnotu komponenty
130
+ - `shouldExist()` — ověří, že komponenta je viditelná
131
+ - `shouldNotExist()` — ověří, že komponenta není viditelná
132
+ - `shouldBeInvalid()` — ověří, že komponenta má třídu `IS_INVALID`
133
+
134
+ ---
135
+
136
+ ### `checkboxInput`
137
+
138
+ Ovládá checkbox — přepne stav pokud neodpovídá požadované hodnotě.
139
+
140
+ ```typescript
141
+ ui.checkboxInput({ $name: "agree" }).change(true);
142
+ ```
143
+
144
+ | Finder | Typ | Popis |
145
+ |--------|-----|-------|
146
+ | `$name` | `string` | Hodnota atributu `data-name` |
147
+
148
+ | Metoda | Parametr | Popis |
149
+ |--------|----------|-------|
150
+ | `change(value)` | `boolean` | Nastaví checkbox na požadovaný stav |
151
+
152
+ ---
153
+
154
+ ### `combobox`
155
+
156
+ Vyplní vyhledávací vstup a vybere první odpovídající položku z dropdownu.
157
+
158
+ ```typescript
159
+ ui.combobox({ $name: "city" }).change("Praha");
160
+ ```
161
+
162
+ | Finder | Typ | Popis |
163
+ |--------|-----|-------|
164
+ | `$name` | `string` | Hodnota atributu `data-name` |
165
+
166
+ | Metoda | Parametr | Popis |
167
+ |--------|----------|-------|
168
+ | `change(value)` | `string` | Vyplní vstup a vybere odpovídající položku |
169
+
170
+ ---
171
+
172
+ ### `datePickerInput`
173
+
174
+ Vyplní vstup pro výběr data. Hodnota se formátuje jako `DD.MM.YYYY`.
175
+
176
+ ```typescript
177
+ ui.datePickerInput({ $name: "birthDate" }).change(new Date("1990-05-15"));
178
+ ```
179
+
180
+ | Finder | Typ | Popis |
181
+ |--------|-----|-------|
182
+ | `$name` | `string` | Hodnota atributu `data-name` |
183
+
184
+ | Metoda | Parametr | Popis |
185
+ |--------|----------|-------|
186
+ | `change(value)` | `Date` | Vyplní vstup datem ve formátu `DD.MM.YYYY` |
187
+
188
+ ---
189
+
190
+ ### `datetimePickerInput`
191
+
192
+ Vyplní vstup pro výběr data a času. Hodnota se formátuje jako `DD.MM.YYYY HH:mm:ss`.
193
+
194
+ ```typescript
195
+ ui.datetimePickerInput({ $name: "scheduledAt" }).change(new Date("2025-01-15T14:30:00"));
196
+ ```
197
+
198
+ | Finder | Typ | Popis |
199
+ |--------|-----|-------|
200
+ | `$name` | `string` | Hodnota atributu `data-name` |
201
+
202
+ | Metoda | Parametr | Popis |
203
+ |--------|----------|-------|
204
+ | `change(value)` | `Date` | Vyplní vstup datem a časem ve formátu `DD.MM.YYYY HH:mm:ss` |
205
+
206
+ ---
207
+
208
+ ### `dropzone`
209
+
210
+ Nahraje soubory do dropzone komponenty a počká na potvrzení úspěšného nahrání (`data-state="OK"`).
211
+
212
+ ```typescript
213
+ ui.dropzone({ $name: "avatar" }).change(["path/to/image.png"]);
214
+ ```
215
+
216
+ | Finder | Typ | Popis |
217
+ |--------|-----|-------|
218
+ | `$name` | `string` | Hodnota atributu `data-name` |
219
+
220
+ | Metoda | Parametr | Popis |
221
+ |--------|----------|-------|
222
+ | `change(value)` | `string[]` | Nastaví soubory na file input a ověří úspěšné nahrání |
223
+
224
+ ---
225
+
226
+ ### `multiCombobox`
227
+
228
+ Vyplní vyhledávací vstup a vybere více položek z dropdownu.
229
+
230
+ ```typescript
231
+ ui.multiCombobox({ $name: "skills" }).change(["JavaScript", "CSS"]);
232
+ ```
233
+
234
+ | Finder | Typ | Popis |
235
+ |--------|-----|-------|
236
+ | `$name` | `string` | Hodnota atributu `data-name` |
237
+
238
+ | Metoda | Parametr | Popis |
239
+ |--------|----------|-------|
240
+ | `change(value)` | `string[]` | Pro každou hodnotu vyplní vstup a vybere odpovídající položku |
241
+
242
+ ---
243
+
244
+ ### `multiSelect`
245
+
246
+ Otevře dropdown a vybere více možností podle textu.
247
+
248
+ ```typescript
249
+ ui.multiSelect({ $name: "tags" }).change(["React", "TypeScript"]);
250
+ ```
251
+
252
+ | Finder | Typ | Popis |
253
+ |--------|-----|-------|
254
+ | `$name` | `string` | Hodnota atributu `data-name` |
255
+
256
+ | Metoda | Parametr | Popis |
257
+ |--------|----------|-------|
258
+ | `change(value)` | `string[]` | Vybere všechny zadané možnosti |
259
+
260
+ ---
261
+
262
+ ### `radioGroup`
263
+
264
+ Vybere radio button s odpovídajícím textem.
265
+
266
+ ```typescript
267
+ ui.radioGroup({ $name: "gender" }).change("Muž");
268
+ ```
269
+
270
+ | Finder | Typ | Popis |
271
+ |--------|-----|-------|
272
+ | `$name` | `string` | Hodnota atributu `data-name` |
273
+
274
+ | Metoda | Parametr | Popis |
275
+ |--------|----------|-------|
276
+ | `change(value)` | `string` | Klikne na radio option s odpovídajícím textem |
277
+
278
+ ---
279
+
280
+ ### `select`
281
+
282
+ Otevře dropdown a vybere možnost podle textu.
283
+
284
+ ```typescript
285
+ ui.select({ $name: "country" }).change("Česká republika");
286
+ ```
287
+
288
+ | Finder | Typ | Popis |
289
+ |--------|-----|-------|
290
+ | `$name` | `string` | Hodnota atributu `data-name` |
291
+
292
+ | Metoda | Parametr | Popis |
293
+ |--------|----------|-------|
294
+ | `change(value)` | `string` | Vybere možnost s odpovídajícím textem |
295
+
296
+ ---
297
+
298
+ ### `textarea`
299
+
300
+ Vyplní textarea.
301
+
302
+ ```typescript
303
+ ui.textarea({ $name: "description" }).change("Popis...");
304
+ ```
305
+
306
+ | Finder | Typ | Popis |
307
+ |--------|-----|-------|
308
+ | `$name` | `string` | Hodnota atributu `data-name` |
309
+
310
+ | Metoda | Parametr | Popis |
311
+ |--------|----------|-------|
312
+ | `change(value)` | `string` | Vyplní textarea hodnotou |
313
+
314
+ ---
315
+
316
+ ### `textInput`
317
+
318
+ Vyplní textový vstup.
319
+
320
+ ```typescript
321
+ ui.textInput({ $name: "email" }).change("test@example.com");
322
+ ```
323
+
324
+ | Finder | Typ | Popis |
325
+ |--------|-----|-------|
326
+ | `$name` | `string` | Hodnota atributu `data-name` |
327
+
328
+ | Metoda | Parametr | Popis |
329
+ |--------|----------|-------|
330
+ | `change(value)` | `string` | Vyplní vstup hodnotou |
331
+ | `getValue()` | — | Vrátí aktuální hodnotu vstupu |
332
+
333
+ ---
334
+
335
+ ### `timePickerInput`
336
+
337
+ Vyplní vstup pro výběr času. Hodnota musí být ve formátu `HH:MM`.
338
+
339
+ ```typescript
340
+ ui.timePickerInput({ $name: "startTime" }).change("09:30");
341
+ ```
342
+
343
+ | Finder | Typ | Popis |
344
+ |--------|-----|-------|
345
+ | `$name` | `string` | Hodnota atributu `data-name` |
346
+
347
+ | Metoda | Parametr | Popis |
348
+ |--------|----------|-------|
349
+ | `change(value)` | `` `${number}:${number}` `` | Vyplní vstup časem ve formátu `HH:MM` |
350
+
351
+ ---
352
+
353
+ ### `toggle`
354
+
355
+ Ovládá toggle/switch — přepne stav pokud neodpovídá požadované hodnotě.
356
+
357
+ ```typescript
358
+ ui.toggle({ $name: "notifications" }).change(true);
359
+ ```
360
+
361
+ | Finder | Typ | Popis |
362
+ |--------|-----|-------|
363
+ | `$name` | `string` | Hodnota atributu `data-name` |
364
+
365
+ | Metoda | Parametr | Popis |
366
+ |--------|----------|-------|
367
+ | `change(value)` | `boolean` | Nastaví toggle na požadovaný stav |
368
+
369
+ ---
370
+
371
+ ## Data Grid helpery
372
+
373
+ ---
374
+
375
+ ### `dataGridTable`
376
+
377
+ Interaguje s data grid tabulkou — zjišťuje počet řádků a ověřuje obsah buněk.
378
+
379
+ ```typescript
380
+ const table = ui.dataGridTable({});
381
+
382
+ await table.getRowCount(); // vrátí počet řádků
383
+ await table.shouldHaveCellValue({ column: "Jméno", content: "Jan Novák" });
384
+ await table.shouldHaveCellValue({ column: "Jméno", content: "Jana Nováková", row: 1 });
5
385
  ```
6
386
 
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 |
391
+
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á |
398
+
399
+ **Parametry `shouldHaveCellValue`:**
400
+
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`) |
406
+
407
+ > **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.118.0",
3
+ "version": "11.119.0",
4
4
  "description": "UXF Playwright helpers",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -18,13 +18,13 @@
18
18
  "devDependencies": {
19
19
  "@playwright/test": "1.57.0",
20
20
  "@uxf/core": "11.114.0",
21
- "@uxf/ui": "11.118.0",
21
+ "@uxf/ui": "11.119.0",
22
22
  "dayjs": "^1.11.19"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "@playwright/test": "1.57.0",
26
26
  "@uxf/core": "11.114.0",
27
- "@uxf/ui": "11.118.0",
27
+ "@uxf/ui": "11.119.0",
28
28
  "dayjs": "^1.11.19"
29
29
  }
30
30
  }
@@ -8,3 +8,11 @@ const components_1 = require("../components");
8
8
  await ui.combobox({ $name: "default" }).change("Option one");
9
9
  await ui.combobox({ $name: "default" }).change("Option three");
10
10
  });
11
+ (0, test_1.test)("Combobox with load function", async ({ page }) => {
12
+ const ui = (0, components_1.createUi)(page);
13
+ await page.goto("/examples/ui/combobox/OnlyForE2ETests");
14
+ await ui.combobox({ $name: "fruit" }).change("Apple");
15
+ await ui.combobox({ $name: "country" }).change("Czech Republic");
16
+ await ui.combobox({ $name: "color" }).change("Blue");
17
+ await ui.combobox({ $name: "size" }).change("Medium");
18
+ });
package/ui/combobox.js CHANGED
@@ -10,7 +10,10 @@ class ComboboxModel extends form_component_model_1.FormComponentModel {
10
10
  }
11
11
  async change(value) {
12
12
  await this.inputLocator.fill(value);
13
- await this.page.locator("li.uxf-dropdown__item").filter({ hasText: value }).first().click();
13
+ const item = this.page.locator("li.uxf-dropdown__item").filter({ hasText: value }).first();
14
+ await item.waitFor({ state: "visible" });
15
+ await item.click();
16
+ await item.waitFor({ state: "hidden" });
14
17
  }
15
18
  }
16
19
  exports.ComboboxModel = ComboboxModel;