refactor: tag component to improve ux #16413
Annotations
9 errors, 1 warning, and 1 notice
👩🔬 Test showcase with Playwright 🎭
Process completed with exit code 1.
|
🔣 Print GitHub Report:
showcases/e2e/default.ts#L111
1) [firefox] › default.ts:79:2 › DBTag › should match screenshot ─────────────────────────────────
Error: expect(page).toHaveScreenshot(expected)
798 pixels (ratio 0.01 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/tag/showcase/firefox/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png
Received: /__w/mono/mono/showcases/stencil-showcase/test-results/tag-tag-snapshot-DBTag-should-match-screenshot-firefox/DBTag-should-match-screenshot-1-actual.png
Diff: /__w/mono/mono/showcases/stencil-showcase/test-results/tag-tag-snapshot-DBTag-should-match-screenshot-firefox/DBTag-should-match-screenshot-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 30000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 798 pixels (ratio 0.01 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 798 pixels (ratio 0.01 of all image pixels) are different.
109 | }
110 |
> 111 | await expect(page).toHaveScreenshot(config);
| ^
112 | });
113 | };
114 |
at /__w/mono/mono/showcases/e2e/default.ts:111:22
|
🔣 Print GitHub Report:
showcases/e2e/default.ts#L111
1) [firefox] › default.ts:79:2 › DBTag › should match screenshot ─────────────────────────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(page).toHaveScreenshot(expected)
798 pixels (ratio 0.01 of all image pixels) are different.
Expected: /__w/mono/mono/__snapshots__/tag/showcase/firefox/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png
Received: /__w/mono/mono/showcases/stencil-showcase/test-results/tag-tag-snapshot-DBTag-should-match-screenshot-firefox-retry1/DBTag-should-match-screenshot-1-actual.png
Diff: /__w/mono/mono/showcases/stencil-showcase/test-results/tag-tag-snapshot-DBTag-should-match-screenshot-firefox-retry1/DBTag-should-match-screenshot-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 30000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 798 pixels (ratio 0.01 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 798 pixels (ratio 0.01 of all image pixels) are different.
109 | }
110 |
> 111 | await expect(page).toHaveScreenshot(config);
| ^
112 | });
113 | };
114 |
at /__w/mono/mono/showcases/e2e/default.ts:111:22
|
🔣 Print GitHub Report:
showcases/e2e/default.ts#L232
2) [firefox] › default.ts:219:2 › DBTag › should have same aria-snapshot ─────────────────────────
Error: expect(string).toMatchSnapshot(expected)
- main:
- heading "DBTag" [level=1]
- link "Density arrow_up_right\" / \""
- text: Functional (Default) Regular Expressive
- link "Emphasis arrow_up_right\" / \""
- text: (Default) Weak Origin Strong
- link "Semantic arrow_up_right\" / \""
- text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong
- link "Behaviour arrow_up_right\" / \""
- group "Behaviour":
- text: (Default) Static
- button "Interactive Button"
- link "Interactive Link"
- checkbox "Interactive Checkbox circle\" / \"": "on"
- text: Interactive Checkbox circle" / "
- radio "Interactive Radio 1 circle\" / \"": "on"
- text: Interactive Radio 1 circle" / "
- radio "Interactive Radio 2 circle\" / \"": "on"
- text: Interactive Radio 2 circle" / " Removeable
- button "Remove tag"
- link "State arrow_up_right\" / \""
- group "State":
- checkbox "(Default) Unchecked circle\" / \"": "on"
- text: (Default) Unchecked circle" / "
- checkbox "Checked check_circle\" / \"" [checked]: "on"
- text: Checked check_circle" / "
- checkbox "Disabled check_circle\" / \"" [checked] [disabled]: "on"
- text: Disabled check_circle" / "
- link "Content arrow_up_right\" / \""
- text: (Default) Text Icon Icon & Text Swap Slot Content Slot
- link "Show Check State arrow_up_right\" / \""
- checkbox "(Default )True circle\" / \"": "on"
- text: (Default )True circle" / "
- checkbox "False circle\" / \"": "on"
- text: "False circle" / "
- link "Overflow arrow_up_right\" / \""
- text: (Default) No Overflow With Overflow (max-width)
- link "Example Strong arrow_up_right\" / \""
- group "Example Strong":
- button "Interactive Strong Button with Icon"
- link "Interactive Strong Link with Icon"
- checkbox "Interactive Strong Checkbox with Icon circle\" / \"": "on"
- text: Interactive Strong Checkbox with Icon circle" / "
- radio "Interactive Strong Radio 1 with Icon circle\" / \"": "on"
- text: Interactive Strong Radio 1 with Icon circle" / "
- radio "Interactive Strong Radio 2 with Icon circle\" / \"": "on"
- text: Interactive Strong Radio 2 with Icon circle" / "
- link "Example Origin arrow_up_right\" / \""
- group "Example Origin":
- button "Interactive Origin Button with Icon"
- link "Interactive Origin Link with Icon"
- checkbox "Interactive Origin Checkbox with Icon circle\" / \"": "on"
- text: Interactive Origin Checkbox with Icon circle" / "
- radio "Interactive Origin Radio 1 with Icon circle\" / \"": "on"
- text: Interactive Origin Radio 1 with Icon circle" / "
- radio "Interactive Origin Radio 2 with Icon circle\" / \"": "on"
- text: Interactive Origin Radio 2 with Icon circle" / "
Expected: /__w/mono/mono/__snapshots__/tag/showcase/firefox/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml
Received: /__w/mono/mono/showcases/stencil-showcase/test-results/tag-tag-snapshot-DBTag-should-have-same-aria-snapshot-firefox/should-have-same-aria-snapshot-actual.yaml
230 |
231 | const snapshot = await page.locator('main').ariaSnapshot();
> 232 | expect(snapshot).toMatchSnapshot(`${title}.yaml`);
| ^
233 | });
234 | };
235 |
at /__w/mono/mono/showcases/e2e/default.ts:232:20
|
🔣 Print GitHub Report:
showcases/e2e/default.ts#L232
2) [firefox] › default.ts:219:2 › DBTag › should have same aria-snapshot ─────────────────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(string).toMatchSnapshot(expected)
- main:
- heading "DBTag" [level=1]
- link "Density arrow_up_right\" / \""
- text: Functional (Default) Regular Expressive
- link "Emphasis arrow_up_right\" / \""
- text: (Default) Weak Origin Strong
- link "Semantic arrow_up_right\" / \""
- text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong
- link "Behaviour arrow_up_right\" / \""
- group "Behaviour":
- text: (Default) Static
- button "Interactive Button"
- link "Interactive Link"
- checkbox "Interactive Checkbox circle\" / \"": "on"
- text: Interactive Checkbox circle" / "
- radio "Interactive Radio 1 circle\" / \"": "on"
- text: Interactive Radio 1 circle" / "
- radio "Interactive Radio 2 circle\" / \"": "on"
- text: Interactive Radio 2 circle" / " Removeable
- button "Remove tag"
- link "State arrow_up_right\" / \""
- group "State":
- checkbox "(Default) Unchecked circle\" / \"": "on"
- text: (Default) Unchecked circle" / "
- checkbox "Checked check_circle\" / \"" [checked]: "on"
- text: Checked check_circle" / "
- checkbox "Disabled check_circle\" / \"" [checked] [disabled]: "on"
- text: Disabled check_circle" / "
- link "Content arrow_up_right\" / \""
- text: (Default) Text Icon Icon & Text Swap Slot Content Slot
- link "Show Check State arrow_up_right\" / \""
- checkbox "(Default )True circle\" / \"": "on"
- text: (Default )True circle" / "
- checkbox "False circle\" / \"": "on"
- text: "False circle" / "
- link "Overflow arrow_up_right\" / \""
- text: (Default) No Overflow With Overflow (max-width)
- link "Example Strong arrow_up_right\" / \""
- group "Example Strong":
- button "Interactive Strong Button with Icon"
- link "Interactive Strong Link with Icon"
- checkbox "Interactive Strong Checkbox with Icon circle\" / \"": "on"
- text: Interactive Strong Checkbox with Icon circle" / "
- radio "Interactive Strong Radio 1 with Icon circle\" / \"": "on"
- text: Interactive Strong Radio 1 with Icon circle" / "
- radio "Interactive Strong Radio 2 with Icon circle\" / \"": "on"
- text: Interactive Strong Radio 2 with Icon circle" / "
- link "Example Origin arrow_up_right\" / \""
- group "Example Origin":
- button "Interactive Origin Button with Icon"
- link "Interactive Origin Link with Icon"
- checkbox "Interactive Origin Checkbox with Icon circle\" / \"": "on"
- text: Interactive Origin Checkbox with Icon circle" / "
- radio "Interactive Origin Radio 1 with Icon circle\" / \"": "on"
- text: Interactive Origin Radio 1 with Icon circle" / "
- radio "Interactive Origin Radio 2 with Icon circle\" / \"": "on"
- text: Interactive Origin Radio 2 with Icon circle" / "
Expected: /__w/mono/mono/__snapshots__/tag/showcase/firefox/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml
Received: /__w/mono/mono/showcases/stencil-showcase/test-results/tag-tag-snapshot-DBTag-should-have-same-aria-snapshot-firefox-retry1/should-have-same-aria-snapshot-actual.yaml
230 |
231 | const snapshot = await page.locator('main').ariaSnapshot();
> 232 | expect(snapshot).toMatchSnapshot(`${title}.yaml`);
| ^
233 | });
234 | };
|
🔣 Print GitHub Report:
showcases/e2e/default.ts#L111
3) [webkit] › default.ts:79:2 › DBAccordion › should match screenshot ────────────────────────────
Error: expect(page).toHaveScreenshot(expected)
Expected an image 1280px by 1737px, received 1280px by 1753px.
Expected: /__w/mono/mono/__snapshots__/accordion/showcase/webkit/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png
Received: /__w/mono/mono/showcases/stencil-showcase/test-results/accordion-accordion-snapsh-2317d-ion-should-match-screenshot-webkit/DBAccordion-should-match-screenshot-1-actual.png
Diff: /__w/mono/mono/showcases/stencil-showcase/test-results/accordion-accordion-snapsh-2317d-ion-should-match-screenshot-webkit/DBAccordion-should-match-screenshot-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 30000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- Expected an image 1280px by 1737px, received 1280px by 1753px.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- Expected an image 1280px by 1737px, received 1280px by 1753px.
109 | }
110 |
> 111 | await expect(page).toHaveScreenshot(config);
| ^
112 | });
113 | };
114 |
at /__w/mono/mono/showcases/e2e/default.ts:111:22
|
🔣 Print GitHub Report:
showcases/e2e/default.ts#L111
4) [webkit] › default.ts:79:2 › DBAccordionItem › should match screenshot ────────────────────────
Error: expect(page).toHaveScreenshot(expected)
Expected an image 1280px by 1655px, received 1280px by 1671px.
Expected: /__w/mono/mono/__snapshots__/accordion-item/showcase/webkit/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png
Received: /__w/mono/mono/showcases/stencil-showcase/test-results/accordion-item-accordion-i-5f968-tem-should-match-screenshot-webkit/DBAccordionItem-should-match-screenshot-1-actual.png
Diff: /__w/mono/mono/showcases/stencil-showcase/test-results/accordion-item-accordion-i-5f968-tem-should-match-screenshot-webkit/DBAccordionItem-should-match-screenshot-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 30000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- Expected an image 1280px by 1655px, received 1280px by 1671px.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- Expected an image 1280px by 1655px, received 1280px by 1671px.
109 | }
110 |
> 111 | await expect(page).toHaveScreenshot(config);
| ^
112 | });
113 | };
114 |
at /__w/mono/mono/showcases/e2e/default.ts:111:22
|
🔣 Print GitHub Report:
showcases/e2e/default.ts#L111
5) [webkit] › default.ts:79:2 › DBBrand › should match screenshot ────────────────────────────────
Error: expect(page).toHaveScreenshot(expected)
Expected an image 1280px by 1330px, received 1280px by 1346px.
Expected: /__w/mono/mono/__snapshots__/brand/showcase/webkit/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png
Received: /__w/mono/mono/showcases/stencil-showcase/test-results/brand-brand-snapshot-DBBrand-should-match-screenshot-webkit/DBBrand-should-match-screenshot-1-actual.png
Diff: /__w/mono/mono/showcases/stencil-showcase/test-results/brand-brand-snapshot-DBBrand-should-match-screenshot-webkit/DBBrand-should-match-screenshot-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 30000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- Expected an image 1280px by 1330px, received 1280px by 1346px.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- Expected an image 1280px by 1330px, received 1280px by 1346px.
109 | }
110 |
> 111 | await expect(page).toHaveScreenshot(config);
| ^
112 | });
113 | };
114 |
at /__w/mono/mono/showcases/e2e/default.ts:111:22
|
🔣 Print GitHub Report:
showcases/e2e/default.ts#L111
6) [webkit] › default.ts:79:2 › DBButton › should match screenshot ───────────────────────────────
Error: expect(page).toHaveScreenshot(expected)
Expected an image 1280px by 2955px, received 1280px by 2987px.
Expected: /__w/mono/mono/__snapshots__/button/showcase/webkit/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png
Received: /__w/mono/mono/showcases/stencil-showcase/test-results/button-button-snapshot-DBButton-should-match-screenshot-webkit/DBButton-should-match-screenshot-1-actual.png
Diff: /__w/mono/mono/showcases/stencil-showcase/test-results/button-button-snapshot-DBButton-should-match-screenshot-webkit/DBButton-should-match-screenshot-1-diff.png
Call log:
- expect.toHaveScreenshot with timeout 30000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- Expected an image 1280px by 2955px, received 1280px by 2987px.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- Expected an image 1280px by 2955px, received 1280px by 2987px.
109 | }
110 |
> 111 | await expect(page).toHaveScreenshot(config);
| ^
112 | });
113 | };
114 |
at /__w/mono/mono/showcases/e2e/default.ts:111:22
|
🆙 Upload aChecker results
No files were found with the provided path: ./showcases/stencil-showcase-showcase/results. No artifacts will be uploaded.
|
🔣 Print GitHub Report
2 failed
[firefox] › default.ts:79:2 › DBTag › should match screenshot ──────────────────────────────────
[firefox] › default.ts:219:2 › DBTag › should have same aria-snapshot ──────────────────────────
4 flaky
[webkit] › default.ts:79:2 › DBAccordion › should match screenshot ─────────────────────────────
[webkit] › default.ts:79:2 › DBAccordionItem › should match screenshot ─────────────────────────
[webkit] › default.ts:79:2 › DBBrand › should match screenshot ─────────────────────────────────
[webkit] › default.ts:79:2 › DBButton › should match screenshot ────────────────────────────────
57 skipped
78 passed (3.4m)
|
Loading