Skip to content

Improve alertbox dismissal handling and Playwright CI coverage#74

Merged
schalkneethling merged 3 commits into
mainfrom
60-improve-playwright-in-ci
Jun 20, 2026
Merged

Improve alertbox dismissal handling and Playwright CI coverage#74
schalkneethling merged 3 commits into
mainfrom
60-improve-playwright-in-ci

Conversation

@schalkneethling

@schalkneethling schalkneethling commented Jun 20, 2026

Copy link
Copy Markdown
Owner

Summary

  • Split Playwright CI into Chromium, Firefox, and WebKit jobs with manual browser selection
  • Reduce CI retry count and keep browser-specific reports as separate artifacts
  • Tighten alertbox dismissal logic for session and permanent banners
  • Update Playwright tests to target the Close button explicitly and align session handling

Testing

  • Playwright UI tests updated to cover banner dismissal and cross-context behavior
  • Not run (not requested)

Summary by CodeRabbit

  • New Features

    • Enhanced Playwright CI with optional per-browser runs (chromium, firefox, webkit) and browser-specific reports.
  • Bug Fixes

    • Improved alert box dismissal behavior to correctly handle session vs permanent dismissals and tightened dismissal persistence logic.
  • Tests

    • Updated Playwright alert box specs to use clearer, accessible close-button selectors and improved page/context cleanup to avoid flaky timing.
  • Chores

    • Refined Playwright CI workflow conditions, reduced CI retries, lowered per-browser job timeouts, and limited workflow permissions.

@coderabbitai

coderabbitai Bot commented Jun 20, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a89c5edb-1135-45d2-ae79-2ce966db2629

📥 Commits

Reviewing files that changed from the base of the PR and between 616beca and 50a0b3d.

📒 Files selected for processing (2)
  • .github/workflows/playwright.yml
  • tests/alertbox-daterange.spec.js
🚧 Files skipped from review as they are similar to previous changes (2)
  • tests/alertbox-daterange.spec.js
  • .github/workflows/playwright.yml

📝 Walkthrough

Walkthrough

The PR splits the Playwright CI workflow from one job into three parallel per-browser jobs (chromium, firefox, webkit) with a workflow_dispatch browser selector, reduces CI retries to 1, refactors alertbox-manager dismissal logic to use a new #containsDismissedBanner method, and updates all alertbox tests with more precise accessible-role selectors and corrected async teardown.

Changes

Alertbox Dismissal Logic Fix

Layer / File(s) Summary
alertbox-manager dismissal logic refactor
components/alertbox/js/alertbox-manager.js
Removes the old storage id-check helper, adds #containsDismissedBanner(banner) mapping dismissType to session/permanent storage lookups, updates addBanners to use it, fixes #handleClick DOM selectors to use dot-prefixed template literals, and tightens the dismissal persistence condition to explicit "session"/"permanent" type equality checks.
Alertbox test selector and async fixes
tests/alertbox.spec.js, tests/alertbox-permanent.spec.js, tests/alertbox-session.spec.js, tests/alertbox-daterange.spec.js
Updates all close button locators to getByRole("button", { name: "Close" }), fixes async page teardown with await page.close(), corrects clock setup ordering in the daterange session test, and replaces chromium.launch() in the session test with the injected browser fixture via browser.newContext().

Per-browser CI Workflow Split

Layer / File(s) Summary
Per-browser CI jobs and retry config
.github/workflows/playwright.yml, playwright.config.js
Adds workflow_dispatch trigger with browser input (all, chromium, firefox, webkit), changes push/pull_request branch filters to main, adds workflow permissions: contents: read, replaces the single Playwright test job with three parallel jobs (chromium, firefox, webkit) that conditionally execute based on github.event_name and the selected browser input, each installing only its browser, running --project=<browser>, and uploading a browser-specific report artifact with 30-day retention. Reduces CI retries from 2 to 1.

Sequence Diagram(s)

sequenceDiagram
    participant Banner
    participant AlertboxManager
    participant Storage
    participant Test
    
    Test->>AlertboxManager: addBanners(banners)
    AlertboxManager->>AlertboxManager: `#containsDismissedBanner`(banner)
    AlertboxManager->>Storage: Check dismissType for session/permanent
    Storage-->>AlertboxManager: dismissed status
    AlertboxManager-->>Test: Show or hide banner
    Test->>Banner: Click close button
    Banner->>AlertboxManager: `#handleClick`()
    AlertboxManager->>Storage: Store dismissal (if session or permanent)
    Storage-->>AlertboxManager: Stored
    AlertboxManager-->>Test: Banner dismissed
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

  • Investigate slow and failing Playwright GitHub Actions runs #60: This PR directly addresses the investigation areas identified in the issue by refactoring the Playwright workflow to split browser jobs (improving CI strategy), reducing retries from 2 to 1 (optimizing retry settings), updating alertbox test selectors to be more deterministic with getByRole patterns (fixing potential flake), and refactoring dismissal logic to be stricter (reducing shared-state flakiness).

  • Expand Playwright browser coverage beyond Chromium masonry-gridlanes-wc#8: This PR implements the exact multi-browser test infrastructure and per-browser job execution needed to expand Playwright coverage from Chromium-only to full coverage (Chromium, Firefox, WebKit).

Possibly related PRs

  • schalkneethling/common-components#59: Both PRs modify the Playwright CI setup—pnpm-based playwright install/test commands are used in the main PR as part of the per-browser job refactor.

Poem

🐇 Hop, hop, three browsers in a row,
Chromium, Firefox, WebKit—off they go!
The banner knows if it's been dismissed before,
With "session" or "permanent"—nothing more.
Close buttons found by name, async done right,
This little rabbit tidied tests tonight! 🌙

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the two main changes: improving alertbox dismissal handling and expanding Playwright CI coverage to multiple browsers.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 60-improve-playwright-in-ci

Comment @coderabbitai help to get the list of available commands and usage tips.

Comment thread .github/workflows/playwright.yml Fixed
Comment thread .github/workflows/playwright.yml Fixed
Comment thread .github/workflows/playwright.yml Fixed

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
tests/alertbox-daterange.spec.js (1)

118-125: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Close the manually created browser context before test exit.

browser.newContext() is opened but never closed in this test, which can leak resources and increase flakiness across the suite.

Suggested fix
   const context = await browser.newContext();
   const newPage = await context.newPage();
   await newPage.clock.setFixedTime("2025-09-19");
   await newPage.goto("/components/alertbox/date-range.html");

   const newBanners = newPage.getByRole("status");
   await expect(newBanners).toHaveCount(2);
+  await context.close();
 });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/alertbox-daterange.spec.js` around lines 118 - 125, The browser context
created by browser.newContext() in this test is never closed before the test
ends, causing resource leaks. After the expect assertion on newBanners, add a
cleanup step to close the context by calling await context.close() to ensure
proper resource cleanup and prevent test flakiness.
🧹 Nitpick comments (1)
components/alertbox/js/alertbox-manager.js (1)

126-136: ⚡ Quick win

Add required JSDoc blocks for changed methods and class API surface.

The new/updated methods are missing the mandated JSDoc contract tags (@param, @throws, @fires, @example; and class-level @class / event docs as applicable).

As per coding guidelines, "**/*.js: Include JSDoc comments for all JavaScript classes and methods with @class, @param, @throws, @fires, @example tags..." and "**/*.{js,ts}: Document API methods with complete JSDoc signatures including @param types, @throws error conditions, @fires custom events, and @example usage code."

Also applies to: 155-192

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@components/alertbox/js/alertbox-manager.js` around lines 126 - 136, The
method `#containsDismissedBanner` and other methods in the affected range are
missing required JSDoc documentation blocks. Add JSDoc comments for each method
that include `@param` tags documenting the parameters (including their types),
`@throws` tags for any error conditions, and `@example` tags showing usage examples.
Ensure the documentation accurately reflects what each method does, what
parameters it accepts, and any exceptions it may throw according to the coding
guidelines.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/playwright.yml:
- Around line 34-37: The actions/checkout steps at lines 34, 62, and 90 are
using default credential persistence which increases token exposure risk when
jobs upload artifacts. Add persist-credentials: false to the with section of
each actions/checkout@v6 call to disable credential persistence. This
configuration change should be applied to all three checkout steps in the
workflow file to ensure credentials are not persisted in the CI environment.
- Around line 34-35: The GitHub Actions workflow uses tag-based references (such
as `actions/checkout@v6` and other `@v7` tags) instead of immutable full commit
SHAs, which weakens supply-chain security. Replace all tag-based action
references (on the lines specified: 34, 44, 62, 72, 90, 100) with their
corresponding full commit SHA hashes. For each action that currently uses a
version tag like `@v6` or `@v7`, look up the full commit SHA for that version
and replace the tag with the complete SHA hash format (similar to how the
pnpm/setup action is already pinned). Apply this change consistently across all
job definitions mentioned (checkout and other actions).
- Around line 20-21: The workflow jobs chromium and others starting at line 20
lack explicit permission restrictions for the GITHUB_TOKEN, causing them to
inherit overly permissive default scopes. Add a workflow-level permissions block
before the jobs section with minimal required permissions (such as contents:
read for read-only access). If any specific job or step requires elevated
permissions beyond the workflow-level minimum, add a job-level or step-level
permissions override for only those elevated permissions needed.

---

Outside diff comments:
In `@tests/alertbox-daterange.spec.js`:
- Around line 118-125: The browser context created by browser.newContext() in
this test is never closed before the test ends, causing resource leaks. After
the expect assertion on newBanners, add a cleanup step to close the context by
calling await context.close() to ensure proper resource cleanup and prevent test
flakiness.

---

Nitpick comments:
In `@components/alertbox/js/alertbox-manager.js`:
- Around line 126-136: The method `#containsDismissedBanner` and other methods
in the affected range are missing required JSDoc documentation blocks. Add JSDoc
comments for each method that include `@param` tags documenting the parameters
(including their types), `@throws` tags for any error conditions, and `@example`
tags showing usage examples. Ensure the documentation accurately reflects what
each method does, what parameters it accepts, and any exceptions it may throw
according to the coding guidelines.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a03ee91d-f664-4996-8f8a-b5f97bf485d9

📥 Commits

Reviewing files that changed from the base of the PR and between 5d5700b and 2c40069.

📒 Files selected for processing (7)
  • .github/workflows/playwright.yml
  • components/alertbox/js/alertbox-manager.js
  • playwright.config.js
  • tests/alertbox-daterange.spec.js
  • tests/alertbox-permanent.spec.js
  • tests/alertbox-session.spec.js
  • tests/alertbox.spec.js

Comment thread .github/workflows/playwright.yml
Comment thread .github/workflows/playwright.yml Outdated
Comment thread .github/workflows/playwright.yml Outdated
@schalkneethling schalkneethling merged commit a6b0829 into main Jun 20, 2026
9 checks passed
@schalkneethling schalkneethling deleted the 60-improve-playwright-in-ci branch June 20, 2026 10:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants