@public-ui/visual-tests 4.0.0-alpha.4 → 4.0.0-alpha.6

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 (6) hide show
  1. package/README.md +1 -0
  2. package/package.json +10 -9
  3. package/playwright.config.js +11 -1
  4. package/tests/axe-snapshots.spec.js +37 -27
  5. package/tests/sample-app.routes.js +104 -69
  6. package/tests/theme-snapshots.spec.js +1 -1
package/README.md CHANGED
@@ -56,6 +56,7 @@ Add the following npm scripts to the theme's `package.json`:
56
56
  - `THEME_EXPERT`: Define the name of the export within the module. (e.g., `export const THEME_NAME = {/**/};`) Defaults to `default`.
57
57
  - `KOLIBRI_VISUAL_TESTS_TIMEOUT`: Define the Playwright [test timeout](https://playwright.dev/docs/test-timeouts).
58
58
  - `KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT`: Define the Playwright [expect timeout](https://playwright.dev/docs/test-timeouts).
59
+ - `KOLIBRI_VISUAL_TESTS_COLOR_SCHEME`: Choose the [CSS color scheme](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) for the browser context. Supported values are `light` (default) and `dark`.
59
60
 
60
61
  Run the tests with `npm test`. The first time, this will create a new folder `snapshots` which is supposed to be committed to the repository.
61
62
  In the following runs, new screenshots will be compared to this reference.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/visual-tests",
3
- "version": "4.0.0-alpha.4",
3
+ "version": "4.0.0-alpha.6",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": {
@@ -25,23 +25,24 @@
25
25
  "kolibri-visual-test": "src/index.js"
26
26
  },
27
27
  "dependencies": {
28
- "axe-playwright": "2.2.2",
28
+ "@axe-core/playwright": "4.11.0",
29
+ "axe-html-reporter": "2.2.11",
29
30
  "portfinder": "1.0.38",
30
31
  "serve": "14.2.5",
31
- "@public-ui/sample-react": "4.0.0-alpha.4"
32
+ "@public-ui/sample-react": "4.0.0-alpha.6"
32
33
  },
33
34
  "devDependencies": {
34
- "@babel/eslint-parser": "7.28.4",
35
+ "@babel/eslint-parser": "7.28.5",
35
36
  "@babel/plugin-syntax-import-attributes": "7.27.1",
36
- "@babel/preset-env": "7.28.3",
37
- "@playwright/test": "1.56.0",
37
+ "@babel/preset-env": "7.28.5",
38
+ "@playwright/test": "1.57.0",
38
39
  "eslint": "8.57.1",
39
- "knip": "5.65.0",
40
- "prettier": "3.6.2",
40
+ "knip": "5.70.2",
41
+ "prettier": "3.7.1",
41
42
  "prettier-plugin-organize-imports": "4.3.0"
42
43
  },
43
44
  "peerDependencies": {
44
- "@playwright/test": "1.56.0"
45
+ "@playwright/test": "1.57.0"
45
46
  },
46
47
  "files": [
47
48
  "playwright.config.js",
package/playwright.config.js CHANGED
@@ -12,6 +12,16 @@ const EXPECT_TIMEOUT = parseInt(process.env.KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT
12
12
  const BUILD_PATH = process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH ?? '';
13
13
  const THEME = (process.env.THEME_EXPORT || 'default').toLocaleLowerCase();
14
14
 
15
+ const VALID_COLOR_SCHEMES = ['light', 'dark'];
16
+ const colorSchemeInput = process.env.KOLIBRI_VISUAL_TESTS_COLOR_SCHEME;
17
+ const colorSchema = (colorSchemeInput || 'light').toLocaleLowerCase();
18
+
19
+ if (!VALID_COLOR_SCHEMES.includes(colorSchema)) {
20
+ throw new Error(
21
+ `Environment variable KOLIBRI_VISUAL_TESTS_COLOR_SCHEME must be one of "${VALID_COLOR_SCHEMES.join('", "')}" (received "${colorSchemeInput}").`,
22
+ );
23
+ }
24
+
15
25
  /**
16
26
  * See https://playwright.dev/docs/test-configuration.
17
27
  */
@@ -68,5 +78,5 @@ export default defineConfig({
68
78
  url: BASE_URL,
69
79
  reuseExistingServer: false,
70
80
  },
71
- snapshotPathTemplate: `{snapshotDir}/theme-${THEME}/{arg}-{projectName}-{platform}{ext}`,
81
+ snapshotPathTemplate: `{snapshotDir}/theme-${THEME}${colorSchema === 'light' ? '' : `-${colorSchema}`}/{arg}-{projectName}-{platform}{ext}`,
72
82
  });
package/tests/axe-snapshots.spec.js CHANGED
@@ -1,7 +1,12 @@
1
+ import AxeBuilder from '@axe-core/playwright';
1
2
  import { test } from '@playwright/test';
2
- import { checkA11y, injectAxe } from 'axe-playwright';
3
- import { ROUTES } from './sample-app.routes.js';
3
+ import axeHtmlReporter from 'axe-html-reporter';
4
4
  import process from 'process';
5
+ import { ROUTES } from './sample-app.routes.js';
6
+
7
+ const { createHtmlReport } = axeHtmlReporter;
8
+
9
+ const AXE_TAGS = ['best-practices', 'wcag2a', 'wcag2aa', 'wcag21aa'];
5
10
 
6
11
  const themeName = (process.env.THEME_EXPORT || 'default').toLocaleLowerCase();
7
12
  const rename = (snapshotName) => {
@@ -25,6 +30,25 @@ const rename = (snapshotName) => {
25
30
  return result;
26
31
  };
27
32
 
33
+ const sanitizeRouteForReport = (route) => route.replace(/[/?]/g, '-').replace(/^-+/, '') || 'root';
34
+
35
+ const buildReportOptions = (testInfo, route) => ({
36
+ projectKey: `axe-${themeName}`,
37
+ reportFileName: `${sanitizeRouteForReport(route)}.html`,
38
+ outputDirPath: rename(testInfo.outputDir),
39
+ outputDir: `axe-${themeName}`,
40
+ });
41
+
42
+ const logViolations = (route, violations) => {
43
+ if (!violations?.length) {
44
+ return;
45
+ }
46
+ console.warn(`Axe found ${violations.length} violation(s) on ${route}`);
47
+ for (const violation of violations) {
48
+ console.warn(`- ${violation.id}: ${violation.help} (${violation.nodes.length} nodes)`);
49
+ }
50
+ };
51
+
28
52
  // https://playwright.dev/docs/emulation
29
53
  test.use({
30
54
  colorScheme: 'light',
@@ -43,7 +67,6 @@ ROUTES.forEach((options, route) => {
43
67
  return;
44
68
  }
45
69
  test(`snapshot for ${route}`, async ({ page }, testInfo) => {
46
- const outputPath = rename(testInfo.outputDir);
47
70
  const hideMenusParam = `${route.includes('?') ? '&' : '?'}hideMenus`;
48
71
  await page.goto(`/#${route}${hideMenusParam}`);
49
72
  await page.waitForLoadState('networkidle');
@@ -62,29 +85,16 @@ ROUTES.forEach((options, route) => {
62
85
  await page.waitForTimeout(options?.snapshot?.waitForTimeout);
63
86
  }
64
87
 
65
- await injectAxe(page);
66
- await checkA11y(
67
- page,
68
- undefined,
69
- {
70
- axeOptions: {
71
- runOnly: {
72
- type: 'tag',
73
- values: ['best-practices', 'wcag2a', 'wcag2aa', 'wcag21aa'],
74
- },
75
- },
76
- detailedReport: true,
77
- detailedReportOptions: {
78
- html: true,
79
- },
80
- },
81
- true, // options?.axe?.skipFailures ?? false,
82
- 'html',
83
- {
84
- outputDirPath: outputPath.replace(/\/[^/]+$/, ''),
85
- outputDir: `axe-${themeName}`,
86
- reportFileName: `${route.replace(/[/?]/g, '-')}.html`,
87
- },
88
- );
88
+ const builder = new AxeBuilder({ page }).withTags(AXE_TAGS);
89
+ const results = await builder.analyze();
90
+ await testInfo.attach('axe-results', {
91
+ body: JSON.stringify(results, null, 2),
92
+ contentType: 'application/json',
93
+ });
94
+ createHtmlReport({
95
+ results,
96
+ options: buildReportOptions(testInfo, route),
97
+ });
98
+ logViolations(route, results.violations);
89
99
  });
90
100
  });
package/tests/sample-app.routes.js CHANGED
@@ -15,7 +15,7 @@ export const ROUTES = new Map();
15
15
  * - skip: boolean (Default: false)
16
16
  * - viewportSize:
17
17
  * - width (Default: 800)
18
- * - height (Default: 600)
18
+ * - height (Default: 100)
19
19
  * - waitForTimeout: number (Default: 15000)
20
20
  * - zoom:
21
21
  * - options:
@@ -119,57 +119,49 @@ ROUTES.set('button-link/image', {
119
119
  },
120
120
  },
121
121
  });
122
- ROUTES.set('button/basic', {
122
+ ROUTES.set('button/variants', {
123
123
  snapshot: {
124
124
  zoom: {
125
125
  skip: true,
126
126
  },
127
127
  },
128
128
  });
129
- ROUTES.set('button/icons', {
129
+ ROUTES.set('button/disabled', {
130
130
  snapshot: {
131
- skip: true,
132
131
  zoom: {
133
132
  skip: true,
134
133
  },
135
134
  },
136
135
  });
137
- ROUTES.set('button/width', {
136
+ ROUTES.set('button/hide-label', {
138
137
  snapshot: {
139
- skip: true,
140
138
  zoom: {
141
139
  skip: true,
142
140
  },
143
141
  },
144
142
  });
145
- ROUTES.set('button/access-key', {
143
+ ROUTES.set('button/icons', {
146
144
  snapshot: {
147
- skip: true,
148
145
  zoom: {
149
146
  skip: true,
150
147
  },
151
148
  },
152
149
  });
153
- ROUTES.set('button/baselined', {
150
+ ROUTES.set('button/short-key', {
154
151
  snapshot: {
155
- skip: true,
156
152
  zoom: {
157
153
  skip: true,
158
154
  },
159
155
  },
160
156
  });
161
- ROUTES.set('button/short-key', {
157
+ ROUTES.set('card/basic', {
162
158
  snapshot: {
163
- viewportSize: {
164
- width: 800,
165
- height: 434,
166
- },
167
159
  zoom: {
168
160
  skip: true,
169
161
  },
170
162
  },
171
163
  });
172
- ROUTES.set('card/basic', {
164
+ ROUTES.set('card/headlines', {
173
165
  snapshot: {
174
166
  zoom: {
175
167
  skip: true,
@@ -297,7 +289,18 @@ ROUTES.set('icon/basic', {
297
289
  snapshot: {
298
290
  viewportSize: {
299
291
  width: 60,
300
- height: 80,
292
+ height: 200,
293
+ },
294
+ zoom: {
295
+ skip: true,
296
+ },
297
+ },
298
+ });
299
+ ROUTES.set('icon/font-awesome', {
300
+ snapshot: {
301
+ viewportSize: {
302
+ width: 250,
303
+ height: 345,
301
304
  },
302
305
  zoom: {
303
306
  skip: true,
@@ -319,7 +322,7 @@ ROUTES.set('input-checkbox/basic?noColumns', {
319
322
  snapshot: {
320
323
  viewportSize: {
321
324
  width: 500,
322
- height: 100,
325
+ height: 0,
323
326
  },
324
327
  zoom: {
325
328
  skip: true,
@@ -333,7 +336,7 @@ ROUTES.set('input-checkbox/button?noColumns', {
333
336
  snapshot: {
334
337
  viewportSize: {
335
338
  width: 500,
336
- height: 100,
339
+ height: 0,
337
340
  },
338
341
  zoom: {
339
342
  skip: true,
@@ -347,7 +350,7 @@ ROUTES.set('input-checkbox/switch?noColumns', {
347
350
  snapshot: {
348
351
  viewportSize: {
349
352
  width: 500,
350
- height: 100,
353
+ height: 0,
351
354
  },
352
355
  zoom: {
353
356
  skip: true,
@@ -358,7 +361,7 @@ ROUTES.set('input-color/basic?noColumns', {
358
361
  snapshot: {
359
362
  viewportSize: {
360
363
  width: 500,
361
- height: 100,
364
+ height: 0,
362
365
  },
363
366
  zoom: {
364
367
  skip: true,
@@ -369,7 +372,7 @@ ROUTES.set('input-date/basic?noColumns', {
369
372
  snapshot: {
370
373
  viewportSize: {
371
374
  width: 500,
372
- height: 100,
375
+ height: 0,
373
376
  },
374
377
  zoom: {
375
378
  skip: true,
@@ -380,7 +383,7 @@ ROUTES.set('input-email/basic?noColumns', {
380
383
  snapshot: {
381
384
  viewportSize: {
382
385
  width: 500,
383
- height: 100,
386
+ height: 0,
384
387
  },
385
388
  zoom: {
386
389
  skip: true,
@@ -391,7 +394,7 @@ ROUTES.set('input-file/basic?noColumns', {
391
394
  snapshot: {
392
395
  viewportSize: {
393
396
  width: 500,
394
- height: 100,
397
+ height: 0,
395
398
  },
396
399
  zoom: {
397
400
  skip: true,
@@ -402,7 +405,18 @@ ROUTES.set('input-number/basic?noColumns', {
402
405
  snapshot: {
403
406
  viewportSize: {
404
407
  width: 500,
405
- height: 100,
408
+ height: 0,
409
+ },
410
+ zoom: {
411
+ skip: true,
412
+ },
413
+ },
414
+ });
415
+ ROUTES.set('input-number/number-formatter', {
416
+ snapshot: {
417
+ viewportSize: {
418
+ width: 500,
419
+ height: 0,
406
420
  },
407
421
  zoom: {
408
422
  skip: true,
@@ -413,7 +427,7 @@ ROUTES.set('input-password/basic?noColumns', {
413
427
  snapshot: {
414
428
  viewportSize: {
415
429
  width: 500,
416
- height: 100,
430
+ height: 0,
417
431
  },
418
432
  zoom: {
419
433
  skip: true,
@@ -424,7 +438,7 @@ ROUTES.set('input-password/show-password?noColumns', {
424
438
  snapshot: {
425
439
  viewportSize: {
426
440
  width: 500,
427
- height: 100,
441
+ height: 0,
428
442
  },
429
443
  zoom: {
430
444
  skip: true,
@@ -438,7 +452,7 @@ ROUTES.set('input-radio/basic?noColumns', {
438
452
  snapshot: {
439
453
  viewportSize: {
440
454
  width: 500,
441
- height: 100,
455
+ height: 0,
442
456
  },
443
457
  zoom: {
444
458
  skip: true,
@@ -449,7 +463,7 @@ ROUTES.set('input-radio/horizontal?noColumns', {
449
463
  snapshot: {
450
464
  viewportSize: {
451
465
  width: 500,
452
- height: 100,
466
+ height: 0,
453
467
  },
454
468
  zoom: {
455
469
  skip: true,
@@ -460,7 +474,7 @@ ROUTES.set('input-radio/object?noColumns', {
460
474
  snapshot: {
461
475
  viewportSize: {
462
476
  width: 500,
463
- height: 100,
477
+ height: 0,
464
478
  },
465
479
  zoom: {
466
480
  skip: true,
@@ -471,7 +485,7 @@ ROUTES.set('input-range/basic?noColumns', {
471
485
  snapshot: {
472
486
  viewportSize: {
473
487
  width: 500,
474
- height: 100,
488
+ height: 0,
475
489
  },
476
490
  zoom: {
477
491
  skip: true,
@@ -482,7 +496,18 @@ ROUTES.set('input-text/basic?noColumns', {
482
496
  snapshot: {
483
497
  viewportSize: {
484
498
  width: 500,
485
- height: 100,
499
+ height: 0,
500
+ },
501
+ zoom: {
502
+ skip: true,
503
+ },
504
+ },
505
+ });
506
+ ROUTES.set('input-text/text-formatter', {
507
+ snapshot: {
508
+ viewportSize: {
509
+ width: 500,
510
+ height: 0,
486
511
  },
487
512
  zoom: {
488
513
  skip: true,
@@ -558,7 +583,7 @@ ROUTES.set('nav/basic', {
558
583
  snapshot: {
559
584
  viewportSize: {
560
585
  width: 400,
561
- height: 100,
586
+ height: 0,
562
587
  },
563
588
  zoom: {
564
589
  skip: true,
@@ -572,6 +597,17 @@ ROUTES.set('pagination/basic', {
572
597
  },
573
598
  },
574
599
  });
600
+ ROUTES.set('popover-button/basic', {
601
+ snapshot: {
602
+ zoom: {
603
+ skip: true,
604
+ },
605
+ viewportSize: {
606
+ width: 200,
607
+ height: 220,
608
+ },
609
+ },
610
+ });
575
611
  ROUTES.set('progress/basic', {
576
612
  snapshot: {
577
613
  zoom: {
@@ -595,7 +631,7 @@ ROUTES.set('select/basic?noColumns', {
595
631
  snapshot: {
596
632
  viewportSize: {
597
633
  width: 500,
598
- height: 100,
634
+ height: 0,
599
635
  },
600
636
  zoom: {
601
637
  skip: true,
@@ -604,7 +640,6 @@ ROUTES.set('select/basic?noColumns', {
604
640
  });
605
641
  ROUTES.set('skip-nav/basic', {
606
642
  snapshot: {
607
- skip: true,
608
643
  zoom: {
609
644
  skip: true,
610
645
  },
@@ -614,7 +649,7 @@ ROUTES.set('spin/basic', {
614
649
  snapshot: {
615
650
  viewportSize: {
616
651
  width: 100,
617
- height: 100,
652
+ height: 0,
618
653
  },
619
654
  zoom: {
620
655
  skip: true,
@@ -628,7 +663,7 @@ ROUTES.set('single-select/basic?noColumns', {
628
663
  snapshot: {
629
664
  viewportSize: {
630
665
  width: 500,
631
- height: 100,
666
+ height: 0,
632
667
  },
633
668
  zoom: {
634
669
  skip: true,
@@ -639,7 +674,7 @@ ROUTES.set('spin/custom', {
639
674
  snapshot: {
640
675
  viewportSize: {
641
676
  width: 100,
642
- height: 100,
677
+ height: 0,
643
678
  },
644
679
  zoom: {
645
680
  skip: true,
@@ -650,7 +685,7 @@ ROUTES.set('spin/cycle', {
650
685
  snapshot: {
651
686
  viewportSize: {
652
687
  width: 100,
653
- height: 100,
688
+ height: 0,
654
689
  },
655
690
  zoom: {
656
691
  skip: true,
@@ -661,7 +696,7 @@ ROUTES.set('split-button/basic', {
661
696
  snapshot: {
662
697
  viewportSize: {
663
698
  width: 300,
664
- height: 100,
699
+ height: 0,
665
700
  },
666
701
  zoom: {
667
702
  skip: true,
@@ -849,7 +884,7 @@ ROUTES.set('tabs/icons-only', {
849
884
  snapshot: {
850
885
  viewportSize: {
851
886
  width: 200,
852
- height: 100,
887
+ height: 0,
853
888
  },
854
889
  zoom: {
855
890
  skip: true,
@@ -867,7 +902,7 @@ ROUTES.set('textarea/basic?noColumns', {
867
902
  snapshot: {
868
903
  viewportSize: {
869
904
  width: 500,
870
- height: 100,
905
+ height: 0,
871
906
  },
872
907
  zoom: {
873
908
  skip: true,
@@ -894,7 +929,7 @@ ROUTES.set('textarea/with-counter', {
894
929
  snapshot: {
895
930
  viewportSize: {
896
931
  width: 200,
897
- height: 100,
932
+ height: 0,
898
933
  },
899
934
  zoom: {
900
935
  skip: true,
@@ -916,7 +951,7 @@ ROUTES.set('toolbar/basic', {
916
951
  snapshot: {
917
952
  viewportSize: {
918
953
  width: 600,
919
- height: 100,
954
+ height: 0,
920
955
  },
921
956
  zoom: {
922
957
  skip: true,
@@ -927,7 +962,7 @@ ROUTES.set('toolbar/disabled', {
927
962
  snapshot: {
928
963
  viewportSize: {
929
964
  width: 300,
930
- height: 100,
965
+ height: 0,
931
966
  },
932
967
  zoom: {
933
968
  skip: true,
@@ -941,7 +976,7 @@ ROUTES.set('tree/basic/home', {
941
976
  snapshot: {
942
977
  viewportSize: {
943
978
  width: 300,
944
- height: 100,
979
+ height: 0,
945
980
  },
946
981
  zoom: {
947
982
  skip: true,
@@ -952,7 +987,7 @@ ROUTES.set('version/basic', {
952
987
  snapshot: {
953
988
  viewportSize: {
954
989
  width: 150,
955
- height: 100,
990
+ height: 0,
956
991
  },
957
992
  zoom: {
958
993
  skip: true,
@@ -1017,7 +1052,7 @@ ROUTES.set('scenarios/focus-elements?component=accordion', {
1017
1052
  snapshot: {
1018
1053
  viewportSize: {
1019
1054
  width: 300,
1020
- height: 100,
1055
+ height: 0,
1021
1056
  },
1022
1057
  zoom: {
1023
1058
  skip: true,
@@ -1028,7 +1063,7 @@ ROUTES.set('scenarios/focus-elements?component=button', {
1028
1063
  snapshot: {
1029
1064
  viewportSize: {
1030
1065
  width: 300,
1031
- height: 100,
1066
+ height: 0,
1032
1067
  },
1033
1068
  zoom: {
1034
1069
  skip: true,
@@ -1039,7 +1074,7 @@ ROUTES.set('scenarios/focus-elements?component=buttonLink', {
1039
1074
  snapshot: {
1040
1075
  viewportSize: {
1041
1076
  width: 300,
1042
- height: 100,
1077
+ height: 0,
1043
1078
  },
1044
1079
  zoom: {
1045
1080
  skip: true,
@@ -1050,7 +1085,7 @@ ROUTES.set('scenarios/focus-elements?component=combobox', {
1050
1085
  snapshot: {
1051
1086
  viewportSize: {
1052
1087
  width: 300,
1053
- height: 100,
1088
+ height: 0,
1054
1089
  },
1055
1090
  zoom: {
1056
1091
  skip: true,
@@ -1061,7 +1096,7 @@ ROUTES.set('scenarios/focus-elements?component=details', {
1061
1096
  snapshot: {
1062
1097
  viewportSize: {
1063
1098
  width: 300,
1064
- height: 100,
1099
+ height: 0,
1065
1100
  },
1066
1101
  zoom: {
1067
1102
  skip: true,
@@ -1072,7 +1107,7 @@ ROUTES.set('scenarios/focus-elements?component=inputCheckbox', {
1072
1107
  snapshot: {
1073
1108
  viewportSize: {
1074
1109
  width: 300,
1075
- height: 100,
1110
+ height: 0,
1076
1111
  },
1077
1112
  zoom: {
1078
1113
  skip: true,
@@ -1083,7 +1118,7 @@ ROUTES.set('scenarios/focus-elements?component=inputColor', {
1083
1118
  snapshot: {
1084
1119
  viewportSize: {
1085
1120
  width: 300,
1086
- height: 100,
1121
+ height: 0,
1087
1122
  },
1088
1123
  zoom: {
1089
1124
  skip: true,
@@ -1094,7 +1129,7 @@ ROUTES.set('scenarios/focus-elements?component=inputDate', {
1094
1129
  snapshot: {
1095
1130
  viewportSize: {
1096
1131
  width: 300,
1097
- height: 100,
1132
+ height: 0,
1098
1133
  },
1099
1134
  zoom: {
1100
1135
  skip: true,
@@ -1105,7 +1140,7 @@ ROUTES.set('scenarios/focus-elements?component=inputEmail', {
1105
1140
  snapshot: {
1106
1141
  viewportSize: {
1107
1142
  width: 300,
1108
- height: 100,
1143
+ height: 0,
1109
1144
  },
1110
1145
  zoom: {
1111
1146
  skip: true,
@@ -1116,7 +1151,7 @@ ROUTES.set('scenarios/focus-elements?component=inputFile', {
1116
1151
  snapshot: {
1117
1152
  viewportSize: {
1118
1153
  width: 300,
1119
- height: 100,
1154
+ height: 0,
1120
1155
  },
1121
1156
  zoom: {
1122
1157
  skip: true,
@@ -1127,7 +1162,7 @@ ROUTES.set('scenarios/focus-elements?component=inputFileMultiple', {
1127
1162
  snapshot: {
1128
1163
  viewportSize: {
1129
1164
  width: 300,
1130
- height: 100,
1165
+ height: 0,
1131
1166
  },
1132
1167
  zoom: {
1133
1168
  skip: true,
@@ -1138,7 +1173,7 @@ ROUTES.set('scenarios/focus-elements?component=inputNumber', {
1138
1173
  snapshot: {
1139
1174
  viewportSize: {
1140
1175
  width: 300,
1141
- height: 100,
1176
+ height: 0,
1142
1177
  },
1143
1178
  zoom: {
1144
1179
  skip: true,
@@ -1149,7 +1184,7 @@ ROUTES.set('scenarios/focus-elements?component=inputPassword', {
1149
1184
  snapshot: {
1150
1185
  viewportSize: {
1151
1186
  width: 300,
1152
- height: 100,
1187
+ height: 0,
1153
1188
  },
1154
1189
  zoom: {
1155
1190
  skip: true,
@@ -1160,7 +1195,7 @@ ROUTES.set('scenarios/focus-elements?component=inputRadio', {
1160
1195
  snapshot: {
1161
1196
  viewportSize: {
1162
1197
  width: 300,
1163
- height: 100,
1198
+ height: 0,
1164
1199
  },
1165
1200
  zoom: {
1166
1201
  skip: true,
@@ -1171,7 +1206,7 @@ ROUTES.set('scenarios/focus-elements?component=inputRange', {
1171
1206
  snapshot: {
1172
1207
  viewportSize: {
1173
1208
  width: 300,
1174
- height: 100,
1209
+ height: 0,
1175
1210
  },
1176
1211
  zoom: {
1177
1212
  skip: true,
@@ -1182,7 +1217,7 @@ ROUTES.set('scenarios/focus-elements?component=inputText', {
1182
1217
  snapshot: {
1183
1218
  viewportSize: {
1184
1219
  width: 300,
1185
- height: 100,
1220
+ height: 0,
1186
1221
  },
1187
1222
  zoom: {
1188
1223
  skip: true,
@@ -1193,7 +1228,7 @@ ROUTES.set('scenarios/focus-elements?component=link', {
1193
1228
  snapshot: {
1194
1229
  viewportSize: {
1195
1230
  width: 300,
1196
- height: 100,
1231
+ height: 0,
1197
1232
  },
1198
1233
  zoom: {
1199
1234
  skip: true,
@@ -1204,7 +1239,7 @@ ROUTES.set('scenarios/focus-elements?component=linkButton', {
1204
1239
  snapshot: {
1205
1240
  viewportSize: {
1206
1241
  width: 300,
1207
- height: 100,
1242
+ height: 0,
1208
1243
  },
1209
1244
  zoom: {
1210
1245
  skip: true,
@@ -1215,7 +1250,7 @@ ROUTES.set('scenarios/focus-elements?component=select', {
1215
1250
  snapshot: {
1216
1251
  viewportSize: {
1217
1252
  width: 300,
1218
- height: 100,
1253
+ height: 0,
1219
1254
  },
1220
1255
  zoom: {
1221
1256
  skip: true,
@@ -1226,7 +1261,7 @@ ROUTES.set('scenarios/focus-elements?component=selectMultiple', {
1226
1261
  snapshot: {
1227
1262
  viewportSize: {
1228
1263
  width: 300,
1229
- height: 100,
1264
+ height: 0,
1230
1265
  },
1231
1266
  zoom: {
1232
1267
  skip: true,
@@ -1239,7 +1274,7 @@ ROUTES.set('scenarios/focus-elements?component=singleSelect', {
1239
1274
  },
1240
1275
  viewportSize: {
1241
1276
  width: 300,
1242
- height: 100,
1277
+ height: 0,
1243
1278
  },
1244
1279
  zoom: {
1245
1280
  skip: true,
@@ -1249,7 +1284,7 @@ ROUTES.set('scenarios/focus-elements?component=textarea', {
1249
1284
  snapshot: {
1250
1285
  viewportSize: {
1251
1286
  width: 300,
1252
- height: 100,
1287
+ height: 0,
1253
1288
  },
1254
1289
  zoom: {
1255
1290
  skip: true,
package/tests/theme-snapshots.spec.js CHANGED
@@ -1,4 +1,4 @@
1
- import { test, expect } from '@playwright/test';
1
+ import { expect, test } from '@playwright/test';
2
2
  import { ROUTES } from './sample-app.routes.js';
3
3
 
4
4
  // https://playwright.dev/docs/emulation