Skip to content

Playright html#406

Merged
chetanbothra merged 15 commits intostagingfrom
playright-html
Sep 24, 2025
Merged

Playright html#406
chetanbothra merged 15 commits intostagingfrom
playright-html

Conversation

@chetanbothra
Copy link
Contributor

@chetanbothra chetanbothra commented Sep 23, 2025

Description

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Summary by CodeRabbit

  • Tests

    • Migrated end-to-end testing to Playwright with enhanced reporting (HTML, JSON, traces, screenshots).
    • Improved artifact publishing for easier debugging and review.
    • More reliable and transparent test execution in CI.
  • Chores

    • Updated CI step labels to reflect Playwright-based testing.
    • Revamped Slack notifications with clearer success/failure summaries and direct report links.
    • Expanded environment configuration for consistent e2e runs across workflows.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Sep 23, 2025

Walkthrough

The CircleCI e2e workflows were updated to run Playwright-based tests, inject environment variables into x-e2e’s .env, adjust test commands and reporters, revise artifact collection paths, and change Slack result parsing and notifications to consume Playwright JSON output.

Changes

Cohort / File(s) Summary
Playwright test execution update
/.circleci/config.yml
Replace npm run test-all with npm run test:metamask -- --reporter=list,html,json in e2e-tests and e2e-playwright jobs; rename step labels to reference Playwright.
Env injection for x-e2e
/.circleci/config.yml
Write a large set of environment variables into x-e2e .env before running Playwright tests in both jobs.
Artifact handling changes
/.circleci/config.yml
Move Playwright outputs (test-results with JSON/trace/screenshots and playwright-report) to /tmp; publish /tmp/test-results and /tmp/playwright-report as CircleCI artifacts.
Slack notification refactor
/.circleci/config.yml
Parse /tmp/test-results/.last-run.json (status, failedTests); craft success/failure messages mentioning Playwright and include HTML report link; post via existing webhook.
Label/wording adjustments
/.circleci/config.yml
Update step names and descriptions from generic/mochawesome references to Playwright-specific phrasing across affected steps.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant CI as CircleCI Job (e2e-tests / e2e-playwright)
  participant Repo as x-e2e Repo
  participant PW as Playwright Runner
  participant FS as Artifact FS (/tmp)
  participant Slack as Slack Webhook

  CI->>Repo: Checkout x-e2e
  CI->>Repo: Write .env from injected environment variables
  CI->>PW: npm run test:metamask -- --reporter=list,html,json
  PW-->>CI: Exit code + outputs (JSON, traces, screenshots, HTML report)

  CI->>FS: Move test-results and playwright-report to /tmp
  CI->>CI: Store CircleCI artifacts (/tmp/test-results, /tmp/playwright-report)

  CI->>CI: Read /tmp/test-results/.last-run.json (status, failedTests)
  alt status == success
    CI->>Slack: Send "All Playwright UI tests passed" + HTML report link
  else status == failure
    CI->>Slack: Send "Playwright UI Tests Failed" + failed tests + report link
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • Adding Playwrite-e2e Testcases #402 — Also updates .circleci/config.yml to adjust Playwright e2e steps and environment variable injection for x-e2e, overlapping with this PR’s CI flow changes.

Suggested reviewers

  • sankhavaramsaitulasiram
  • boonet

Poem

I thump my paws: new tests take flight,
Playwright reports gleam through the night.
Traces, JSON, artifacts stored—
A carrot-shaped badge for passing score.
If flakes appear, I’ll hop and warn,
Slack bells ring—then back to corn. 🥕

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)
Check name Status Explanation Resolution
Title Check ⚠️ Warning The title "Playright html" loosely references the Playwright HTML report change but contains a typo ("Playright" vs "Playwright"), is not a complete sentence, and is too terse to clearly convey the primary change or scope of the PR. Please correct the spelling and replace the title with a concise, descriptive sentence such as "Run Playwright e2e tests and publish HTML report" or "Publish Playwright HTML report for e2e tests" so reviewers can quickly understand the main change.
Description Check ⚠️ Warning The PR description is just the repository template with placeholder dashes and contains no summary of changes, no testing details, no screenshots, and the "Types of changes" checklist is left unchecked, so it provides insufficient information for review; this makes it unclear what was changed and how it was validated. Please complete the template by adding a brief summary of the changes, explicit "How Has This Been Tested?" steps and environment details, any relevant screenshots or CI artifact links, and mark the appropriate box under "Types of changes"; include commands to run or reproduce the tests and any notes reviewers should be aware of.
✅ Passed checks (1 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch playright-html

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

  • Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
  • Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@cloudflare-workers-and-pages
Copy link

Deploying x with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3a0cd7a
Status: ✅  Deploy successful!
Preview URL: https://78b8c4b2.x-e62.pages.dev
Branch Preview URL: https://playright-html.x-e62.pages.dev

View logs

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

Caution

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

⚠️ Outside diff range comments (1)
.circleci/config.yml (1)

132-149: Sed replacements can corrupt values containing &, backslashes, or newlines; also fails if .env is missing.

Environment values like URLs or tokens commonly include &. In sed replacements, & expands to the matched text, breaking the output. Also, this assumes .env exists.

Suggested safer pattern within this step:

-            # Inject environment variables into .env file
+            # Inject environment variables into .env file (safe escaping; ensure .env exists)
+            escape_sed() { printf '%s' "$1" | sed -e 's/[\/&]/\\&/g'; }
+            [ -f .env ] || { [ -f .env.example ] && cp .env.example .env || touch .env; }
             sed -i "s|base_url_value|$BASE_URL|g" .env
-            sed -i "s|dry_run_value|$DRY_RUN|g" .env
+            sed -i "s|dry_run_value|$(escape_sed "$DRY_RUN")|g" .env
             sed -i "s|master_email_value|$MASTER_EMAIL|g" .env
             sed -i "s|master_wallet_value|$MASTER_WALLET|g" .env
-            sed -i "s|testmail_api_key_value|$TESTMAIL_API_KEY|g" .env
+            sed -i "s|testmail_api_key_value|$(escape_sed "$TESTMAIL_API_KEY")|g" .env
             sed -i "s|testmail_namespace_value|$TESTMAIL_NAMESPACE|g" .env
             sed -i "s|recovery_recipient_address_value|$RECOVERY_RECIPIENT_ADDRESS|g" .env
             sed -i "s|minimum_amount_value|$MINIMUM_AMOUNT|g" .env
             sed -i "s|headless_value|$HEADLESS|g" .env
             sed -i "s|timeout_value|$TIMEOUT|g" .env
             sed -i "s|debug_value|$DEBUG|g" .env
             sed -i "s|ci_value|$CI|g" .env
             sed -i "s|headed_value|$HEADED|g" .env
-            sed -i "s|sushi_url_value|$SUSHI_URL|g" .env
-            sed -i "s|staging_url_value|$STAGING_URL|g" .env
+            sed -i "s|sushi_url_value|$(escape_sed "$SUSHI_URL")|g" .env
+            sed -i "s|staging_url_value|$(escape_sed "$STAGING_URL")|g" .env
             sed -i "s|testmail_username_value|$TESTMAIL_USERNAME|g" .env
             sed -i "s|testmail_email_value|$TESTMAIL_EMAIL|g" .env
🧹 Nitpick comments (2)
.circleci/config.yml (2)

156-174: Ensure artifact dirs always exist to prevent downstream failures.

store_artifacts fails if the path is missing. Create placeholders so the artifact steps don’t error when directories aren’t produced.

Apply:

             echo "Contents of project root before move:"
             ls -lah /root/x-e2e/ || true
-      
+            # Ensure artifact directories exist to avoid store_artifacts failures
+            mkdir -p /tmp/test-results /tmp/playwright-report
+
             # Move test results (JSON, traces, screenshots)
             if [ -d "/root/x-e2e/test-results" ]; then
               mv /root/x-e2e/test-results /tmp/test-results
               chmod 777 -R /tmp/test-results
             fi

125-131: Cloning with token in URL—confirm masking and consider pinning a commit/branch.

CircleCI usually masks $GITHUB_TOKEN, but URLs can still leak in some contexts. Also, cloning a mutable branch (pillarx-playwright) makes runs non‑reproducible.

  • Prefer git config url."https://oauth2:${GITHUB_TOKEN}@github.com/".insteadOf "https://github.com/" and clone the normal URL.
  • Pin to a commit or tag for deterministic CI.
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 282110b and 3a0cd7a.

📒 Files selected for processing (1)
  • .circleci/config.yml (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: lint
  • GitHub Check: unit-tests
🔇 Additional comments (2)
.circleci/config.yml (2)

153-154: Verify Playwright reporter outputs and availability of .last-run.json.

--reporter=list,html,json prints JSON to stdout; combining with list can corrupt JSON if you later redirect it. Your Slack step relies on /tmp/test-results/.last-run.json and fields .status and .failedTests — these are version/feature-dependent.

Consider either:

  • Remove list and redirect JSON reporter to a file (ensures valid JSON to parse), or
  • Keep current reporters but confirm that .last-run.json is generated with the expected schema in your Playwright version. If not, adjust parsing or write a small post-run script to summarize failed tests.

177-182: Artifacts paths are correct; paired with the move step they’ll publish as expected.

Confirm CircleCI doesn’t fail the job when the directories are empty but present (the mkdir fix above addresses this).

@chetanbothra chetanbothra merged commit 38f6cf3 into staging Sep 24, 2025
6 checks passed
This was referenced Nov 25, 2025
Merged
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.

3 participants