@public-ui/visual-tests 3.0.8-rc.0 → 3.0.8-rc.2

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 -54
  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": "3.0.8-rc.0",
3
+ "version": "3.0.8-rc.2",
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": "3.0.8-rc.0"
32
+ "@public-ui/sample-react": "3.0.8-rc.2"
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.0",
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:
@@ -176,6 +176,13 @@ ROUTES.set('card/basic', {
176
176
  },
177
177
  },
178
178
  });
179
+ ROUTES.set('card/headlines', {
180
+ snapshot: {
181
+ zoom: {
182
+ skip: true,
183
+ },
184
+ },
185
+ });
179
186
  ROUTES.set('combobox/basic?noColumns', {
180
187
  snapshot: {
181
188
  skip: true,
@@ -297,7 +304,18 @@ ROUTES.set('icon/basic', {
297
304
  snapshot: {
298
305
  viewportSize: {
299
306
  width: 60,
300
- height: 80,
307
+ height: 200,
308
+ },
309
+ zoom: {
310
+ skip: true,
311
+ },
312
+ },
313
+ });
314
+ ROUTES.set('icon/font-awesome', {
315
+ snapshot: {
316
+ viewportSize: {
317
+ width: 250,
318
+ height: 345,
301
319
  },
302
320
  zoom: {
303
321
  skip: true,
@@ -319,7 +337,7 @@ ROUTES.set('input-checkbox/basic?noColumns', {
319
337
  snapshot: {
320
338
  viewportSize: {
321
339
  width: 500,
322
- height: 100,
340
+ height: 0,
323
341
  },
324
342
  zoom: {
325
343
  skip: true,
@@ -333,7 +351,7 @@ ROUTES.set('input-checkbox/button?noColumns', {
333
351
  snapshot: {
334
352
  viewportSize: {
335
353
  width: 500,
336
- height: 100,
354
+ height: 0,
337
355
  },
338
356
  zoom: {
339
357
  skip: true,
@@ -347,7 +365,7 @@ ROUTES.set('input-checkbox/switch?noColumns', {
347
365
  snapshot: {
348
366
  viewportSize: {
349
367
  width: 500,
350
- height: 100,
368
+ height: 0,
351
369
  },
352
370
  zoom: {
353
371
  skip: true,
@@ -358,7 +376,7 @@ ROUTES.set('input-color/basic?noColumns', {
358
376
  snapshot: {
359
377
  viewportSize: {
360
378
  width: 500,
361
- height: 100,
379
+ height: 0,
362
380
  },
363
381
  zoom: {
364
382
  skip: true,
@@ -369,7 +387,7 @@ ROUTES.set('input-date/basic?noColumns', {
369
387
  snapshot: {
370
388
  viewportSize: {
371
389
  width: 500,
372
- height: 100,
390
+ height: 0,
373
391
  },
374
392
  zoom: {
375
393
  skip: true,
@@ -380,7 +398,7 @@ ROUTES.set('input-email/basic?noColumns', {
380
398
  snapshot: {
381
399
  viewportSize: {
382
400
  width: 500,
383
- height: 100,
401
+ height: 0,
384
402
  },
385
403
  zoom: {
386
404
  skip: true,
@@ -391,7 +409,7 @@ ROUTES.set('input-file/basic?noColumns', {
391
409
  snapshot: {
392
410
  viewportSize: {
393
411
  width: 500,
394
- height: 100,
412
+ height: 0,
395
413
  },
396
414
  zoom: {
397
415
  skip: true,
@@ -402,7 +420,18 @@ ROUTES.set('input-number/basic?noColumns', {
402
420
  snapshot: {
403
421
  viewportSize: {
404
422
  width: 500,
405
- height: 100,
423
+ height: 0,
424
+ },
425
+ zoom: {
426
+ skip: true,
427
+ },
428
+ },
429
+ });
430
+ ROUTES.set('input-number/number-formatter', {
431
+ snapshot: {
432
+ viewportSize: {
433
+ width: 500,
434
+ height: 0,
406
435
  },
407
436
  zoom: {
408
437
  skip: true,
@@ -413,7 +442,7 @@ ROUTES.set('input-password/basic?noColumns', {
413
442
  snapshot: {
414
443
  viewportSize: {
415
444
  width: 500,
416
- height: 100,
445
+ height: 0,
417
446
  },
418
447
  zoom: {
419
448
  skip: true,
@@ -424,7 +453,7 @@ ROUTES.set('input-password/show-password?noColumns', {
424
453
  snapshot: {
425
454
  viewportSize: {
426
455
  width: 500,
427
- height: 100,
456
+ height: 0,
428
457
  },
429
458
  zoom: {
430
459
  skip: true,
@@ -438,7 +467,7 @@ ROUTES.set('input-radio/basic?noColumns', {
438
467
  snapshot: {
439
468
  viewportSize: {
440
469
  width: 500,
441
- height: 100,
470
+ height: 0,
442
471
  },
443
472
  zoom: {
444
473
  skip: true,
@@ -449,7 +478,7 @@ ROUTES.set('input-radio/horizontal?noColumns', {
449
478
  snapshot: {
450
479
  viewportSize: {
451
480
  width: 500,
452
- height: 100,
481
+ height: 0,
453
482
  },
454
483
  zoom: {
455
484
  skip: true,
@@ -460,7 +489,7 @@ ROUTES.set('input-radio/object?noColumns', {
460
489
  snapshot: {
461
490
  viewportSize: {
462
491
  width: 500,
463
- height: 100,
492
+ height: 0,
464
493
  },
465
494
  zoom: {
466
495
  skip: true,
@@ -471,7 +500,7 @@ ROUTES.set('input-range/basic?noColumns', {
471
500
  snapshot: {
472
501
  viewportSize: {
473
502
  width: 500,
474
- height: 100,
503
+ height: 0,
475
504
  },
476
505
  zoom: {
477
506
  skip: true,
@@ -482,7 +511,18 @@ ROUTES.set('input-text/basic?noColumns', {
482
511
  snapshot: {
483
512
  viewportSize: {
484
513
  width: 500,
485
- height: 100,
514
+ height: 0,
515
+ },
516
+ zoom: {
517
+ skip: true,
518
+ },
519
+ },
520
+ });
521
+ ROUTES.set('input-text/text-formatter', {
522
+ snapshot: {
523
+ viewportSize: {
524
+ width: 500,
525
+ height: 0,
486
526
  },
487
527
  zoom: {
488
528
  skip: true,
@@ -558,7 +598,7 @@ ROUTES.set('nav/basic', {
558
598
  snapshot: {
559
599
  viewportSize: {
560
600
  width: 400,
561
- height: 100,
601
+ height: 0,
562
602
  },
563
603
  zoom: {
564
604
  skip: true,
@@ -572,6 +612,17 @@ ROUTES.set('pagination/basic', {
572
612
  },
573
613
  },
574
614
  });
615
+ ROUTES.set('popover-button/basic', {
616
+ snapshot: {
617
+ zoom: {
618
+ skip: true,
619
+ },
620
+ viewportSize: {
621
+ width: 200,
622
+ height: 220,
623
+ },
624
+ },
625
+ });
575
626
  ROUTES.set('progress/basic', {
576
627
  snapshot: {
577
628
  zoom: {
@@ -595,7 +646,7 @@ ROUTES.set('select/basic?noColumns', {
595
646
  snapshot: {
596
647
  viewportSize: {
597
648
  width: 500,
598
- height: 100,
649
+ height: 0,
599
650
  },
600
651
  zoom: {
601
652
  skip: true,
@@ -604,7 +655,6 @@ ROUTES.set('select/basic?noColumns', {
604
655
  });
605
656
  ROUTES.set('skip-nav/basic', {
606
657
  snapshot: {
607
- skip: true,
608
658
  zoom: {
609
659
  skip: true,
610
660
  },
@@ -614,7 +664,7 @@ ROUTES.set('spin/basic', {
614
664
  snapshot: {
615
665
  viewportSize: {
616
666
  width: 100,
617
- height: 100,
667
+ height: 0,
618
668
  },
619
669
  zoom: {
620
670
  skip: true,
@@ -628,7 +678,7 @@ ROUTES.set('single-select/basic?noColumns', {
628
678
  snapshot: {
629
679
  viewportSize: {
630
680
  width: 500,
631
- height: 100,
681
+ height: 0,
632
682
  },
633
683
  zoom: {
634
684
  skip: true,
@@ -639,7 +689,7 @@ ROUTES.set('spin/custom', {
639
689
  snapshot: {
640
690
  viewportSize: {
641
691
  width: 100,
642
- height: 100,
692
+ height: 0,
643
693
  },
644
694
  zoom: {
645
695
  skip: true,
@@ -650,7 +700,7 @@ ROUTES.set('spin/cycle', {
650
700
  snapshot: {
651
701
  viewportSize: {
652
702
  width: 100,
653
- height: 100,
703
+ height: 0,
654
704
  },
655
705
  zoom: {
656
706
  skip: true,
@@ -661,7 +711,7 @@ ROUTES.set('split-button/basic', {
661
711
  snapshot: {
662
712
  viewportSize: {
663
713
  width: 300,
664
- height: 100,
714
+ height: 0,
665
715
  },
666
716
  zoom: {
667
717
  skip: true,
@@ -849,7 +899,7 @@ ROUTES.set('tabs/icons-only', {
849
899
  snapshot: {
850
900
  viewportSize: {
851
901
  width: 200,
852
- height: 100,
902
+ height: 0,
853
903
  },
854
904
  zoom: {
855
905
  skip: true,
@@ -867,7 +917,7 @@ ROUTES.set('textarea/basic?noColumns', {
867
917
  snapshot: {
868
918
  viewportSize: {
869
919
  width: 500,
870
- height: 100,
920
+ height: 0,
871
921
  },
872
922
  zoom: {
873
923
  skip: true,
@@ -894,7 +944,7 @@ ROUTES.set('textarea/with-counter', {
894
944
  snapshot: {
895
945
  viewportSize: {
896
946
  width: 200,
897
- height: 100,
947
+ height: 0,
898
948
  },
899
949
  zoom: {
900
950
  skip: true,
@@ -916,7 +966,7 @@ ROUTES.set('toolbar/basic', {
916
966
  snapshot: {
917
967
  viewportSize: {
918
968
  width: 600,
919
- height: 100,
969
+ height: 0,
920
970
  },
921
971
  zoom: {
922
972
  skip: true,
@@ -927,7 +977,7 @@ ROUTES.set('toolbar/disabled', {
927
977
  snapshot: {
928
978
  viewportSize: {
929
979
  width: 300,
930
- height: 100,
980
+ height: 0,
931
981
  },
932
982
  zoom: {
933
983
  skip: true,
@@ -941,7 +991,7 @@ ROUTES.set('tree/basic/home', {
941
991
  snapshot: {
942
992
  viewportSize: {
943
993
  width: 300,
944
- height: 100,
994
+ height: 0,
945
995
  },
946
996
  zoom: {
947
997
  skip: true,
@@ -952,7 +1002,7 @@ ROUTES.set('version/basic', {
952
1002
  snapshot: {
953
1003
  viewportSize: {
954
1004
  width: 150,
955
- height: 100,
1005
+ height: 0,
956
1006
  },
957
1007
  zoom: {
958
1008
  skip: true,
@@ -1017,7 +1067,7 @@ ROUTES.set('scenarios/focus-elements?component=accordion', {
1017
1067
  snapshot: {
1018
1068
  viewportSize: {
1019
1069
  width: 300,
1020
- height: 100,
1070
+ height: 0,
1021
1071
  },
1022
1072
  zoom: {
1023
1073
  skip: true,
@@ -1028,7 +1078,7 @@ ROUTES.set('scenarios/focus-elements?component=button', {
1028
1078
  snapshot: {
1029
1079
  viewportSize: {
1030
1080
  width: 300,
1031
- height: 100,
1081
+ height: 0,
1032
1082
  },
1033
1083
  zoom: {
1034
1084
  skip: true,
@@ -1039,7 +1089,7 @@ ROUTES.set('scenarios/focus-elements?component=buttonLink', {
1039
1089
  snapshot: {
1040
1090
  viewportSize: {
1041
1091
  width: 300,
1042
- height: 100,
1092
+ height: 0,
1043
1093
  },
1044
1094
  zoom: {
1045
1095
  skip: true,
@@ -1050,7 +1100,7 @@ ROUTES.set('scenarios/focus-elements?component=combobox', {
1050
1100
  snapshot: {
1051
1101
  viewportSize: {
1052
1102
  width: 300,
1053
- height: 100,
1103
+ height: 0,
1054
1104
  },
1055
1105
  zoom: {
1056
1106
  skip: true,
@@ -1061,7 +1111,7 @@ ROUTES.set('scenarios/focus-elements?component=details', {
1061
1111
  snapshot: {
1062
1112
  viewportSize: {
1063
1113
  width: 300,
1064
- height: 100,
1114
+ height: 0,
1065
1115
  },
1066
1116
  zoom: {
1067
1117
  skip: true,
@@ -1072,7 +1122,7 @@ ROUTES.set('scenarios/focus-elements?component=inputCheckbox', {
1072
1122
  snapshot: {
1073
1123
  viewportSize: {
1074
1124
  width: 300,
1075
- height: 100,
1125
+ height: 0,
1076
1126
  },
1077
1127
  zoom: {
1078
1128
  skip: true,
@@ -1083,7 +1133,7 @@ ROUTES.set('scenarios/focus-elements?component=inputColor', {
1083
1133
  snapshot: {
1084
1134
  viewportSize: {
1085
1135
  width: 300,
1086
- height: 100,
1136
+ height: 0,
1087
1137
  },
1088
1138
  zoom: {
1089
1139
  skip: true,
@@ -1094,7 +1144,7 @@ ROUTES.set('scenarios/focus-elements?component=inputDate', {
1094
1144
  snapshot: {
1095
1145
  viewportSize: {
1096
1146
  width: 300,
1097
- height: 100,
1147
+ height: 0,
1098
1148
  },
1099
1149
  zoom: {
1100
1150
  skip: true,
@@ -1105,7 +1155,7 @@ ROUTES.set('scenarios/focus-elements?component=inputEmail', {
1105
1155
  snapshot: {
1106
1156
  viewportSize: {
1107
1157
  width: 300,
1108
- height: 100,
1158
+ height: 0,
1109
1159
  },
1110
1160
  zoom: {
1111
1161
  skip: true,
@@ -1116,7 +1166,7 @@ ROUTES.set('scenarios/focus-elements?component=inputFile', {
1116
1166
  snapshot: {
1117
1167
  viewportSize: {
1118
1168
  width: 300,
1119
- height: 100,
1169
+ height: 0,
1120
1170
  },
1121
1171
  zoom: {
1122
1172
  skip: true,
@@ -1127,7 +1177,7 @@ ROUTES.set('scenarios/focus-elements?component=inputFileMultiple', {
1127
1177
  snapshot: {
1128
1178
  viewportSize: {
1129
1179
  width: 300,
1130
- height: 100,
1180
+ height: 0,
1131
1181
  },
1132
1182
  zoom: {
1133
1183
  skip: true,
@@ -1138,7 +1188,7 @@ ROUTES.set('scenarios/focus-elements?component=inputNumber', {
1138
1188
  snapshot: {
1139
1189
  viewportSize: {
1140
1190
  width: 300,
1141
- height: 100,
1191
+ height: 0,
1142
1192
  },
1143
1193
  zoom: {
1144
1194
  skip: true,
@@ -1149,7 +1199,7 @@ ROUTES.set('scenarios/focus-elements?component=inputPassword', {
1149
1199
  snapshot: {
1150
1200
  viewportSize: {
1151
1201
  width: 300,
1152
- height: 100,
1202
+ height: 0,
1153
1203
  },
1154
1204
  zoom: {
1155
1205
  skip: true,
@@ -1160,7 +1210,7 @@ ROUTES.set('scenarios/focus-elements?component=inputRadio', {
1160
1210
  snapshot: {
1161
1211
  viewportSize: {
1162
1212
  width: 300,
1163
- height: 100,
1213
+ height: 0,
1164
1214
  },
1165
1215
  zoom: {
1166
1216
  skip: true,
@@ -1171,7 +1221,7 @@ ROUTES.set('scenarios/focus-elements?component=inputRange', {
1171
1221
  snapshot: {
1172
1222
  viewportSize: {
1173
1223
  width: 300,
1174
- height: 100,
1224
+ height: 0,
1175
1225
  },
1176
1226
  zoom: {
1177
1227
  skip: true,
@@ -1182,7 +1232,7 @@ ROUTES.set('scenarios/focus-elements?component=inputText', {
1182
1232
  snapshot: {
1183
1233
  viewportSize: {
1184
1234
  width: 300,
1185
- height: 100,
1235
+ height: 0,
1186
1236
  },
1187
1237
  zoom: {
1188
1238
  skip: true,
@@ -1193,7 +1243,7 @@ ROUTES.set('scenarios/focus-elements?component=link', {
1193
1243
  snapshot: {
1194
1244
  viewportSize: {
1195
1245
  width: 300,
1196
- height: 100,
1246
+ height: 0,
1197
1247
  },
1198
1248
  zoom: {
1199
1249
  skip: true,
@@ -1204,7 +1254,7 @@ ROUTES.set('scenarios/focus-elements?component=linkButton', {
1204
1254
  snapshot: {
1205
1255
  viewportSize: {
1206
1256
  width: 300,
1207
- height: 100,
1257
+ height: 0,
1208
1258
  },
1209
1259
  zoom: {
1210
1260
  skip: true,
@@ -1215,7 +1265,7 @@ ROUTES.set('scenarios/focus-elements?component=select', {
1215
1265
  snapshot: {
1216
1266
  viewportSize: {
1217
1267
  width: 300,
1218
- height: 100,
1268
+ height: 0,
1219
1269
  },
1220
1270
  zoom: {
1221
1271
  skip: true,
@@ -1226,7 +1276,7 @@ ROUTES.set('scenarios/focus-elements?component=selectMultiple', {
1226
1276
  snapshot: {
1227
1277
  viewportSize: {
1228
1278
  width: 300,
1229
- height: 100,
1279
+ height: 0,
1230
1280
  },
1231
1281
  zoom: {
1232
1282
  skip: true,
@@ -1239,7 +1289,7 @@ ROUTES.set('scenarios/focus-elements?component=singleSelect', {
1239
1289
  },
1240
1290
  viewportSize: {
1241
1291
  width: 300,
1242
- height: 100,
1292
+ height: 0,
1243
1293
  },
1244
1294
  zoom: {
1245
1295
  skip: true,
@@ -1249,7 +1299,7 @@ ROUTES.set('scenarios/focus-elements?component=textarea', {
1249
1299
  snapshot: {
1250
1300
  viewportSize: {
1251
1301
  width: 300,
1252
- height: 100,
1302
+ height: 0,
1253
1303
  },
1254
1304
  zoom: {
1255
1305
  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