Skip to content

Improve app responsiveness on mobile screen #3587

Improve app responsiveness on mobile screen

Improve app responsiveness on mobile screen #3587

Triggered via pull request February 4, 2025 10:02
Status Failure
Total duration 30m 22s
Artifacts 4

system-tests-and-deploy.yml

on: pull_request
Matrix: system-tests
Fit to window
Zoom out
Zoom in

Annotations

12 errors, 5 warnings, and 1 notice
[chromium] › course-language-versions.spec.ts:10:5 › Creating a new language version works: system-tests/src/tests/course-language-versions.spec.ts#L62
1) [chromium] › course-language-versions.spec.ts:10:5 › Creating a new language version works › Expect screenshots to match snapshots "wrong-course-banner" Error: expect(page).toHaveScreenshot(expected) 183087 pixels (ratio 0.42 of all image pixels) are different. Expected: /home/runner/work/secret-project-331/secret-project-331/system-tests/src/__screenshots__/course-language-versions.spec.ts/wrong-course-banner-mobile-tall.png Received: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/course-language-versions-C-f1cf2--new-language-version-works-chromium/wrong-course-banner-mobile-tall-1-actual.png Diff: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/course-language-versions-C-f1cf2--new-language-version-works-chromium/wrong-course-banner-mobile-tall-1-diff.png Call log: - expect.toHaveScreenshot(wrong-course-banner-mobile-tall.png) with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 183087 pixels (ratio 0.42 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 - 183087 pixels (ratio 0.42 of all image pixels) are different. 60 | ) 61 | > 62 | await expectScreenshotsToMatchSnapshots({ | ^ 63 | screenshotTarget: page, 64 | headless, 65 | testInfo, at /home/runner/work/secret-project-331/secret-project-331/system-tests/src/tests/course-language-versions.spec.ts:62:42
[chromium] › course-material/content-components-render.spec.ts:8:5 › blocks render correctly: system-tests/src/tests/course-material/content-components-render.spec.ts#L29
2) [chromium] › course-material/content-components-render.spec.ts:8:5 › blocks render correctly › Expect screenshots to match snapshots "content-components-renderer-view" Error: expect(page).toHaveScreenshot(expected) 202950 pixels (ratio 0.01 of all image pixels) are different. Expected: /home/runner/work/secret-project-331/secret-project-331/system-tests/src/__screenshots__/course-material/content-components-render.spec.ts/content-components-renderer-view-mobile-tall.png Received: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/course-material-content-co-a4b7d-der-blocks-render-correctly-chromium/content-components-renderer-view-mobile-tall-1-actual.png Diff: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/course-material-content-co-a4b7d-der-blocks-render-correctly-chromium/content-components-renderer-view-mobile-tall-1-diff.png Call log: - expect.toHaveScreenshot(content-components-renderer-view-mobile-tall.png) with timeout 10000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 202950 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 - 202950 pixels (ratio 0.01 of all image pixels) are different. 27 | await expect(page.getByText("crashed")).toBeHidden() 28 | > 29 | await expectScreenshotsToMatchSnapshots({ | ^ 30 | // TODO: these should be removed 31 | axeSkip: ["color-contrast", "empty-table-header"], 32 | screenshotTarget: page, at /home/runner/work/secret-project-331/secret-project-331/system-tests/src/tests/course-material/content-components-render.spec.ts:29:42
[chromium] › course-material/custom-iframe.spec.ts:10:5 › Custom iframe blocks work: system-tests/src/tests/course-material/custom-iframe.spec.ts#L54
3) [chromium] › course-material/custom-iframe.spec.ts:10:5 › Custom iframe blocks work › Expect screenshots to match snapshots "custom-iframe" Error: expect(page).toHaveScreenshot(expected) 38013 pixels (ratio 0.09 of all image pixels) are different. Expected: /home/runner/work/secret-project-331/secret-project-331/system-tests/src/__screenshots__/course-material/custom-iframe.spec.ts/custom-iframe-mobile-tall.png Received: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/course-material-custom-iframe-Custom-iframe-blocks-work-chromium/custom-iframe-mobile-tall-1-actual.png Diff: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/course-material-custom-iframe-Custom-iframe-blocks-work-chromium/custom-iframe-mobile-tall-1-diff.png Call log: - expect.toHaveScreenshot(custom-iframe-mobile-tall.png) with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 38013 pixels (ratio 0.09 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 - 38013 pixels (ratio 0.09 of all image pixels) are different. 52 | .frameLocator('iframe[title="iframe"]') 53 | .getByRole("heading", { name: "Example Domain" }) > 54 | await expectScreenshotsToMatchSnapshots({ | ^ 55 | headless, 56 | testInfo, 57 | screenshotTarget: page, at /home/runner/work/secret-project-331/secret-project-331/system-tests/src/tests/course-material/custom-iframe.spec.ts:54:42
[chromium] › gutenberg/spacer-not-breaking-editing.spec.ts:14:7 › Spacers should not break text editing under them: system-tests/src/tests/gutenberg/spacer-not-breaking-editing.spec.ts#L44
4) [chromium] › gutenberg/spacer-not-breaking-editing.spec.ts:14:7 › Spacers should not break text editing under them, block inserter should not go on top of the typing caret › Expect screenshots to match snapshots "new-block-inserter-should-not-obscure-typing-caret" Error: expect(page).toHaveScreenshot(expected) 32878 pixels (ratio 0.08 of all image pixels) are different. Expected: /home/runner/work/secret-project-331/secret-project-331/system-tests/src/__screenshots__/gutenberg/spacer-not-breaking-editing.spec.ts/new-block-inserter-should-not-obscure-typing-caret-mobile-tall.png Received: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/gutenberg-spacer-not-break-12fdd--on-top-of-the-typing-caret-chromium/new-block-inserter-should--9688d-yping-caret-mobile-tall-1-actual.png Diff: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/gutenberg-spacer-not-break-12fdd--on-top-of-the-typing-caret-chromium/new-block-inserter-should--9688d-yping-caret-mobile-tall-1-diff.png Call log: - expect.toHaveScreenshot(new-block-inserter-should-not-obscure-typing-caret-mobile-tall.png) with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 32878 pixels (ratio 0.08 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 - 32878 pixels (ratio 0.08 of all image pixels) are different. 42 | await page.getByText("This text should remain editable").press("Control+A") 43 | // In this screenshot the plus sign for inserting a new block should not be on top of the typing caret. > 44 | await expectScreenshotsToMatchSnapshots({ | ^ 45 | headless, 46 | testInfo, 47 | screenshotTarget: page, at /home/runner/work/secret-project-331/secret-project-331/system-tests/src/tests/gutenberg/spacer-not-breaking-editing.spec.ts:44:44
[chromium] › gutenberg/spacer-not-breaking-editing.spec.ts:14:7 › Spacers should not break text editing under them: system-tests/src/tests/gutenberg/spacer-not-breaking-editing.spec.ts#L44
4) [chromium] › gutenberg/spacer-not-breaking-editing.spec.ts:14:7 › Spacers should not break text editing under them, block inserter should not go on top of the typing caret › Expect screenshots to match snapshots "new-block-inserter-should-not-obscure-typing-caret" Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(page).toHaveScreenshot(expected) 32878 pixels (ratio 0.08 of all image pixels) are different. Expected: /home/runner/work/secret-project-331/secret-project-331/system-tests/src/__screenshots__/gutenberg/spacer-not-breaking-editing.spec.ts/new-block-inserter-should-not-obscure-typing-caret-mobile-tall.png Received: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/gutenberg-spacer-not-break-12fdd--on-top-of-the-typing-caret-chromium-retry1/new-block-inserter-should--9688d-yping-caret-mobile-tall-1-actual.png Diff: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/gutenberg-spacer-not-break-12fdd--on-top-of-the-typing-caret-chromium-retry1/new-block-inserter-should--9688d-yping-caret-mobile-tall-1-diff.png Call log: - expect.toHaveScreenshot(new-block-inserter-should-not-obscure-typing-caret-mobile-tall.png) with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 32878 pixels (ratio 0.08 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 - 32878 pixels (ratio 0.08 of all image pixels) are different. 42 | await page.getByText("This text should remain editable").press("Control+A") 43 | // In this screenshot the plus sign for inserting a new block should not be on top of the typing caret. > 44 | await expectScreenshotsToMatchSnapshots({ | ^ 45 | headless, 46 | testInfo, 47 | screenshotTarget: page, at /home/runner/work/secret-project-331/secret-project-331/system-tests/src/tests/gutenberg/spacer-not-breaking-editing.spec.ts:44:44
[chromium] › gutenberg/spacer-not-breaking-editing.spec.ts:14:7 › Spacers should not break text editing under them: system-tests/src/tests/gutenberg/spacer-not-breaking-editing.spec.ts#L44
4) [chromium] › gutenberg/spacer-not-breaking-editing.spec.ts:14:7 › Spacers should not break text editing under them, block inserter should not go on top of the typing caret › Expect screenshots to match snapshots "new-block-inserter-should-not-obscure-typing-caret" Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(page).toHaveScreenshot(expected) 32878 pixels (ratio 0.08 of all image pixels) are different. Expected: /home/runner/work/secret-project-331/secret-project-331/system-tests/src/__screenshots__/gutenberg/spacer-not-breaking-editing.spec.ts/new-block-inserter-should-not-obscure-typing-caret-mobile-tall.png Received: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/gutenberg-spacer-not-break-12fdd--on-top-of-the-typing-caret-chromium-retry2/new-block-inserter-should--9688d-yping-caret-mobile-tall-1-actual.png Diff: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/gutenberg-spacer-not-break-12fdd--on-top-of-the-typing-caret-chromium-retry2/new-block-inserter-should--9688d-yping-caret-mobile-tall-1-diff.png Call log: - expect.toHaveScreenshot(new-block-inserter-should-not-obscure-typing-caret-mobile-tall.png) with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 32878 pixels (ratio 0.08 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 - 32878 pixels (ratio 0.08 of all image pixels) are different. 42 | await page.getByText("This text should remain editable").press("Control+A") 43 | // In this screenshot the plus sign for inserting a new block should not be on top of the typing caret. > 44 | await expectScreenshotsToMatchSnapshots({ | ^ 45 | headless, 46 | testInfo, 47 | screenshotTarget: page, at /home/runner/work/secret-project-331/secret-project-331/system-tests/src/tests/gutenberg/spacer-not-breaking-editing.spec.ts:44:44
[chromium] › gutenberg/spacer-not-breaking-editing.spec.ts:14:7 › Spacers should not break text editing under them: system-tests/src/tests/gutenberg/spacer-not-breaking-editing.spec.ts#L44
4) [chromium] › gutenberg/spacer-not-breaking-editing.spec.ts:14:7 › Spacers should not break text editing under them, block inserter should not go on top of the typing caret › Expect screenshots to match snapshots "new-block-inserter-should-not-obscure-typing-caret" Retry #3 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(page).toHaveScreenshot(expected) 32878 pixels (ratio 0.08 of all image pixels) are different. Expected: /home/runner/work/secret-project-331/secret-project-331/system-tests/src/__screenshots__/gutenberg/spacer-not-breaking-editing.spec.ts/new-block-inserter-should-not-obscure-typing-caret-mobile-tall.png Received: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/gutenberg-spacer-not-break-12fdd--on-top-of-the-typing-caret-chromium-retry3/new-block-inserter-should--9688d-yping-caret-mobile-tall-1-actual.png Diff: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/gutenberg-spacer-not-break-12fdd--on-top-of-the-typing-caret-chromium-retry3/new-block-inserter-should--9688d-yping-caret-mobile-tall-1-diff.png Call log: - expect.toHaveScreenshot(new-block-inserter-should-not-obscure-typing-caret-mobile-tall.png) with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 32878 pixels (ratio 0.08 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 - 32878 pixels (ratio 0.08 of all image pixels) are different. 42 | await page.getByText("This text should remain editable").press("Control+A") 43 | // In this screenshot the plus sign for inserting a new block should not be on top of the typing caret. > 44 | await expectScreenshotsToMatchSnapshots({ | ^ 45 | headless, 46 | testInfo, 47 | screenshotTarget: page, at /home/runner/work/secret-project-331/secret-project-331/system-tests/src/tests/gutenberg/spacer-not-breaking-editing.spec.ts:44:44
[chromium] › gutenberg/spacer-not-breaking-editing.spec.ts:14:7 › Spacers should not break text editing under them: system-tests/src/tests/gutenberg/spacer-not-breaking-editing.spec.ts#L44
4) [chromium] › gutenberg/spacer-not-breaking-editing.spec.ts:14:7 › Spacers should not break text editing under them, block inserter should not go on top of the typing caret › Expect screenshots to match snapshots "new-block-inserter-should-not-obscure-typing-caret" Retry #4 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(page).toHaveScreenshot(expected) 32878 pixels (ratio 0.08 of all image pixels) are different. Expected: /home/runner/work/secret-project-331/secret-project-331/system-tests/src/__screenshots__/gutenberg/spacer-not-breaking-editing.spec.ts/new-block-inserter-should-not-obscure-typing-caret-mobile-tall.png Received: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/gutenberg-spacer-not-break-12fdd--on-top-of-the-typing-caret-chromium-retry4/new-block-inserter-should--9688d-yping-caret-mobile-tall-1-actual.png Diff: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/gutenberg-spacer-not-break-12fdd--on-top-of-the-typing-caret-chromium-retry4/new-block-inserter-should--9688d-yping-caret-mobile-tall-1-diff.png Call log: - expect.toHaveScreenshot(new-block-inserter-should-not-obscure-typing-caret-mobile-tall.png) with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 32878 pixels (ratio 0.08 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 - 32878 pixels (ratio 0.08 of all image pixels) are different. 42 | await page.getByText("This text should remain editable").press("Control+A") 43 | // In this screenshot the plus sign for inserting a new block should not be on top of the typing caret. > 44 | await expectScreenshotsToMatchSnapshots({ | ^ 45 | headless, 46 | testInfo, 47 | screenshotTarget: page, at /home/runner/work/secret-project-331/secret-project-331/system-tests/src/tests/gutenberg/spacer-not-breaking-editing.spec.ts:44:44
[chromium] › headings-navigation.spec.ts:10:5 › headings navigation works: system-tests/src/tests/headings-navigation.spec.ts#L30
5) [chromium] › headings-navigation.spec.ts:10:5 › headings navigation works › Expect screenshots to match snapshots "headings-navigation-open" Error: expect(page).toHaveScreenshot(expected) 105895 pixels (ratio 0.24 of all image pixels) are different. Expected: /home/runner/work/secret-project-331/secret-project-331/system-tests/src/__screenshots__/headings-navigation.spec.ts/headings-navigation-open-mobile-tall.png Received: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/headings-navigation-headings-navigation-works-chromium/headings-navigation-open-mobile-tall-1-actual.png Diff: /home/runner/work/secret-project-331/secret-project-331/system-tests/test-results/headings-navigation-headings-navigation-works-chromium/headings-navigation-open-mobile-tall-1-diff.png Call log: - expect.toHaveScreenshot(headings-navigation-open-mobile-tall.png) with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 105895 pixels (ratio 0.24 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 - 105895 pixels (ratio 0.24 of all image pixels) are different. 28 | await page.locator('[aria-label="Open heading navigation"]').click() 29 | > 30 | await expectScreenshotsToMatchSnapshots({ | ^ 31 | headless, 32 | testInfo, 33 | snapshotName: "headings-navigation-open", at /home/runner/work/secret-project-331/secret-project-331/system-tests/src/tests/headings-navigation.spec.ts:30:42
system-tests (1)
Process completed with exit code 1.
system-tests (2)
The job was canceled because "_1" failed.
system-tests (2)
The operation was canceled.
Slow Test: system-tests/[chromium] › history/history.spec.ts#L1
system-tests/[chromium] › history/history.spec.ts took 41.1s
Slow Test: system-tests/[chromium] › course-modules/course-modules.spec.ts#L1
system-tests/[chromium] › course-modules/course-modules.spec.ts took 38.7s
Slow Test: system-tests/[chromium] › glossary.spec.ts#L1
system-tests/[chromium] › glossary.spec.ts took 34.7s
Slow Test: system-tests/[chromium] › course-instance-management/course-instance-management.spec.ts#L1
system-tests/[chromium] › course-instance-management/course-instance-management.spec.ts took 34.2s
Slow Test: system-tests/[chromium] › course-material/content-components-render.spec.ts#L1
system-tests/[chromium] › course-material/content-components-render.spec.ts took 32.4s
🎭 Playwright Run Summary
5 failed [chromium] › course-language-versions.spec.ts:10:5 › Creating a new language version works ───── [chromium] › course-material/content-components-render.spec.ts:8:5 › blocks render correctly ─── [chromium] › course-material/custom-iframe.spec.ts:10:5 › Custom iframe blocks work ──────────── [chromium] › gutenberg/spacer-not-breaking-editing.spec.ts:14:7 › Spacers should not break text editing under them, block inserter should not go on top of the typing caret [chromium] › headings-navigation.spec.ts:10:5 › headings navigation works ────────────────────── 53 passed (6.6m)

Artifacts

Produced during runtime
Name Size
playwright-html-report-1
500 KB
skaffold-build-output
937 Bytes
skaffold-images Expired
449 MB
test-results-1
27.9 MB