krishanchawla

playwright-typescript-framework

main @ 8413e65 · 1 day ago · 2026-08-12 05:35 UTC

Assertion failure View CI run ↗

Why it failed

This run mixes one real product bug with a batch of unrelated environment flakiness -- worth telling apart before triaging either. The real bug: axe-core flags a serious WCAG 2 AA color-contrast violation on the products, cart, and checkout pages (3 signals, all from the shared "~/qa-sandbox" breadcrumb component). It renders at #6d68cf on a #0a0a11 background, a 4.25:1 contrast ratio against the 4.5:1 minimum. Same component, same fix, three pages -- not three separate bugs. The rest (11 signals) is a shard-3-shaped environment outage, not a code or test bug: apiRequestContext POST timeouts to playground.krishanchawla.com/api/auth/login and page.goto cancellations, spread across otherwise-unrelated specs (admin login, admin records, cart management, checkout, and a second pass of the accessibility suite itself) -- every one of them hit the same host in the same run window and failed the same way. That's the target environment being unreachable during this shard, not something to debug in the test code.

Suggested fix

Fix the breadcrumb component's text-accent token once (darken until #6d68cf-on-#0a0a11 clears 4.5:1) -- products/cart/checkout all inherit it. Separately, check playground.krishanchawla.com's uptime/deploy log around this run's window; if it was down or redeploying, rerun the affected shard once it's back rather than investigating the tests themselves.

This run mixed: Assertion failure Infra error

Failure signals (14)

Accessibility › products page has no serious/critical violations @regression

tests/ui/accessibility.spec.ts:37

Assertion failure first time seen

expect(violations, JSON.stringify(violations, null, 2)).toEqual([]);

Show raw stack trace / context

Error: [
  {
    "id": "color-contrast",
    "impact": "serious",
    "tags": ["cat.color","wcag2aa","wcag143","TTv5","TT13.c","EN-301-549","EN-9.1.4.3","ACT","RGAAv4","RGAA-3.2.1"],
    "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
    "help": "Elements must meet minimum color contrast ratio thresholds",
    "helpUrl": "https://dequeuniversity.com/rules/axe/4.12/color-contrast?application=playwright",
    "nodes": [{"any":[{"id":"color-contrast","data":{"fgColor":"#6d68cf","bgColor":"#0a0a11","contrastRatio":4.25,"fontSize":"7.5pt (10px)","fontWeight":"normal","expectedContrastRatio":"4.5:1"},"impact":"serious","message":"Element has insufficient color contrast of 4.25 (foreground color: #6d68cf, background color: #0a0a11, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"}],"html":"<div class=\"mt-0.5 font-mono text-[10px] text-accent/80\">~/qa-sandbox</div>","target":[".mt-0\\.5"]}]
  }
]

      35 |       await productsPage.open();
      36 |       const violations = await seriousOrCriticalViolations(page);
    > 37 |       expect(violations, JSON.stringify(violations, null, 2)).toEqual([]);
         |                                                               ^
        at tests/ui/accessibility.spec.ts:37:63

source: raw-log

Accessibility › cart page has no serious/critical violations @regression

tests/ui/accessibility.spec.ts:51

Assertion failure first time seen

expect(violations, JSON.stringify(violations, null, 2)).toEqual([]);

Show raw stack trace / context

Same axe-core color-contrast violation as the products-page occurrence (signature f59fc5dd78738026): '~/qa-sandbox' breadcrumb, #6d68cf on #0a0a11, 4.25:1 vs the 4.5:1 WCAG 2 AA minimum. Shared breadcrumb component -- same fix covers this page too.

      49 |       await cartPage.open();
      50 |       const violations = await seriousOrCriticalViolations(page);
    > 51 |       expect(violations, JSON.stringify(violations, null, 2)).toEqual([]);
         |                                                               ^
        at tests/ui/accessibility.spec.ts:51:63

source: raw-log

Accessibility › checkout page has no serious/critical violations @regression

tests/ui/accessibility.spec.ts:66

Assertion failure first time seen

expect(violations, JSON.stringify(violations, null, 2)).toEqual([]);

Show raw stack trace / context

Same axe-core color-contrast violation as the products-page occurrence (signature f59fc5dd78738026): '~/qa-sandbox' breadcrumb, #6d68cf on #0a0a11, 4.25:1 vs the 4.5:1 WCAG 2 AA minimum. Shared breadcrumb component -- same fix covers this page too.

      64 |       await checkoutPage.open();
      65 |       const violations = await seriousOrCriticalViolations(page);
    > 66 |       expect(violations, JSON.stringify(violations, null, 2)).toEqual([]);
         |                                                               ^
        at tests/ui/accessibility.spec.ts:66:63

source: raw-log

Admin Panel records › search filters the table to matching records @regression

tests/ui/admin-records.spec.ts:14

Infra error first time seen

TimeoutError: apiRequestContext.post: Timeout 10000ms exceeded.

Show raw stack trace / context

TimeoutError: apiRequestContext.post: Timeout 10000ms exceeded.
    Call log:
      - → POST https://playground.krishanchawla.com/api/auth/login
        - referer: https://playground.krishanchawla.com/scenarios/admin-panel/login/
        - origin: https://playground.krishanchawla.com

       at ../utils/admin-api-client.ts:20
      18 |   private async post(path: string, fields: Record<string, string>): Promise<void> {
      19 |     const { baseURL } = getEnvConfig();
    > 20 |     await this.page.request.post(path, {
         |                             ^
        at AdminApiClient.post (utils/admin-api-client.ts:20:29)

source: raw-log

Cart management › updating quantity recalculates the line subtotal and cart total @regression

tests/ui/cart-management.spec.ts:24

Infra error first time seen

TimeoutError: apiRequestContext.post: Timeout 10000ms exceeded.

source: raw-log

Checkout flow › a single item can be searched, purchased, and confirmed @smoke @regression › search for the product and add it to the cart

tests/ui/checkout.spec.ts:20

Infra error first time seen

Test timeout of 30000ms exceeded.

source: raw-log

Accessibility › products page has no serious/critical violations @regression

tests/ui/accessibility.spec.ts:35

Infra error first time seen

Error: page.goto: Operation was cancelled; maybe frame was detached?

source: raw-log

Accessibility › cart page has no serious/critical violations @regression

tests/ui/accessibility.spec.ts:45

Infra error first time seen

TimeoutError: apiRequestContext.post: Timeout 10000ms exceeded.

source: raw-log

Accessibility › checkout page has no serious/critical violations @regression

tests/ui/accessibility.spec.ts:59

Infra error first time seen

TimeoutError: apiRequestContext.post: Timeout 10000ms exceeded.

source: raw-log

Admin Panel login › a valid login reaches the protected Records page @smoke @regression

tests/ui/admin-login.spec.ts:16

Infra error first time seen

Error: page.goto: Operation was cancelled; maybe frame was detached?

source: raw-log

Admin Panel login › an invalid username/password combination is rejected @regression

tests/ui/admin-login.spec.ts:28

Infra error first time seen

Error: page.goto: Operation was cancelled; maybe frame was detached?

source: raw-log

Admin Panel login › visiting Records while signed out redirects to Login @regression

tests/ui/admin-login.spec.ts:36

Infra error first time seen

Error: page.goto: Operation was cancelled; maybe frame was detached?

source: raw-log

Admin Panel login › logging out redirects to Login and re-protects Records @regression

tests/ui/admin-login.spec.ts:41

Infra error first time seen

TimeoutError: apiRequestContext.post: Timeout 10000ms exceeded.

source: raw-log

Admin Panel records › editing a role persists after the page reloads @regression

tests/ui/admin-records.spec.ts:14

Infra error first time seen

TimeoutError: apiRequestContext.post: Timeout 10000ms exceeded.

source: raw-log