Skip to content

Improve width button density scale #389

Improve width button density scale

Improve width button density scale #389

Triggered via pull request August 9, 2024 09:04
Status Failure
Total duration 11m 24s
Artifacts 1

visual-test.yml

on: pull_request
Fit to window
Zoom out
Zoom in

Annotations

13 errors, 8 warnings, and 2 notices
[webkit] › src/slider-label/slider-label.test.ts:14:1 › With Hide Mark: packages/components/src/slider-label/slider-label.test.ts#L17
1) [webkit] › src/slider-label/slider-label.test.ts:14:1 › With Hide Mark ──────────────────────── Error: Screenshot comparison failed: 166656 pixels (ratio 0.61 of all image pixels) are different. Expected: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-label-slider-label-With-Hide-Mark-webkit/slider-label-with-hide-mark-expected.png Received: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-label-slider-label-With-Hide-Mark-webkit/slider-label-with-hide-mark-actual.png Diff: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-label-slider-label-With-Hide-Mark-webkit/slider-label-with-hide-mark-diff.png 15 | await page.goto('/iframe.html?id=components-slider-label--with-hide-mark'); 16 | > 17 | expect(await page.locator('body').screenshot()).toMatchSnapshot( | ^ 18 | 'slider-label-with-hide-mark.png' 19 | ); 20 | }); at /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/src/slider-label/slider-label.test.ts:17:51
[webkit] › src/slider-label/slider-label.test.ts:14:1 › With Hide Mark: packages/components/src/slider-label/slider-label.test.ts#L17
1) [webkit] › src/slider-label/slider-label.test.ts:14:1 › With Hide Mark ──────────────────────── Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: Screenshot comparison failed: 166656 pixels (ratio 0.61 of all image pixels) are different. Expected: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-label-slider-label-With-Hide-Mark-webkit-retry1/slider-label-with-hide-mark-expected.png Received: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-label-slider-label-With-Hide-Mark-webkit-retry1/slider-label-with-hide-mark-actual.png Diff: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-label-slider-label-With-Hide-Mark-webkit-retry1/slider-label-with-hide-mark-diff.png 15 | await page.goto('/iframe.html?id=components-slider-label--with-hide-mark'); 16 | > 17 | expect(await page.locator('body').screenshot()).toMatchSnapshot( | ^ 18 | 'slider-label-with-hide-mark.png' 19 | ); 20 | }); at /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/src/slider-label/slider-label.test.ts:17:51
[webkit] › src/slider-label/slider-label.test.ts:14:1 › With Hide Mark: packages/components/src/slider-label/slider-label.test.ts#L17
1) [webkit] › src/slider-label/slider-label.test.ts:14:1 › With Hide Mark ──────────────────────── Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: Screenshot comparison failed: 166656 pixels (ratio 0.61 of all image pixels) are different. Expected: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-label-slider-label-With-Hide-Mark-webkit-retry2/slider-label-with-hide-mark-expected.png Received: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-label-slider-label-With-Hide-Mark-webkit-retry2/slider-label-with-hide-mark-actual.png Diff: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-label-slider-label-With-Hide-Mark-webkit-retry2/slider-label-with-hide-mark-diff.png 15 | await page.goto('/iframe.html?id=components-slider-label--with-hide-mark'); 16 | > 17 | expect(await page.locator('body').screenshot()).toMatchSnapshot( | ^ 18 | 'slider-label-with-hide-mark.png' 19 | ); 20 | }); at /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/src/slider-label/slider-label.test.ts:17:51
[chromium] › src/select/select.base.test.ts:307:5 › JpSelect › when opened › should scroll the selected option into view: packages/components/src/select/select.base.test.ts#L355
2) [chromium] › src/select/select.base.test.ts:307:5 › JpSelect › when opened › should scroll the selected option into view Error: expect(received).toBeLessThanOrEqual(expected) Expected: <= 6 Received: 794 353 | expect( 354 | await selectedOption.evaluate<number, JpOption>(node => node.scrollTop) > 355 | ).toBeLessThanOrEqual(6); | ^ 356 | }); 357 | }); 358 | }); at /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/src/select/select.base.test.ts:355:9
[firefox] › src/avatar/avatar.test.ts:22:1 › With Image: packages/components/src/avatar/avatar.test.ts#L25
3) [firefox] › src/avatar/avatar.test.ts:22:1 › With Image ─────────────────────────────────────── Error: Screenshot comparison failed: 666 pixels (ratio 0.66 of all image pixels) are different. Expected: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-avatar-avatar-With-Image-firefox/avatar-with-image-expected.png Received: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-avatar-avatar-With-Image-firefox/avatar-with-image-actual.png Diff: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-avatar-avatar-With-Image-firefox/avatar-with-image-diff.png 23 | await page.goto('/iframe.html?id=components-avatar--with-image'); 24 | > 25 | expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot( | ^ 26 | 'avatar-with-image.png' 27 | ); 28 | }); at /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/src/avatar/avatar.test.ts:25:56
[firefox] › src/slider/slider.test.ts:14:1 › Vertical: packages/components/src/slider/slider.test.ts#L17
4) [firefox] › src/slider/slider.test.ts:14:1 › Vertical ───────────────────────────────────────── Error: Screenshot comparison failed: 41907 pixels (ratio 0.52 of all image pixels) are different. Expected: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-slider-Vertical-firefox/slider-vertical-expected.png Received: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-slider-Vertical-firefox/slider-vertical-actual.png Diff: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-slider-slider-Vertical-firefox/slider-vertical-diff.png 15 | await page.goto('/iframe.html?id=components-slider--vertical'); 16 | > 17 | expect(await page.locator('body').screenshot()).toMatchSnapshot( | ^ 18 | 'slider-vertical.png' 19 | ); 20 | }); at /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/src/slider/slider.test.ts:17:51
[webkit] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically: packages/components/src/anchor/anchor.base.test.ts#L1
5) [webkit] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically Test timeout of 30000ms exceeded.
[webkit] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically: packages/components/src/anchor/anchor.base.test.ts#L31
5) [webkit] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically Error: locator.waitFor: Target closed =========================== logs =========================== waiting for locator('jp-anchor') to be visible locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolve
[webkit] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically: packages/components/src/anchor/anchor.base.test.ts#L1
5) [webkit] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically Pending operations: - locator.waitFor at src/anchor/anchor.base.test.ts:31:19
[webkit] › src/avatar/avatar.test.ts:22:1 › With Image: packages/components/src/avatar/avatar.test.ts#L25
6) [webkit] › src/avatar/avatar.test.ts:22:1 › With Image ──────────────────────────────────────── Error: Screenshot comparison failed: 2975 pixels (ratio 0.73 of all image pixels) are different. Expected: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-avatar-avatar-With-Image-webkit/avatar-with-image-expected.png Received: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-avatar-avatar-With-Image-webkit/avatar-with-image-actual.png Diff: /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/test-results/src-avatar-avatar-With-Image-webkit/avatar-with-image-diff.png 23 | await page.goto('/iframe.html?id=components-avatar--with-image'); 24 | > 25 | expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot( | ^ 26 | 'avatar-with-image.png' 27 | ); 28 | }); at /home/runner/work/jupyter-ui-toolkit/jupyter-ui-toolkit/packages/components/src/avatar/avatar.test.ts:25:56
[chromium] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically: packages/components/src/anchor/anchor.base.test.ts#L1
1) [chromium] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically Test timeout of 30000ms exceeded.
[chromium] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically: packages/components/src/anchor/anchor.base.test.ts#L31
1) [chromium] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically Error: locator.waitFor: Target closed =========================== logs =========================== waiting for locator('jp-anchor') to be visible locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resolved to hidden <jp-anchor href="#" id="anchor1" class="neutral" appearance…>Hello</jp-anchor> locator resol
[chromium] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically: packages/components/src/anchor/anchor.base.test.ts#L1
1) [chromium] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically Pending operations: - locator.waitFor at src/anchor/anchor.base.test.ts:31:19
visual-test
The following actions uses Node.js version which is deprecated and will be forced to run on node20: actions/setup-node@v3. For more info: https://github.blog/changelog/2024-03-07-github-actions-all-actions-will-run-on-node20-instead-of-node16-by-default/
Slow Test: packages/components/[webkit] › src/anchor/anchor.base.test.ts#L1
packages/components/[webkit] › src/anchor/anchor.base.test.ts took 32.1s
Slow Test: packages/components/[firefox] › src/select/select.base.test.ts#L1
packages/components/[firefox] › src/select/select.base.test.ts took 23.9s
Slow Test: packages/components/[webkit] › src/select/select.base.test.ts#L1
packages/components/[webkit] › src/select/select.base.test.ts took 22.3s
Slow Test: packages/components/[chromium] › src/select/select.base.test.ts#L1
packages/components/[chromium] › src/select/select.base.test.ts took 15.5s
Slow Test: packages/components/[chromium] › src/anchor/anchor.base.test.ts#L1
packages/components/[chromium] › src/anchor/anchor.base.test.ts took 31.4s
Slow Test: packages/components/[webkit] › src/select/select.base.test.ts#L1
packages/components/[webkit] › src/select/select.base.test.ts took 23.7s
Slow Test: packages/components/[firefox] › src/select/select.base.test.ts#L1
packages/components/[firefox] › src/select/select.base.test.ts took 23.3s
🎭 Playwright Run Summary
1 failed [webkit] › src/slider-label/slider-label.test.ts:14:1 › With Hide Mark ───────────────────────── 8 flaky [chromium] › src/select/select.base.test.ts:307:5 › JpSelect › when opened › should scroll the selected option into view [firefox] › src/avatar/avatar.test.ts:22:1 › With Image ──────────────────────────────────────── [firefox] › src/slider/slider.test.ts:14:1 › Vertical ────────────────────────────────────────── [webkit] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically [webkit] › src/avatar/avatar.test.ts:22:1 › With Image ───────────────────────────────────────── [webkit] › src/radio-group/radio-group.test.ts:30:1 › Read-only ──────────────────────────────── [webkit] › src/slider/slider.test.ts:14:1 › Vertical ─────────────────────────────────────────── [webkit] › src/slider-label/slider-label.test.ts:6:1 › Default ───────────────────────────────── 6 skipped 480 passed (4.0m)
🎭 Playwright Run Summary
1 flaky [chromium] › src/anchor/anchor.base.test.ts:29:3 › jpAnchor › receive focus when focused programatically 6 skipped 488 passed (3.7m)

Artifacts

Produced during runtime
Name Size
jupyter-ui-test Expired
2.42 MB