feat: refactor NetworkStatusIndicator — state hook, framer-motion animations, unit tests, screen reader support #174
frontend-visual-regression.yml
on: pull_request
visual-regression
1m 46s
Annotations
10 errors, 1 warning, and 1 notice
|
[mobile-chrome] › tests/e2e/create-payment.visual.spec.ts:15:7 › Create Payment Visual Regression › create payment form remains visually stable:
frontend/tests/e2e/create-payment.visual.spec.ts#L19
4) [mobile-chrome] › tests/e2e/create-payment.visual.spec.ts:15:7 › Create Payment Visual Regression › create payment form remains visually stable
Error: expect(locator).toBeVisible() failed
Locator: getByRole('heading', { name: 'Create Payment Link' })
Expected: visible
Timeout: 5000ms
Error: element(s) not found
Call log:
- Expect "toBeVisible" with timeout 5000ms
- waiting for getByRole('heading', { name: 'Create Payment Link' })
17 | const formShell = heading.locator("xpath=ancestor::main[1]");
18 |
> 19 | await expect(heading).toBeVisible();
| ^
20 | await expect(formShell).toBeVisible();
21 | await expect(page.locator("select#trusted-address")).toBeVisible();
22 |
at /home/runner/work/Stellar_Payment_API/Stellar_Payment_API/frontend/tests/e2e/create-payment.visual.spec.ts:19:27
|
|
[mobile-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports:
frontend/tests/e2e/checkout.visual.spec.ts#L18
3) [mobile-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toBeVisible() failed
Locator: locator('main')
Expected: visible
Timeout: 5000ms
Error: element(s) not found
Call log:
- Expect "toBeVisible" with timeout 5000ms
- waiting for locator('main')
16 | test("checkout layout remains stable across viewports", async ({ page }) => {
17 | const checkoutMain = page.locator("main");
> 18 | await expect(checkoutMain).toBeVisible();
| ^
19 | await expect(page.getByText("Styled payment")).toBeVisible();
20 | await expect(page.locator("code", { hasText: "GRECIPIENTADDRESS" })).toBeVisible();
21 |
at /home/runner/work/Stellar_Payment_API/Stellar_Payment_API/frontend/tests/e2e/checkout.visual.spec.ts:18:32
|
|
[mobile-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports:
frontend/tests/e2e/checkout.visual.spec.ts#L18
3) [mobile-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toBeVisible() failed
Locator: locator('main')
Expected: visible
Timeout: 5000ms
Error: element(s) not found
Call log:
- Expect "toBeVisible" with timeout 5000ms
- waiting for locator('main')
16 | test("checkout layout remains stable across viewports", async ({ page }) => {
17 | const checkoutMain = page.locator("main");
> 18 | await expect(checkoutMain).toBeVisible();
| ^
19 | await expect(page.getByText("Styled payment")).toBeVisible();
20 | await expect(page.locator("code", { hasText: "GRECIPIENTADDRESS" })).toBeVisible();
21 |
at /home/runner/work/Stellar_Payment_API/Stellar_Payment_API/frontend/tests/e2e/checkout.visual.spec.ts:18:32
|
|
[mobile-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports:
frontend/tests/e2e/checkout.visual.spec.ts#L18
3) [mobile-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports
Error: expect(locator).toBeVisible() failed
Locator: locator('main')
Expected: visible
Timeout: 5000ms
Error: element(s) not found
Call log:
- Expect "toBeVisible" with timeout 5000ms
- waiting for locator('main')
16 | test("checkout layout remains stable across viewports", async ({ page }) => {
17 | const checkoutMain = page.locator("main");
> 18 | await expect(checkoutMain).toBeVisible();
| ^
19 | await expect(page.getByText("Styled payment")).toBeVisible();
20 | await expect(page.locator("code", { hasText: "GRECIPIENTADDRESS" })).toBeVisible();
21 |
at /home/runner/work/Stellar_Payment_API/Stellar_Payment_API/frontend/tests/e2e/checkout.visual.spec.ts:18:32
|
|
[desktop-chrome] › tests/e2e/create-payment.visual.spec.ts:15:7 › Create Payment Visual Regression › create payment form remains visually stable:
frontend/tests/e2e/create-payment.visual.spec.ts#L19
2) [desktop-chrome] › tests/e2e/create-payment.visual.spec.ts:15:7 › Create Payment Visual Regression › create payment form remains visually stable
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toBeVisible() failed
Locator: getByRole('heading', { name: 'Create Payment Link' })
Expected: visible
Timeout: 5000ms
Error: element(s) not found
Call log:
- Expect "toBeVisible" with timeout 5000ms
- waiting for getByRole('heading', { name: 'Create Payment Link' })
17 | const formShell = heading.locator("xpath=ancestor::main[1]");
18 |
> 19 | await expect(heading).toBeVisible();
| ^
20 | await expect(formShell).toBeVisible();
21 | await expect(page.locator("select#trusted-address")).toBeVisible();
22 |
at /home/runner/work/Stellar_Payment_API/Stellar_Payment_API/frontend/tests/e2e/create-payment.visual.spec.ts:19:27
|
|
[desktop-chrome] › tests/e2e/create-payment.visual.spec.ts:15:7 › Create Payment Visual Regression › create payment form remains visually stable:
frontend/tests/e2e/create-payment.visual.spec.ts#L19
2) [desktop-chrome] › tests/e2e/create-payment.visual.spec.ts:15:7 › Create Payment Visual Regression › create payment form remains visually stable
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toBeVisible() failed
Locator: getByRole('heading', { name: 'Create Payment Link' })
Expected: visible
Timeout: 5000ms
Error: element(s) not found
Call log:
- Expect "toBeVisible" with timeout 5000ms
- waiting for getByRole('heading', { name: 'Create Payment Link' })
17 | const formShell = heading.locator("xpath=ancestor::main[1]");
18 |
> 19 | await expect(heading).toBeVisible();
| ^
20 | await expect(formShell).toBeVisible();
21 | await expect(page.locator("select#trusted-address")).toBeVisible();
22 |
at /home/runner/work/Stellar_Payment_API/Stellar_Payment_API/frontend/tests/e2e/create-payment.visual.spec.ts:19:27
|
|
[desktop-chrome] › tests/e2e/create-payment.visual.spec.ts:15:7 › Create Payment Visual Regression › create payment form remains visually stable:
frontend/tests/e2e/create-payment.visual.spec.ts#L19
2) [desktop-chrome] › tests/e2e/create-payment.visual.spec.ts:15:7 › Create Payment Visual Regression › create payment form remains visually stable
Error: expect(locator).toBeVisible() failed
Locator: getByRole('heading', { name: 'Create Payment Link' })
Expected: visible
Timeout: 5000ms
Error: element(s) not found
Call log:
- Expect "toBeVisible" with timeout 5000ms
- waiting for getByRole('heading', { name: 'Create Payment Link' })
17 | const formShell = heading.locator("xpath=ancestor::main[1]");
18 |
> 19 | await expect(heading).toBeVisible();
| ^
20 | await expect(formShell).toBeVisible();
21 | await expect(page.locator("select#trusted-address")).toBeVisible();
22 |
at /home/runner/work/Stellar_Payment_API/Stellar_Payment_API/frontend/tests/e2e/create-payment.visual.spec.ts:19:27
|
|
[desktop-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports:
frontend/tests/e2e/checkout.visual.spec.ts#L18
1) [desktop-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toBeVisible() failed
Locator: locator('main')
Expected: visible
Timeout: 5000ms
Error: element(s) not found
Call log:
- Expect "toBeVisible" with timeout 5000ms
- waiting for locator('main')
16 | test("checkout layout remains stable across viewports", async ({ page }) => {
17 | const checkoutMain = page.locator("main");
> 18 | await expect(checkoutMain).toBeVisible();
| ^
19 | await expect(page.getByText("Styled payment")).toBeVisible();
20 | await expect(page.locator("code", { hasText: "GRECIPIENTADDRESS" })).toBeVisible();
21 |
at /home/runner/work/Stellar_Payment_API/Stellar_Payment_API/frontend/tests/e2e/checkout.visual.spec.ts:18:32
|
|
[desktop-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports:
frontend/tests/e2e/checkout.visual.spec.ts#L18
1) [desktop-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toBeVisible() failed
Locator: locator('main')
Expected: visible
Timeout: 5000ms
Error: element(s) not found
Call log:
- Expect "toBeVisible" with timeout 5000ms
- waiting for locator('main')
16 | test("checkout layout remains stable across viewports", async ({ page }) => {
17 | const checkoutMain = page.locator("main");
> 18 | await expect(checkoutMain).toBeVisible();
| ^
19 | await expect(page.getByText("Styled payment")).toBeVisible();
20 | await expect(page.locator("code", { hasText: "GRECIPIENTADDRESS" })).toBeVisible();
21 |
at /home/runner/work/Stellar_Payment_API/Stellar_Payment_API/frontend/tests/e2e/checkout.visual.spec.ts:18:32
|
|
[desktop-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports:
frontend/tests/e2e/checkout.visual.spec.ts#L18
1) [desktop-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports
Error: expect(locator).toBeVisible() failed
Locator: locator('main')
Expected: visible
Timeout: 5000ms
Error: element(s) not found
Call log:
- Expect "toBeVisible" with timeout 5000ms
- waiting for locator('main')
16 | test("checkout layout remains stable across viewports", async ({ page }) => {
17 | const checkoutMain = page.locator("main");
> 18 | await expect(checkoutMain).toBeVisible();
| ^
19 | await expect(page.getByText("Styled payment")).toBeVisible();
20 | await expect(page.locator("code", { hasText: "GRECIPIENTADDRESS" })).toBeVisible();
21 |
at /home/runner/work/Stellar_Payment_API/Stellar_Payment_API/frontend/tests/e2e/checkout.visual.spec.ts:18:32
|
|
visual-regression
Node.js 20 is deprecated. The following actions target Node.js 20 but are being forced to run on Node.js 24: actions/cache@v4, actions/checkout@v4, actions/setup-node@v4, actions/upload-artifact@v4, pnpm/action-setup@v3. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|
|
🎭 Playwright Run Summary
4 failed
[desktop-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports
[desktop-chrome] › tests/e2e/create-payment.visual.spec.ts:15:7 › Create Payment Visual Regression › create payment form remains visually stable
[mobile-chrome] › tests/e2e/checkout.visual.spec.ts:16:7 › Checkout Visual Regression › checkout layout remains stable across viewports
[mobile-chrome] › tests/e2e/create-payment.visual.spec.ts:15:7 › Create Payment Visual Regression › create payment form remains visually stable
|
Artifacts
Produced during runtime
| Name | Size | Digest | |
|---|---|---|---|
|
frontend-visual-regression-artifacts
|
209 KB |
sha256:cf90a7a86238dfd55987066286a20ff3ca8c7dd0e2a460946ca947381a9e1fc5
|
|