Error: Snapshot `AvatarStack > renders 1` mismatched - Expected + Received @@ -1,22 +1,22 @@ <DocumentFragment> <div - class="_stacked-avatars_de1988" + class="_stacked-avatars_814665" > <span aria-label="@alice:example.org" - class="_avatar_de1988 _avatar-imageless_de1988" + class="_avatar_814665 _avatar-imageless_814665" data-color="3" data-type="round" role="img" style="--cpd-avatar-size: 32px;" > A </span> <span aria-label="@bob:example.org" - class="_avatar_de1988 _avatar-imageless_de1988" + class="_avatar_814665 _avatar-imageless_814665" data-color="4" data-type="round" role="img" style="--cpd-avatar-size: 32px;" > ❯ src/components/Avatar/AvatarStack.test.tsx:51:26

Error: Snapshot `Avatar > renders the image-less avatar 1` mismatched - Expected + Received @@ -1,9 +1,9 @@ <DocumentFragment> <span aria-label="@bob:example.org" - class="_avatar_de1988 _avatar-imageless_de1988" + class="_avatar_814665 _avatar-imageless_814665" data-color="4" data-type="round" role="img" > B ❯ src/components/Avatar/Avatar.test.tsx:34:26

Error: Snapshot `Alert > renders actions 1` mismatched - Expected + Received @@ -1,13 +1,13 @@ <DocumentFragment> <div - class="_alert_6cfd7b" + class="_alert_be9a30" data-type="info" > <svg aria-hidden="true" - class="_icon_6cfd7b" + class="_icon_be9a30" fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @@ -20,40 +20,40 @@ d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0" fill-rule="evenodd" /> </svg> <div - class="_content_6cfd7b" + class="_content_be9a30" > <div - class="_text-content_6cfd7b" + class="_text-content_be9a30" > <p - class="_typography_489030 _font-body-md-semibold_489030" + class="_typography_61e060 _font-body-md-semibold_61e060" > Long title. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p - class="_typography_489030 _font-body-sm-regular_489030" + class="_typography_61e060 _font-body-sm-regular_61e060" > Actions are vertically centered against alert content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div - class="_actions_6cfd7b" + class="_actions_be9a30" > <button - class="_button_2a1efe" + class="_button_0829c1" data-kind="primary" data-size="lg" role="button" tabindex="0" > Yes </button> <button - class="_button_2a1efe" + class="_button_0829c1" data-kind="primary" data-size="lg" role="button" tabindex="0" > @@ -61,18 +61,18 @@ </button> </div> </div> <button aria-label="Close" - class="_icon-button_e3253e _close_6cfd7b" + class="_icon-button_339b22 _close_be9a30" data-kind="primary" role="button" style="--cpd-icon-button-size: 32px;" tabindex="0" > <div - class="_indicator-icon_ab1fc6" + class="_indicator-icon_849abf" style="--cpd-icon-button-size: 100%;" > <svg fill="currentColor" height="1em" ❯ src/components/Alert/Alert.test.tsx:79:26

Error: Snapshot `Alert > renders info 1` mismatched - Expected + Received @@ -1,13 +1,13 @@ <DocumentFragment> <div - class="_alert_6cfd7b" + class="_alert_be9a30" data-type="info" > <svg aria-hidden="true" - class="_icon_6cfd7b" + class="_icon_be9a30" fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @@ -20,37 +20,37 @@ d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0" fill-rule="evenodd" /> </svg> <div - class="_content_6cfd7b" + class="_content_be9a30" > <div - class="_text-content_6cfd7b" + class="_text-content_be9a30" > <p - class="_typography_489030 _font-body-md-semibold_489030" + class="_typography_61e060 _font-body-md-semibold_61e060" > Title </p> <p - class="_typography_489030 _font-body-sm-regular_489030" + class="_typography_61e060 _font-body-sm-regular_61e060" > Description </p> </div> </div> <button aria-label="Close" - class="_icon-button_e3253e _close_6cfd7b" + class="_icon-button_339b22 _close_be9a30" data-kind="primary" role="button" style="--cpd-icon-button-size: 32px;" tabindex="0" > <div - class="_indicator-icon_ab1fc6" + class="_indicator-icon_849abf" style="--cpd-icon-button-size: 100%;" > <svg fill="currentColor" height="1em" ❯ src/components/Alert/Alert.test.tsx:43:26

Error: Snapshot `Alert > renders critical 1` mismatched - Expected + Received @@ -1,13 +1,13 @@ <DocumentFragment> <div - class="_alert_6cfd7b" + class="_alert_be9a30" data-type="critical" > <svg aria-hidden="true" - class="_icon_6cfd7b" + class="_icon_be9a30" fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @@ -15,37 +15,37 @@ <path d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22" /> </svg> <div - class="_content_6cfd7b" + class="_content_be9a30" > <div - class="_text-content_6cfd7b" + class="_text-content_be9a30" > <p - class="_typography_489030 _font-body-md-semibold_489030" + class="_typography_61e060 _font-body-md-semibold_61e060" > Title </p> <p - class="_typography_489030 _font-body-sm-regular_489030" + class="_typography_61e060 _font-body-sm-regular_61e060" > Description </p> </div> </div> <button aria-label="Close" - class="_icon-button_e3253e _close_6cfd7b" + class="_icon-button_339b22 _close_be9a30" data-kind="primary" role="button" style="--cpd-icon-button-size: 32px;" tabindex="0" > <div - class="_indicator-icon_ab1fc6" + class="_indicator-icon_849abf" style="--cpd-icon-button-size: 100%;" > <svg fill="currentColor" height="1em" ❯ src/components/Alert/Alert.test.tsx:37:26

Error: Snapshot `Alert > renders success 1` mismatched - Expected + Received @@ -1,13 +1,13 @@ <DocumentFragment> <div - class="_alert_6cfd7b" + class="_alert_be9a30" data-type="success" > <svg aria-hidden="true" - class="_icon_6cfd7b" + class="_icon_be9a30" fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @@ -15,37 +15,37 @@ <path d="m10.6 13.8-2.15-2.15a.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275.95.95 0 0 0-.275.7q0 .425.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65a.95.95 0 0 0 .275-.7.95.95 0 0 0-.275-.7.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20" /> </svg> <div - class="_content_6cfd7b" + class="_content_be9a30" > <div - class="_text-content_6cfd7b" + class="_text-content_be9a30" > <p - class="_typography_489030 _font-body-md-semibold_489030" + class="_typography_61e060 _font-body-md-semibold_61e060" > Title </p> <p - class="_typography_489030 _font-body-sm-regular_489030" + class="_typography_61e060 _font-body-sm-regular_61e060" > Description </p> </div> </div> <button aria-label="Close" - class="_icon-button_e3253e _close_6cfd7b" + class="_icon-button_339b22 _close_be9a30" data-kind="primary" role="button" style="--cpd-icon-button-size: 32px;" tabindex="0" > <div - class="_indicator-icon_ab1fc6" + class="_indicator-icon_849abf" style="--cpd-icon-button-size: 100%;" > <svg fill="currentColor" height="1em" ❯ src/components/Alert/Alert.test.tsx:31:26

Error: Snapshot `UnreadCounter > should render no count 1` mismatched - Expected + Received <DocumentFragment> <div - class="_unread-counter_3069f5" + class="_unread-counter_338f41" /> </DocumentFragment> ❯ src/components/ActivityMarker/UnreadCounter.test.tsx:24:26

Error: Snapshot `UnreadCounter > should render 1` mismatched - Expected + Received <DocumentFragment> <span - class="_unread-counter_3069f5" + class="_unread-counter_338f41" > 4 </span> </DocumentFragment> ❯ src/components/ActivityMarker/UnreadCounter.test.tsx:19:26

Error: Snapshot `Unread > should render 1` mismatched - Expected + Received <DocumentFragment> <div - class="_unread_770487" + class="_unread_65464f" > <div /> </div> </DocumentFragment> ❯ src/components/ActivityMarker/Unread.test.tsx:19:26

Error: Snapshot `Pill > should render 1` mismatched - Expected + Received <DocumentFragment> <span - class="_pill_c2da8f" + class="_pill_3de888" > Live </span> </DocumentFragment> ❯ src/components/ActivityMarker/Pill.test.tsx:19:26

The process '/usr/bin/xvfb-run' failed with exit code 1

7) [chromium] › playwright/visual.test.ts:42:5 › Tooltip Non Interactive Trigger @screenshot ───── Error: expect(page).toHaveScreenshot(expected) 1 pixels (ratio 0.01 of all image pixels) are different. Expected: /home/runner/work/compound-web/compound-web/playwright/visual.test.ts-snapshots/Tooltip-Non-Interactive-Trigger-1-chromium-linux.png Received: /home/runner/work/compound-web/compound-web/test-results/visual-Tooltip-Non-Interactive-Trigger-chromium/Tooltip-Non-Interactive-Trigger-1-actual.png Diff: /home/runner/work/compound-web/compound-web/test-results/visual-Tooltip-Non-Interactive-Trigger-chromium/Tooltip-Non-Interactive-Trigger-1-diff.png Call log: - Expect "toHaveScreenshot(Tooltip-Non-Interactive-Trigger-1.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 1 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 - 1 pixels (ratio 0.01 of all image pixels) are different. 48 | waitUntil: "networkidle", 49 | }); > 50 | await expect(page).toMatchScreenshot( | ^ 51 | `${story.title}-${story.name}-1.png`, 52 | { fullPage: true }, 53 | ); at /home/runner/work/compound-web/compound-web/playwright/visual.test.ts:50:28

6) [chromium] › playwright/visual.test.ts:42:5 › Tooltip Interactive Trigger @screenshot ───────── Error: expect(page).toHaveScreenshot(expected) 6 pixels (ratio 0.01 of all image pixels) are different. Expected: /home/runner/work/compound-web/compound-web/playwright/visual.test.ts-snapshots/Tooltip-Interactive-Trigger-1-chromium-linux.png Received: /home/runner/work/compound-web/compound-web/test-results/visual-Tooltip-Interactive-Trigger-chromium/Tooltip-Interactive-Trigger-1-actual.png Diff: /home/runner/work/compound-web/compound-web/test-results/visual-Tooltip-Interactive-Trigger-chromium/Tooltip-Interactive-Trigger-1-diff.png Call log: - Expect "toHaveScreenshot(Tooltip-Interactive-Trigger-1.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 6 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 - 6 pixels (ratio 0.01 of all image pixels) are different. 48 | waitUntil: "networkidle", 49 | }); > 50 | await expect(page).toMatchScreenshot( | ^ 51 | `${story.title}-${story.name}-1.png`, 52 | { fullPage: true }, 53 | ); at /home/runner/work/compound-web/compound-web/playwright/visual.test.ts:50:28

5) [chromium] › playwright/visual.test.ts:42:5 › Tooltip Forced Disabled @screenshot ───────────── Error: expect(page).toHaveScreenshot(expected) 4 pixels (ratio 0.01 of all image pixels) are different. Expected: /home/runner/work/compound-web/compound-web/playwright/visual.test.ts-snapshots/Tooltip-Forced-Disabled-1-chromium-linux.png Received: /home/runner/work/compound-web/compound-web/test-results/visual-Tooltip-Forced-Disabled-chromium/Tooltip-Forced-Disabled-1-actual.png Diff: /home/runner/work/compound-web/compound-web/test-results/visual-Tooltip-Forced-Disabled-chromium/Tooltip-Forced-Disabled-1-diff.png Call log: - Expect "toHaveScreenshot(Tooltip-Forced-Disabled-1.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 4 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 - 4 pixels (ratio 0.01 of all image pixels) are different. 48 | waitUntil: "networkidle", 49 | }); > 50 | await expect(page).toMatchScreenshot( | ^ 51 | `${story.title}-${story.name}-1.png`, 52 | { fullPage: true }, 53 | ); at /home/runner/work/compound-web/compound-web/playwright/visual.test.ts:50:28

4) [chromium] › playwright/visual.test.ts:42:5 › Tooltip Forced Close @screenshot ──────────────── Error: expect(page).toHaveScreenshot(expected) 4 pixels (ratio 0.01 of all image pixels) are different. Expected: /home/runner/work/compound-web/compound-web/playwright/visual.test.ts-snapshots/Tooltip-Forced-Close-1-chromium-linux.png Received: /home/runner/work/compound-web/compound-web/test-results/visual-Tooltip-Forced-Close-chromium/Tooltip-Forced-Close-1-actual.png Diff: /home/runner/work/compound-web/compound-web/test-results/visual-Tooltip-Forced-Close-chromium/Tooltip-Forced-Close-1-diff.png Call log: - Expect "toHaveScreenshot(Tooltip-Forced-Close-1.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 4 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 - 4 pixels (ratio 0.01 of all image pixels) are different. 48 | waitUntil: "networkidle", 49 | }); > 50 | await expect(page).toMatchScreenshot( | ^ 51 | `${story.title}-${story.name}-1.png`, 52 | { fullPage: true }, 53 | ); at /home/runner/work/compound-web/compound-web/playwright/visual.test.ts:50:28

3) [chromium] › playwright/visual.test.ts:42:5 › Form/Controls/EditInPlace Saving @screenshot ──── Error: expect(page).toHaveScreenshot(expected) 1 pixels (ratio 0.01 of all image pixels) are different. Expected: /home/runner/work/compound-web/compound-web/playwright/visual.test.ts-snapshots/Form-Controls-EditInPlace-Saving-1-chromium-linux.png Received: /home/runner/work/compound-web/compound-web/test-results/visual-Form-Controls-EditInPlace-Saving-chromium/Form-Controls-EditInPlace-Saving-1-actual.png Diff: /home/runner/work/compound-web/compound-web/test-results/visual-Form-Controls-EditInPlace-Saving-chromium/Form-Controls-EditInPlace-Saving-1-diff.png Call log: - Expect "toHaveScreenshot(Form-Controls-EditInPlace-Saving-1.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 1 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 - 1 pixels (ratio 0.01 of all image pixels) are different. 48 | waitUntil: "networkidle", 49 | }); > 50 | await expect(page).toMatchScreenshot( | ^ 51 | `${story.title}-${story.name}-1.png`, 52 | { fullPage: true }, 53 | ); at /home/runner/work/compound-web/compound-web/playwright/visual.test.ts:50:28

2) [chromium] › playwright/visual.test.ts:42:5 › Button Primary Destructive @screenshot ────────── Error: expect(page).toHaveScreenshot(expected) 1 pixels (ratio 0.01 of all image pixels) are different. Expected: /home/runner/work/compound-web/compound-web/playwright/visual.test.ts-snapshots/Button-Primary-Destructive-1-chromium-linux.png Received: /home/runner/work/compound-web/compound-web/test-results/visual-Button-Primary-Destructive-chromium/Button-Primary-Destructive-1-actual.png Diff: /home/runner/work/compound-web/compound-web/test-results/visual-Button-Primary-Destructive-chromium/Button-Primary-Destructive-1-diff.png Call log: - Expect "toHaveScreenshot(Button-Primary-Destructive-1.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 1 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 - 1 pixels (ratio 0.01 of all image pixels) are different. 48 | waitUntil: "networkidle", 49 | }); > 50 | await expect(page).toMatchScreenshot( | ^ 51 | `${story.title}-${story.name}-1.png`, 52 | { fullPage: true }, 53 | ); at /home/runner/work/compound-web/compound-web/playwright/visual.test.ts:50:28

1) [chromium] › playwright/visual.test.ts:42:5 › Badge Badge @screenshot ───────────────────────── Error: expect(page).toHaveScreenshot(expected) 5 pixels (ratio 0.01 of all image pixels) are different. Expected: /home/runner/work/compound-web/compound-web/playwright/visual.test.ts-snapshots/Badge-Badge-1-chromium-linux.png Received: /home/runner/work/compound-web/compound-web/test-results/visual-Badge-Badge-chromium/Badge-Badge-1-actual.png Diff: /home/runner/work/compound-web/compound-web/test-results/visual-Badge-Badge-chromium/Badge-Badge-1-diff.png Call log: - Expect "toHaveScreenshot(Badge-Badge-1.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 5 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 - 5 pixels (ratio 0.01 of all image pixels) are different. 48 | waitUntil: "networkidle", 49 | }); > 50 | await expect(page).toMatchScreenshot( | ^ 51 | `${story.title}-${story.name}-1.png`, 52 | { fullPage: true }, 53 | ); at /home/runner/work/compound-web/compound-web/playwright/visual.test.ts:50:28