@public-ui/visual-tests 4.0.0-alpha.0 → 4.0.0-alpha.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.
- package/README.md +36 -8
- package/package.json +20 -14
- package/playwright.config.js +19 -9
- package/src/index.js +16 -15
- package/tests/axe-snapshots.spec.js +21 -10
- package/tests/sample-app.routes.js +1017 -298
- package/tests/theme-snapshots.spec.js +53 -43
|
@@ -1,37 +1,6 @@
|
|
|
1
1
|
import { test, expect } from '@playwright/test';
|
|
2
2
|
import { ROUTES } from './sample-app.routes.js';
|
|
3
3
|
|
|
4
|
-
// https://github.com/microsoft/playwright/issues/7575#issuecomment-1288164474
|
|
5
|
-
export const configureSnapshotPath =
|
|
6
|
-
() =>
|
|
7
|
-
// eslint-disable-next-line no-empty-pattern
|
|
8
|
-
({}, testInfo) => {
|
|
9
|
-
const originalSnapshotPath = testInfo.snapshotPath;
|
|
10
|
-
testInfo.snapshotPath = (snapshotName) => {
|
|
11
|
-
const result = originalSnapshotPath
|
|
12
|
-
.apply(testInfo, [snapshotName])
|
|
13
|
-
|
|
14
|
-
// Remove browser name from snapshot name
|
|
15
|
-
// .replace('-chromium', '')
|
|
16
|
-
// .replace('-firefox', '')
|
|
17
|
-
|
|
18
|
-
// Remove os name from snapshot name
|
|
19
|
-
// .replace('-darwin', '')
|
|
20
|
-
// .replace('-linux', '')
|
|
21
|
-
// .replace('-windows', '')
|
|
22
|
-
|
|
23
|
-
// Remove test counter from snapshot name
|
|
24
|
-
.replace('-1-', '-')
|
|
25
|
-
|
|
26
|
-
// Make different snapshot folder for different themes
|
|
27
|
-
.replace('theme-snapshots.spec.js', `theme-${(process.env.THEME_EXPORT || 'default').toLocaleLowerCase()}`)
|
|
28
|
-
.replace('-snapshots', '');
|
|
29
|
-
return result;
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
test.beforeEach(configureSnapshotPath());
|
|
34
|
-
|
|
35
4
|
// https://playwright.dev/docs/emulation
|
|
36
5
|
test.use({
|
|
37
6
|
colorScheme: 'light',
|
|
@@ -44,25 +13,66 @@ test.use({
|
|
|
44
13
|
},
|
|
45
14
|
});
|
|
46
15
|
|
|
47
|
-
const
|
|
16
|
+
const DEFAULT_SNAPSHOT_OPTIONS = {
|
|
17
|
+
animations: 'disabled',
|
|
18
|
+
fullPage: true,
|
|
19
|
+
maxDiffPixelRatio: 0,
|
|
20
|
+
scale: 'css', // 'css' or 'device'
|
|
21
|
+
timeout: 10000,
|
|
22
|
+
};
|
|
48
23
|
|
|
49
24
|
ROUTES.forEach((options, route) => {
|
|
50
|
-
|
|
25
|
+
// Skip unnecessary snapshot tests
|
|
26
|
+
if (options?.snapshot?.skip === true && options?.snapshot?.zoom?.skip === true) {
|
|
51
27
|
return;
|
|
52
28
|
}
|
|
53
29
|
test(`snapshot for ${route}`, async ({ page }) => {
|
|
54
30
|
const hideMenusParam = `${route.includes('?') ? '&' : '?'}hideMenus`;
|
|
55
|
-
await page.goto(`/#${route}${hideMenusParam}
|
|
56
|
-
|
|
57
|
-
|
|
31
|
+
await page.goto(`/#${route}${hideMenusParam}`);
|
|
32
|
+
await page.waitForLoadState('networkidle');
|
|
33
|
+
await page.addStyleTag({
|
|
34
|
+
content: `
|
|
35
|
+
* {
|
|
36
|
+
transition: none !important;
|
|
37
|
+
animation: none !important;
|
|
38
|
+
}
|
|
39
|
+
`,
|
|
40
|
+
});
|
|
41
|
+
if (options?.snapshot?.viewportSize) {
|
|
42
|
+
await page.setViewportSize(options?.snapshot?.viewportSize);
|
|
58
43
|
}
|
|
59
|
-
if (options?.waitForTimeout) {
|
|
60
|
-
await page.waitForTimeout(options
|
|
44
|
+
if (options?.snapshot?.waitForTimeout) {
|
|
45
|
+
await page.waitForTimeout(options?.snapshot?.waitForTimeout);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* We would like to use a readable name for the snapshot file.
|
|
50
|
+
*/
|
|
51
|
+
const snapshotName = `snapshot-for-${route.replace(/(\/|\?|&|=)/g, '-')}`;
|
|
52
|
+
|
|
53
|
+
const SNAPSHOT_OPTIONS = {
|
|
54
|
+
...DEFAULT_SNAPSHOT_OPTIONS,
|
|
55
|
+
...options?.snapshot?.options,
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
// Skip unnecessary normal tests
|
|
59
|
+
if (options?.snapshot?.skip !== true) {
|
|
60
|
+
await expect(page).toHaveScreenshot(`${snapshotName}.png`, SNAPSHOT_OPTIONS);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Skip unnecessary zoom tests
|
|
64
|
+
if (options?.snapshot?.zoom?.skip !== true) {
|
|
65
|
+
await page.evaluate(() => {
|
|
66
|
+
// eslint-disable-next-line no-undef
|
|
67
|
+
document.body.style.zoom = '400%';
|
|
68
|
+
// document.body.style.transform = 'scale(4)';
|
|
69
|
+
// document.body.style.transformOrigin = 'top left';
|
|
70
|
+
// document.body.style.width = '25vw';
|
|
71
|
+
});
|
|
72
|
+
await expect(page).toHaveScreenshot(`${snapshotName}-zoom.png`, {
|
|
73
|
+
...SNAPSHOT_OPTIONS,
|
|
74
|
+
...options?.snapshot?.zoom?.options,
|
|
75
|
+
});
|
|
61
76
|
}
|
|
62
|
-
await expect(page).toHaveScreenshot({
|
|
63
|
-
fullPage: true,
|
|
64
|
-
maxDiffPixelRatio: 0.01,
|
|
65
|
-
...options,
|
|
66
|
-
});
|
|
67
77
|
});
|
|
68
78
|
});
|