feat: align properties with Figma to have a nearly 1:1 relationship #14974
Annotations
11 errors and 1 notice
🔣 Print GitHub Report:
output/react/src/components/brand/brand.spec.tsx#L17
1) [firefox] › brand/brand.spec.tsx:15:6 › DBBrand › should match screenshot ─────────────────────
Error: Screenshot comparison failed:
Expected an image 390px by 40px, received 390px by 24px. 477 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/brand/component/firefox/DBBrand-should-match-screenshot.png
Received: /__w/mono/mono/output/react/test-results/brand-brand-DBBrand-should-match-screenshot-firefox/DBBrand-should-match-screenshot-1-actual.png
Diff: /__w/mono/mono/output/react/test-results/brand-brand-DBBrand-should-match-screenshot-firefox/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. 477 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. 477 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/react/src/components/brand/brand.spec.tsx:17:27
|
🔣 Print GitHub Report:
output/react/src/components/brand/brand.spec.tsx#L17
1) [firefox] › brand/brand.spec.tsx:15:6 › DBBrand › should match screenshot ─────────────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: Screenshot comparison failed:
Expected an image 390px by 40px, received 390px by 24px. 477 pixels (ratio 0.04 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/brand/component/firefox/DBBrand-should-match-screenshot.png
Received: /__w/mono/mono/output/react/test-results/brand-brand-DBBrand-should-match-screenshot-firefox-retry1/DBBrand-should-match-screenshot-1-actual.png
Diff: /__w/mono/mono/output/react/test-results/brand-brand-DBBrand-should-match-screenshot-firefox-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. 477 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. 477 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/react/src/components/brand/brand.spec.tsx:17:27
|
🔣 Print GitHub Report:
output/react/src/components/button/button.spec.tsx#L43
2) [firefox] › button/button.spec.tsx:39:7 › 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/firefox/DBButton-should-only-have-icon-for-variant-outlined.png
Received: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-d66ab-e-icon-for-variant-outlined-firefox/DBButton-should-only-have-icon-for-variant-outlined-1-actual.png
Diff: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-d66ab-e-icon-for-variant-outlined-firefox/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/react/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/react/src/components/button/button.spec.tsx#L43
2) [firefox] › button/button.spec.tsx:39:7 › 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/firefox/DBButton-should-only-have-icon-for-variant-outlined.png
Received: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-d66ab-e-icon-for-variant-outlined-firefox-retry1/DBButton-should-only-have-icon-for-variant-outlined-1-actual.png
Diff: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-d66ab-e-icon-for-variant-outlined-firefox-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/react/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/react/src/components/button/button.spec.tsx#L43
3) [firefox] › button/button.spec.tsx:39:7 › 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/firefox/DBButton-should-only-have-icon-for-variant-brand.png
Received: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-020e3-have-icon-for-variant-brand-firefox/DBButton-should-only-have-icon-for-variant-brand-1-actual.png
Diff: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-020e3-have-icon-for-variant-brand-firefox/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/react/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/react/src/components/button/button.spec.tsx#L43
3) [firefox] › button/button.spec.tsx:39:7 › 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/firefox/DBButton-should-only-have-icon-for-variant-brand.png
Received: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-020e3-have-icon-for-variant-brand-firefox-retry1/DBButton-should-only-have-icon-for-variant-brand-1-actual.png
Diff: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-020e3-have-icon-for-variant-brand-firefox-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/react/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/react/src/components/button/button.spec.tsx#L43
4) [firefox] › button/button.spec.tsx:39:7 › 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/firefox/DBButton-should-only-have-icon-for-variant-filled.png
Received: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-386c2-ave-icon-for-variant-filled-firefox/DBButton-should-only-have-icon-for-variant-filled-1-actual.png
Diff: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-386c2-ave-icon-for-variant-filled-firefox/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/react/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/react/src/components/button/button.spec.tsx#L43
4) [firefox] › button/button.spec.tsx:39:7 › 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/firefox/DBButton-should-only-have-icon-for-variant-filled.png
Received: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-386c2-ave-icon-for-variant-filled-firefox-retry1/DBButton-should-only-have-icon-for-variant-filled-1-actual.png
Diff: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-386c2-ave-icon-for-variant-filled-firefox-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/react/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/react/src/components/button/button.spec.tsx#L43
5) [firefox] › button/button.spec.tsx:39:7 › 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/firefox/DBButton-should-only-have-icon-for-variant-ghost.png
Received: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-27f13-have-icon-for-variant-ghost-firefox/DBButton-should-only-have-icon-for-variant-ghost-1-actual.png
Diff: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-27f13-have-icon-for-variant-ghost-firefox/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/react/src/components/button/button.spec.tsx:43:28
|
🔣 Print GitHub Report:
output/react/src/components/button/button.spec.tsx#L43
5) [firefox] › button/button.spec.tsx:39:7 › 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/firefox/DBButton-should-only-have-icon-for-variant-ghost.png
Received: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-27f13-have-icon-for-variant-ghost-firefox-retry1/DBButton-should-only-have-icon-for-variant-ghost-1-actual.png
Diff: /__w/mono/mono/output/react/test-results/button-button-DBButton-sho-27f13-have-icon-for-variant-ghost-firefox-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/react/src/components/button/button.spec.tsx:43:28
|
👩🔬 Test with Playwright 🎭
Process completed with exit code 1.
|
🔣 Print GitHub Report
10 failed
[firefox] › brand/brand.spec.tsx:15:6 › DBBrand › should match screenshot ──────────────────────
[firefox] › button/button.spec.tsx:39:7 › DBButton › should only have icon for variant outlined
[firefox] › button/button.spec.tsx:39:7 › DBButton › should only have icon for variant brand ───
[firefox] › button/button.spec.tsx:39:7 › DBButton › should only have icon for variant filled ──
[firefox] › button/button.spec.tsx:39:7 › DBButton › should only have icon for variant ghost ───
[firefox] › notification/notification.spec.tsx:15:6 › DBNotification › should match screenshot ─
[firefox] › notification/notification.spec.tsx:23:7 › DBNotification › should match screenshot for semantic critical
[firefox] › notification/notification.spec.tsx:23:7 › DBNotification › should match screenshot for semantic informational
[firefox] › notification/notification.spec.tsx:23:7 › DBNotification › should match screenshot for semantic warning
[firefox] › notification/notification.spec.tsx:23:7 › DBNotification › should match screenshot for semantic successful
3 skipped
111 passed (1.8m)
|
Loading