Skip to content

Add Playwright smoke tests#4541

Open
moizulfiqar wants to merge 1 commit intoOWASP:mainfrom
moizulfiqar:smoke/community-routes-smoke-tests
Open

Add Playwright smoke tests#4541
moizulfiqar wants to merge 1 commit intoOWASP:mainfrom
moizulfiqar:smoke/community-routes-smoke-tests

Conversation

@moizulfiqar
Copy link
Copy Markdown
Contributor

@moizulfiqar moizulfiqar commented Apr 12, 2026

Resolves #4403

Add Playwright smoke tests for the /community and /community/snapshots pages.

Verifies both routes load successfully
Confirms main heading/title is present
Checks that no console errors are emitted during page load
This is a minimal smoke test update for route coverage only.

Checklist

  • Required: I followed the contributing workflow
  • Required: I verified that my code works as intended and resolves the issue as described
  • Required: I ran make check-test locally: all warnings addressed, tests passed
  • I used AI for code, documentation, tests, or communication related to this PR

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 12, 2026

Walkthrough

Adds a new Playwright E2E test file for the Community pages, covering /community and /community/snapshots routes with smoke tests that verify page navigation, main headings visibility, absence of console errors, and presence of key UI elements including breadcrumbs and action links.

Changes

Cohort / File(s) Summary
E2E Community Tests
frontend/__tests__/e2e/pages/Community.spec.ts
New Playwright test file with smoke and UI rendering tests for Community and Snapshots pages, including GraphQL mocking, console error assertions, UI element verification, and breadcrumb validation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

Suggested labels

frontend, frontend-tests

Suggested reviewers

  • arkid15r
  • kasya
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Add Playwright smoke tests' is directly related to the changeset, which adds a new E2E test file with smoke tests for Community pages.
Linked Issues check ✅ Passed The PR fulfills all coding requirements from issue #4403: adds a smoke spec covering both /community and /community/snapshots routes, verifies page loads, checks for main heading presence, and validates no console errors during load.
Out of Scope Changes check ✅ Passed All changes are in-scope: a single new E2E test file for Community pages following existing patterns. No unrelated modifications to other files or functionality are present.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check ✅ Passed The PR description clearly outlines the addition of Playwright smoke tests for /community and /community/snapshots routes, matching the changeset perfectly.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

@sonarqubecloud
Copy link
Copy Markdown

Copy link
Copy Markdown
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.

🧹 Nitpick comments (2)
frontend/__tests__/e2e/pages/Community.spec.ts (2)

25-26: Replace fixed sleeps with deterministic load synchronization.

waitForTimeout(1000) introduces avoidable flakiness. Prefer a deterministic wait (e.g., load state or specific UI/network condition) before asserting console error count.

♻️ Proposed change
-    await page.waitForTimeout(1000)
+    await page.waitForLoadState('networkidle')
     expect(errors).toHaveLength(0)
...
-    await page.waitForTimeout(1000)
+    await page.waitForLoadState('networkidle')
     expect(errors).toHaveLength(0)

Also applies to: 51-52

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/__tests__/e2e/pages/Community.spec.ts` around lines 25 - 26, Replace
the fixed sleep (await page.waitForTimeout(1000)) with a deterministic wait to
avoid flakiness: wait for a reliable condition such as
page.waitForLoadState('networkidle') or a specific UI element via
page.waitForSelector(...) that indicates the page finished loading, or use
page.waitForFunction(...) to poll until the errors array/variable stabilizes
(e.g., errors.length === 0). Update both occurrences around the checks that use
expect(errors).toHaveLength(0) so the assertion runs only after the
deterministic readiness condition instead of a fixed timeout.

88-98: Avoid stacking duplicate GraphQL route handlers; make override explicit.

The same **/graphql/ mock is duplicated, and Line 109-Line 119 adds another handler on top of the beforeEach one. This makes handler precedence implicit and harder to reason about. Extract a helper and call page.unroute before redefining in the empty-state test.

♻️ Proposed refactor
+const mockSnapshotsQuery = async (page, snapshots = mockSnapshots) => {
+  await page.unroute('**/graphql/')
+  await page.route('**/graphql/', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ data: { snapshots } }),
+    })
+  })
+}
...
-    await page.route('**/graphql/', async (route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          data: {
-            snapshots: mockSnapshots,
-          },
-        }),
-      })
-    })
+    await mockSnapshotsQuery(page, mockSnapshots)
...
-    await page.route('**/graphql/', async (route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          data: {
-            snapshots: [],
-          },
-        }),
-      })
-    })
+    await mockSnapshotsQuery(page, [])

Also applies to: 109-119, 38-48

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/__tests__/e2e/pages/Community.spec.ts` around lines 88 - 98, The
test suite registers duplicate GraphQL route handlers via
page.route('**/graphql/') in beforeEach and again in the empty-state test,
making precedence implicit; update tests to explicitly unroute before redefining
and extract a helper to register the mock: call page.unroute('**/graphql/') at
start of the empty-state test (or any test that needs a different handler), then
use a shared helper function (e.g., registerGraphQLMock(page, responsePayload)
or setupGraphQLMock) to call page.route with the JSON response; also refactor
the beforeEach to use that helper so all handlers are created consistently and
overrides are explicit.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/__tests__/e2e/pages/Community.spec.ts`:
- Around line 25-26: Replace the fixed sleep (await page.waitForTimeout(1000))
with a deterministic wait to avoid flakiness: wait for a reliable condition such
as page.waitForLoadState('networkidle') or a specific UI element via
page.waitForSelector(...) that indicates the page finished loading, or use
page.waitForFunction(...) to poll until the errors array/variable stabilizes
(e.g., errors.length === 0). Update both occurrences around the checks that use
expect(errors).toHaveLength(0) so the assertion runs only after the
deterministic readiness condition instead of a fixed timeout.
- Around line 88-98: The test suite registers duplicate GraphQL route handlers
via page.route('**/graphql/') in beforeEach and again in the empty-state test,
making precedence implicit; update tests to explicitly unroute before redefining
and extract a helper to register the mock: call page.unroute('**/graphql/') at
start of the empty-state test (or any test that needs a different handler), then
use a shared helper function (e.g., registerGraphQLMock(page, responsePayload)
or setupGraphQLMock) to call page.route with the JSON response; also refactor
the beforeEach to use that helper so all handlers are created consistently and
overrides are explicit.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: eabcaa56-9020-416c-b26e-2c82a8f0974e

📥 Commits

Reviewing files that changed from the base of the PR and between 56c43d4 and 3fbc546.

📒 Files selected for processing (1)
  • frontend/__tests__/e2e/pages/Community.spec.ts

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

No issues found across 1 file

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Playwright smoke: /community

1 participant