feat: align properties with Figma to have a nearly 1:1 relationship #14974
Annotations
11 errors and 1 notice
👩🔬 Test with Playwright 🎭
Process completed with exit code 1.
|
🔣 Print GitHub Report:
output/vue/src/components/brand/brand.spec.tsx#L17
1) [chromium] › brand/brand.spec.tsx:15:2 › DBBrand › should match screenshot ────────────────────
Error: Screenshot comparison failed:
Expected an image 390px by 40px, received 390px by 24px. 569 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/brand/component/chromium/DBBrand-should-match-screenshot.png
Received: /__w/mono/mono/output/vue/test-results/brand-brand-DBBrand-should-match-screenshot-chromium/DBBrand-should-match-screenshot-1-actual.png
Diff: /__w/mono/mono/output/vue/test-results/brand-brand-DBBrand-should-match-screenshot-chromium/DBBrand-should-match-screenshot-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <div data-icon="db" class="db-brand" data-hide-icon="true">Test</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 390px by 40px, received 390px by 24px. 569 pixels (ratio 0.04 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <div data-icon="db" class="db-brand" data-hide-icon="true">Test</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 390px by 40px, received 390px by 24px. 569 pixels (ratio 0.04 of all image pixels) are different.
15 | test(`should match screenshot`, async ({ mount }) => {
16 | const component = await mount(comp);
> 17 | await expect(component).toHaveScreenshot();
| ^
18 | });
19 | };
20 | const testA11y = () => {
at /__w/mono/mono/output/vue/src/components/brand/brand.spec.tsx:17:27
|
🔣 Print GitHub Report:
output/vue/src/components/brand/brand.spec.tsx#L17
1) [chromium] › brand/brand.spec.tsx:15:2 › DBBrand › should match screenshot ────────────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: Screenshot comparison failed:
Expected an image 390px by 40px, received 390px by 24px. 569 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/brand/component/chromium/DBBrand-should-match-screenshot.png
Received: /__w/mono/mono/output/vue/test-results/brand-brand-DBBrand-should-match-screenshot-chromium-retry1/DBBrand-should-match-screenshot-1-actual.png
Diff: /__w/mono/mono/output/vue/test-results/brand-brand-DBBrand-should-match-screenshot-chromium-retry1/DBBrand-should-match-screenshot-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <div data-icon="db" class="db-brand" data-hide-icon="true">Test</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 390px by 40px, received 390px by 24px. 569 pixels (ratio 0.04 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <div data-icon="db" class="db-brand" data-hide-icon="true">Test</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 390px by 40px, received 390px by 24px. 569 pixels (ratio 0.04 of all image pixels) are different.
15 | test(`should match screenshot`, async ({ mount }) => {
16 | const component = await mount(comp);
> 17 | await expect(component).toHaveScreenshot();
| ^
18 | });
19 | };
20 | const testA11y = () => {
at /__w/mono/mono/output/vue/src/components/brand/brand.spec.tsx:17:27
|
🔣 Print GitHub Report:
output/vue/src/components/button/button.spec.tsx#L43
2) [chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant outlined
Error: Screenshot comparison failed:
52 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-outlined.png
Received: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-d66ab-e-icon-for-variant-outlined-chromium/DBButton-should-only-have-icon-for-variant-outlined-1-actual.png
Diff: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-d66ab-e-icon-for-variant-outlined-chromium/DBButton-should-only-have-icon-for-variant-outlined-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-hide-icon="true" data-variant="outlined">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- 52 pixels (ratio 0.04 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-hide-icon="true" data-variant="outlined">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- 52 pixels (ratio 0.04 of all image pixels) are different.
41 | }) => {
42 | const component = await mount(variantIconButton);
> 43 | await expect(component).toHaveScreenshot();
| ^
44 | });
45 | }
46 | };
at /__w/mono/mono/output/vue/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/vue/src/components/button/button.spec.tsx#L43
2) [chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant outlined
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: Screenshot comparison failed:
52 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-outlined.png
Received: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-d66ab-e-icon-for-variant-outlined-chromium-retry1/DBButton-should-only-have-icon-for-variant-outlined-1-actual.png
Diff: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-d66ab-e-icon-for-variant-outlined-chromium-retry1/DBButton-should-only-have-icon-for-variant-outlined-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-hide-icon="true" data-variant="outlined">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- 52 pixels (ratio 0.04 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-hide-icon="true" data-variant="outlined">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- 52 pixels (ratio 0.04 of all image pixels) are different.
41 | }) => {
42 | const component = await mount(variantIconButton);
> 43 | await expect(component).toHaveScreenshot();
| ^
44 | });
45 | }
46 | };
at /__w/mono/mono/output/vue/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/vue/src/components/button/button.spec.tsx#L43
3) [chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant brand ─
Error: Screenshot comparison failed:
49 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-brand.png
Received: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-020e3-have-icon-for-variant-brand-chromium/DBButton-should-only-have-icon-for-variant-brand-1-actual.png
Diff: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-020e3-have-icon-for-variant-brand-chromium/DBButton-should-only-have-icon-for-variant-brand-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-variant="brand" data-hide-icon="true">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- 49 pixels (ratio 0.04 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-variant="brand" data-hide-icon="true">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- 49 pixels (ratio 0.04 of all image pixels) are different.
41 | }) => {
42 | const component = await mount(variantIconButton);
> 43 | await expect(component).toHaveScreenshot();
| ^
44 | });
45 | }
46 | };
at /__w/mono/mono/output/vue/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/vue/src/components/button/button.spec.tsx#L43
3) [chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant brand ─
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: Screenshot comparison failed:
49 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-brand.png
Received: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-020e3-have-icon-for-variant-brand-chromium-retry1/DBButton-should-only-have-icon-for-variant-brand-1-actual.png
Diff: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-020e3-have-icon-for-variant-brand-chromium-retry1/DBButton-should-only-have-icon-for-variant-brand-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-variant="brand" data-hide-icon="true">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- 49 pixels (ratio 0.04 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-variant="brand" data-hide-icon="true">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- 49 pixels (ratio 0.04 of all image pixels) are different.
41 | }) => {
42 | const component = await mount(variantIconButton);
> 43 | await expect(component).toHaveScreenshot();
| ^
44 | });
45 | }
46 | };
at /__w/mono/mono/output/vue/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/vue/src/components/button/button.spec.tsx#L43
4) [chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant filled
Error: Screenshot comparison failed:
52 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-filled.png
Received: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-386c2-ave-icon-for-variant-filled-chromium/DBButton-should-only-have-icon-for-variant-filled-1-actual.png
Diff: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-386c2-ave-icon-for-variant-filled-chromium/DBButton-should-only-have-icon-for-variant-filled-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-hide-icon="true" data-variant="filled">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- 52 pixels (ratio 0.04 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-hide-icon="true" data-variant="filled">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- 52 pixels (ratio 0.04 of all image pixels) are different.
41 | }) => {
42 | const component = await mount(variantIconButton);
> 43 | await expect(component).toHaveScreenshot();
| ^
44 | });
45 | }
46 | };
at /__w/mono/mono/output/vue/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/vue/src/components/button/button.spec.tsx#L43
4) [chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant filled
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: Screenshot comparison failed:
52 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-filled.png
Received: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-386c2-ave-icon-for-variant-filled-chromium-retry1/DBButton-should-only-have-icon-for-variant-filled-1-actual.png
Diff: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-386c2-ave-icon-for-variant-filled-chromium-retry1/DBButton-should-only-have-icon-for-variant-filled-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-hide-icon="true" data-variant="filled">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- 52 pixels (ratio 0.04 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-hide-icon="true" data-variant="filled">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- 52 pixels (ratio 0.04 of all image pixels) are different.
41 | }) => {
42 | const component = await mount(variantIconButton);
> 43 | await expect(component).toHaveScreenshot();
| ^
44 | });
45 | }
46 | };
at /__w/mono/mono/output/vue/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/vue/src/components/button/button.spec.tsx#L43
5) [chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant ghost ─
Error: Screenshot comparison failed:
52 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-ghost.png
Received: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-27f13-have-icon-for-variant-ghost-chromium/DBButton-should-only-have-icon-for-variant-ghost-1-actual.png
Diff: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-27f13-have-icon-for-variant-ghost-chromium/DBButton-should-only-have-icon-for-variant-ghost-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-variant="ghost" data-hide-icon="true">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- 52 pixels (ratio 0.04 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-variant="ghost" data-hide-icon="true">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- 52 pixels (ratio 0.04 of all image pixels) are different.
41 | }) => {
42 | const component = await mount(variantIconButton);
> 43 | await expect(component).toHaveScreenshot();
| ^
44 | });
45 | }
46 | };
at /__w/mono/mono/output/vue/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/vue/src/components/button/button.spec.tsx#L43
5) [chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant ghost ─
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: Screenshot comparison failed:
52 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-ghost.png
Received: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-27f13-have-icon-for-variant-ghost-chromium-retry1/DBButton-should-only-have-icon-for-variant-ghost-1-actual.png
Diff: /__w/mono/mono/output/vue/test-results/button-button-DBButton-sho-27f13-have-icon-for-variant-ghost-chromium-retry1/DBButton-should-only-have-icon-for-variant-ghost-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-variant="ghost" data-hide-icon="true">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- 52 pixels (ratio 0.04 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root').locator('internal:control=component')
- locator resolved to <button type="button" class="db-button" data-icon="person" data-no-text="true" data-variant="ghost" data-hide-icon="true">User</button>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- 52 pixels (ratio 0.04 of all image pixels) are different.
41 | }) => {
42 | const component = await mount(variantIconButton);
> 43 | await expect(component).toHaveScreenshot();
| ^
44 | });
45 | }
46 | };
at /__w/mono/mono/output/vue/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report
10 failed
[chromium] › brand/brand.spec.tsx:15:2 › DBBrand › should match screenshot ─────────────────────
[chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant outlined
[chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant brand ──
[chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant filled ─
[chromium] › button/button.spec.tsx:39:3 › DBButton › should only have icon for variant ghost ──
[chromium] › notification/notification.spec.tsx:15:2 › DBNotification › should match screenshot
[chromium] › notification/notification.spec.tsx:23:3 › DBNotification › should match screenshot for semantic critical
[chromium] › notification/notification.spec.tsx:23:3 › DBNotification › should match screenshot for semantic informational
[chromium] › notification/notification.spec.tsx:23:3 › DBNotification › should match screenshot for semantic warning
[chromium] › notification/notification.spec.tsx:23:3 › DBNotification › should match screenshot for semantic successful
3 skipped
111 passed (58.7s)
|
Loading