Skip to content

feat: Theming - Spectrum variable mapping and light theme #2046

feat: Theming - Spectrum variable mapping and light theme

feat: Theming - Spectrum variable mapping and light theme #2046

Triggered via pull request December 14, 2023 21:53
Status Failure
Total duration 24m 14s
Artifacts 2
This run and associated checks have been archived and are scheduled for deletion. Learn more about checks retention

e2e.yml

on: pull_request
Fit to window
Zoom out
Zoom in

Annotations

10 errors, 5 warnings, and 1 notice
[chromium] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors: tests/styleguide.spec.ts#L82
1) [chromium] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors Error: Screenshot comparison failed: 14582 pixels (ratio 0.02 of all image pixels) are different. Call log: - expect.toHaveScreenshot(component-colors.png) with timeout 15000ms - verifying given screenshot expectation - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - 14582 pixels (ratio 0.02 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - captured a stable screenshot - 14582 pixels (ratio 0.02 of all image pixels) are different. Expected: /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts-snapshots/component-colors-chromium-linux.png Received: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-chromium/component-colors-actual.png Diff: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-chromium/component-colors-diff.png 80 | const sampleSection = page.locator(`#${id}`); 81 | > 82 | await expect(sampleSection).toHaveScreenshot( | ^ 83 | `${id.replace(/^sample-section-/, '')}.png` 84 | ); 85 | }); at /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts:82:33
[chromium] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors: tests/styleguide.spec.ts#L82
1) [chromium] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: Screenshot comparison failed: 14582 pixels (ratio 0.02 of all image pixels) are different. Call log: - expect.toHaveScreenshot(component-colors.png) with timeout 15000ms - verifying given screenshot expectation - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - 14582 pixels (ratio 0.02 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - captured a stable screenshot - 14582 pixels (ratio 0.02 of all image pixels) are different. Expected: /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts-snapshots/component-colors-chromium-linux.png Received: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-chromium-retry1/component-colors-actual.png Diff: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-chromium-retry1/component-colors-diff.png 80 | const sampleSection = page.locator(`#${id}`); 81 | > 82 | await expect(sampleSection).toHaveScreenshot( | ^ 83 | `${id.replace(/^sample-section-/, '')}.png` 84 | ); 85 | }); at /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts:82:33
[chromium] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-spectrum-overlays: tests/styleguide.spec.ts#L82
2) [chromium] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-spectrum-overlays Error: Screenshot comparison failed: Expected an image 1112px by 58px, received 1112px by 69px. 12420 pixels (ratio 0.17 of all image pixels) are different. Call log: - expect.toHaveScreenshot(spectrum-overlays.png) with timeout 15000ms - verifying given screenshot expectation - waiting for locator('#sample-section-spectrum-overlays') - locator resolved to <div class="sample-section" id="sample-section-spectr…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - Expected an image 1112px by 58px, received 1112px by 69px. 12420 pixels (ratio 0.17 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#sample-section-spectrum-overlays') - locator resolved to <div class="sample-section" id="sample-section-spectr…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - captured a stable screenshot - Expected an image 1112px by 58px, received 1112px by 69px. 12420 pixels (ratio 0.17 of all image pixels) are different. Expected: /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts-snapshots/spectrum-overlays-chromium-linux.png Received: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-spectrum-overlays-chromium/spectrum-overlays-actual.png Diff: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-spectrum-overlays-chromium/spectrum-overlays-diff.png 80 | const sampleSection = page.locator(`#${id}`); 81 | > 82 | await expect(sampleSection).toHaveScreenshot( | ^ 83 | `${id.replace(/^sample-section-/, '')}.png` 84 | ); 85 | }); at /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts:82:33
[chromium] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-spectrum-overlays: tests/styleguide.spec.ts#L82
2) [chromium] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-spectrum-overlays Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: Screenshot comparison failed: Expected an image 1112px by 58px, received 1112px by 69px. 12420 pixels (ratio 0.17 of all image pixels) are different. Call log: - expect.toHaveScreenshot(spectrum-overlays.png) with timeout 15000ms - verifying given screenshot expectation - waiting for locator('#sample-section-spectrum-overlays') - locator resolved to <div class="sample-section" id="sample-section-spectr…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - Expected an image 1112px by 58px, received 1112px by 69px. 12420 pixels (ratio 0.17 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#sample-section-spectrum-overlays') - locator resolved to <div class="sample-section" id="sample-section-spectr…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - captured a stable screenshot - Expected an image 1112px by 58px, received 1112px by 69px. 12420 pixels (ratio 0.17 of all image pixels) are different. Expected: /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts-snapshots/spectrum-overlays-chromium-linux.png Received: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-spectrum-overlays-chromium-retry1/spectrum-overlays-actual.png Diff: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-spectrum-overlays-chromium-retry1/spectrum-overlays-diff.png 80 | const sampleSection = page.locator(`#${id}`); 81 | > 82 | await expect(sampleSection).toHaveScreenshot( | ^ 83 | `${id.replace(/^sample-section-/, '')}.png` 84 | ); 85 | }); at /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts:82:33
[firefox] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors: tests/styleguide.spec.ts#L82
3) [firefox] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors Error: Screenshot comparison failed: 14594 pixels (ratio 0.02 of all image pixels) are different. Call log: - expect.toHaveScreenshot(component-colors.png) with timeout 15000ms - verifying given screenshot expectation - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - 14594 pixels (ratio 0.02 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - captured a stable screenshot - 14594 pixels (ratio 0.02 of all image pixels) are different. Expected: /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png Received: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-firefox/component-colors-actual.png Diff: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-firefox/component-colors-diff.png 80 | const sampleSection = page.locator(`#${id}`); 81 | > 82 | await expect(sampleSection).toHaveScreenshot( | ^ 83 | `${id.replace(/^sample-section-/, '')}.png` 84 | ); 85 | }); at /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts:82:33
[firefox] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors: tests/styleguide.spec.ts#L82
3) [firefox] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: Screenshot comparison failed: 14594 pixels (ratio 0.02 of all image pixels) are different. Call log: - expect.toHaveScreenshot(component-colors.png) with timeout 15000ms - verifying given screenshot expectation - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - 14594 pixels (ratio 0.02 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - captured a stable screenshot - 14594 pixels (ratio 0.02 of all image pixels) are different. Expected: /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png Received: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-firefox-retry1/component-colors-actual.png Diff: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-firefox-retry1/component-colors-diff.png 80 | const sampleSection = page.locator(`#${id}`); 81 | > 82 | await expect(sampleSection).toHaveScreenshot( | ^ 83 | `${id.replace(/^sample-section-/, '')}.png` 84 | ); 85 | }); at /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts:82:33
[firefox] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-spectrum-overlays: tests/styleguide.spec.ts#L82
4) [firefox] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-spectrum-overlays Error: Screenshot comparison failed: Expected an image 1112px by 58px, received 1112px by 69px. 12428 pixels (ratio 0.17 of all image pixels) are different. Call log: - expect.toHaveScreenshot(spectrum-overlays.png) with timeout 15000ms - verifying given screenshot expectation - waiting for locator('#sample-section-spectrum-overlays') - locator resolved to <div class="sample-section" id="sample-section-spectr…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - Expected an image 1112px by 58px, received 1112px by 69px. 12428 pixels (ratio 0.17 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#sample-section-spectrum-overlays') - locator resolved to <div class="sample-section" id="sample-section-spectr…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - captured a stable screenshot - Expected an image 1112px by 58px, received 1112px by 69px. 12428 pixels (ratio 0.17 of all image pixels) are different. Expected: /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts-snapshots/spectrum-overlays-firefox-linux.png Received: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-spectrum-overlays-firefox/spectrum-overlays-actual.png Diff: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-spectrum-overlays-firefox/spectrum-overlays-diff.png 80 | const sampleSection = page.locator(`#${id}`); 81 | > 82 | await expect(sampleSection).toHaveScreenshot( | ^ 83 | `${id.replace(/^sample-section-/, '')}.png` 84 | ); 85 | }); at /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts:82:33
[firefox] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-spectrum-overlays: tests/styleguide.spec.ts#L82
4) [firefox] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-spectrum-overlays Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: Screenshot comparison failed: Expected an image 1112px by 58px, received 1112px by 69px. 12428 pixels (ratio 0.17 of all image pixels) are different. Call log: - expect.toHaveScreenshot(spectrum-overlays.png) with timeout 15000ms - verifying given screenshot expectation - waiting for locator('#sample-section-spectrum-overlays') - locator resolved to <div class="sample-section" id="sample-section-spectr…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - Expected an image 1112px by 58px, received 1112px by 69px. 12428 pixels (ratio 0.17 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#sample-section-spectrum-overlays') - locator resolved to <div class="sample-section" id="sample-section-spectr…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - captured a stable screenshot - Expected an image 1112px by 58px, received 1112px by 69px. 12428 pixels (ratio 0.17 of all image pixels) are different. Expected: /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts-snapshots/spectrum-overlays-firefox-linux.png Received: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-spectrum-overlays-firefox-retry1/spectrum-overlays-actual.png Diff: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-spectrum-overlays-firefox-retry1/spectrum-overlays-diff.png 80 | const sampleSection = page.locator(`#${id}`); 81 | > 82 | await expect(sampleSection).toHaveScreenshot( | ^ 83 | `${id.replace(/^sample-section-/, '')}.png` 84 | ); 85 | }); at /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts:82:33
[webkit] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors: tests/styleguide.spec.ts#L82
5) [webkit] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors Error: Screenshot comparison failed: 14601 pixels (ratio 0.02 of all image pixels) are different. Call log: - expect.toHaveScreenshot(component-colors.png) with timeout 15000ms - verifying given screenshot expectation - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - 14601 pixels (ratio 0.02 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - captured a stable screenshot - 14601 pixels (ratio 0.02 of all image pixels) are different. Expected: /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png Received: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-webkit/component-colors-actual.png Diff: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-webkit/component-colors-diff.png 80 | const sampleSection = page.locator(`#${id}`); 81 | > 82 | await expect(sampleSection).toHaveScreenshot( | ^ 83 | `${id.replace(/^sample-section-/, '')}.png` 84 | ); 85 | }); at /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts:82:33
[webkit] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors: tests/styleguide.spec.ts#L82
5) [webkit] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: Screenshot comparison failed: 14601 pixels (ratio 0.02 of all image pixels) are different. Call log: - expect.toHaveScreenshot(component-colors.png) with timeout 15000ms - verifying given screenshot expectation - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - 14601 pixels (ratio 0.02 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#sample-section-component-colors') - locator resolved to <div class="sample-section" id="sample-section-compon…>…</div> - taking element screenshot - disabled all CSS animations - waiting for element to be visible and stable - element is visible and stable - captured a stable screenshot - 14601 pixels (ratio 0.02 of all image pixels) are different. Expected: /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png Received: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-webkit-retry1/component-colors-actual.png Diff: /home/runner/work/web-client-ui/web-client-ui/test-results/styleguide-UI-regression-test---Styleguide-section---sample-section-component-colors-webkit-retry1/component-colors-diff.png 80 | const sampleSection = page.locator(`#${id}`); 81 | > 82 | await expect(sampleSection).toHaveScreenshot( | ^ 83 | `${id.replace(/^sample-section-/, '')}.png` 84 | ); 85 | }); at /home/runner/work/web-client-ui/web-client-ui/tests/styleguide.spec.ts:82:33
Slow Test: [webkit] › styleguide.spec.ts#L1
[webkit] › styleguide.spec.ts took 5.3m
Slow Test: [firefox] › styleguide.spec.ts#L1
[firefox] › styleguide.spec.ts took 2.5m
Slow Test: [chromium] › styleguide.spec.ts#L1
[chromium] › styleguide.spec.ts took 2.1m
Slow Test: [webkit] › table-operations.spec.ts#L1
[webkit] › table-operations.spec.ts took 1.5m
Slow Test: [webkit] › context-menu.spec.ts#L1
[webkit] › context-menu.spec.ts took 1.5m
🎭 Playwright Run Summary
6 failed [chromium] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors [chromium] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-spectrum-overlays [firefox] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors [firefox] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-spectrum-overlays [webkit] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-component-colors [webkit] › styleguide.spec.ts:76:7 › UI regression test - Styleguide section - sample-section-spectrum-overlays 237 passed (19.5m)

Artifacts

Produced during runtime
Name Size
playwright-report Expired
11.9 MB
server-logs Expired
174 KB