chore(test cases): add playwright for e2e tests #132

DeepakSF25 · 2025-11-25T06:58:11Z

Description

Implemented Playwright E2E testing with project-specific configurations in e2e folder for arc-docs, arc, and saas-ui projects, each with isolated test suites, dedicated ports, and independent execution capabilities.

Fixes # (131)

Type of change

Please delete options that are not relevant.

New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Tested locally

Checklist:

Performed a self-review of my own code
npm test passes on your machine
New tests added or existing tests modified to cover all changes
Code conforms with the style guide
API Documentation in code was updated
Any dependent changes have been merged and published in downstream modules

GH-131

Copilot

Pull request overview

This PR implements Playwright E2E testing infrastructure for a multi-project Angular workspace, establishing project-specific test configurations for arc-docs, arc, and saas-ui applications. The implementation includes comprehensive test coverage for the arc-docs application with 7 test scenarios covering navigation, page loading, and content verification, along with detailed test plans and documentation.

Key Changes:

Added Playwright v1.56.1 as a dev dependency with project-specific configurations in e2e/<project-name>/ directories
Implemented comprehensive E2E test suite for arc-docs with tests organized by feature (navigation, getting-started, guide, auth)
Created supporting documentation (PLAYWRIGHT.md, e2e/README.md) and a detailed 782-line test plan for arc-docs

Reviewed changes

Copilot reviewed 20 out of 22 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
playwright.config.ts	Root Playwright config with minimal settings for cross-project test orchestration
package.json	Added Playwright dependency and e2e npm scripts for running tests per project
package-lock.json	Locked Playwright v1.56.1 and dependencies; contains unrelated @stripe/stripe-js downgrade
e2e/arc-docs/playwright.config.ts	Project-specific config for arc-docs (port 4200) with multi-browser testing setup
e2e/arc/playwright.config.ts	Project-specific config for arc (port 4201), but missing test files
e2e/saas-ui/playwright.config.ts	Project-specific config for saas-ui (port 4202), but missing test files
e2e/arc-docs/tests/seed.spec.ts	Basic smoke test serving as template for arc-docs tests
e2e/arc-docs/tests/navigation-and-page-loading/*.spec.ts	Tests for initial page load, direct URL navigation, and menu expansion
e2e/arc-docs/tests/getting-started/*.spec.ts	Tests for Getting Started section navigation
e2e/arc-docs/tests/guide/*.spec.ts	Tests for Guide section navigation
e2e/arc-docs/tests/auth/*.spec.ts	Tests for Auth section navigation and UI components
e2e/arc-docs/tests/arc-docs-test-plan.md	Comprehensive 782-line test plan with 15 test scenarios (contains spelling errors)
e2e/README.md	Quick reference guide for running E2E tests (references missing npm scripts)
PLAYWRIGHT.md	Detailed 427-line documentation covering setup, configuration, and best practices (references missing npm scripts)
.vscode/mcp.json	VS Code configuration for Playwright MCP server (command may be invalid)
.gitignore	Added Playwright-related directories to ignore list

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-25T08:45:15Z

package.json

+    "e2e": "playwright test --config=e2e/arc-docs/playwright.config.ts",
+    "e2e:all": "npm run e2e:arc-docs && npm run e2e:arc && npm run e2e:saas-ui",
+    "e2e:arc-docs": "playwright test --config=e2e/arc-docs/playwright.config.ts",
+    "e2e:arc": "playwright test --config=e2e/arc/playwright.config.ts",
+    "e2e:headed": "playwright test --headed --config=e2e/arc-docs/playwright.config.ts",


Multiple npm scripts documented in e2e/README.md and PLAYWRIGHT.md are missing from package.json:

e2e:ui:arc-docs - UI mode for arc-docs

e2e:ui:arc - UI mode for arc

e2e:ui:saas-ui - UI mode for saas-ui

e2e:debug:arc-docs - Debug mode for arc-docs

e2e:debug:arc - Debug mode for arc

e2e:debug:saas-ui - Debug mode for saas-ui

e2e:report:arc-docs - View reports for arc-docs

e2e:report:arc - View reports for arc

e2e:report:saas-ui - View reports for saas-ui

These should be added or the documentation should be updated to remove references to non-existent scripts.

Copilot · 2025-11-25T08:45:16Z

e2e/arc-docs/tests/arc-docs-test-plan.md

+   - Introduction
+   - Installation
+   - Getting User Token
+   - Setting Up Api Configration


Spelling error: "Configration" should be "Configuration"

Suggested change

- Setting Up Api Configration

- Setting Up Api Configuration

Copilot · 2025-11-25T08:45:16Z

playwright.config.ts

+  // This config is intentionally minimal as project-specific configs are in subdirectories
+  // You can run tests from specific project directories or use the npm scripts
+
+  testDir: './e2e',


[nitpick] The root config sets testDir: './e2e', but project-specific configs are nested within subdirectories. This configuration may not work as intended since tests are actually in ./e2e/arc-docs/tests/, ./e2e/arc/tests/, etc. Consider either removing the root config entirely (since all tests run through project-specific configs) or clarifying its purpose if it's meant as a template only.

Suggested change

testDir: './e2e',

kept for reference

Copilot · 2025-11-25T08:45:16Z

package.json

+    "e2e": "playwright test --config=e2e/arc-docs/playwright.config.ts",
+    "e2e:all": "npm run e2e:arc-docs && npm run e2e:arc && npm run e2e:saas-ui",
+    "e2e:arc-docs": "playwright test --config=e2e/arc-docs/playwright.config.ts",
+    "e2e:arc": "playwright test --config=e2e/arc/playwright.config.ts",


Missing npm script definition for e2e:saas-ui. The script is referenced in e2e:all on line 15, and extensively documented in PLAYWRIGHT.md and e2e/README.md, but is not defined in the scripts section. Add:

"e2e:saas-ui": "playwright test --config=e2e/saas-ui/playwright.config.ts",

Suggested change

"e2e:arc": "playwright test --config=e2e/arc/playwright.config.ts",

"e2e:arc": "playwright test --config=e2e/arc/playwright.config.ts",

"e2e:saas-ui": "playwright test --config=e2e/saas-ui/playwright.config.ts",

Copilot · 2025-11-25T08:45:17Z

e2e/arc-docs/tests/arc-docs-test-plan.md

+3. Click on "Setting Up Api Configration"
+4. Verify page loads
+
+**Expected Results:**
+
+- URL changes to `/docs/auth-doc/configureEnvs`
+- Page content loads successfully
+- "Setting Up Api Configration" menu item is highlighted as active


Spelling error: "Configration" should be "Configuration"

Suggested change

3. Click on "Setting Up Api Configration"

4. Verify page loads

**Expected Results:**

- URL changes to `/docs/auth-doc/configureEnvs`

- Page content loads successfully

- "Setting Up Api Configration" menu item is highlighted as active

3. Click on "Setting Up Api Configuration"

4. Verify page loads

**Expected Results:**

- URL changes to `/docs/auth-doc/configureEnvs`

- Page content loads successfully

- "Setting Up Api Configuration" menu item is highlighted as active

Copilot · 2025-11-25T08:45:17Z

e2e/arc-docs/tests/arc-docs-test-plan.md

+3. Click on "Setting Up Api Configration"
+4. Verify page loads
+
+**Expected Results:**
+
+- URL changes to `/docs/auth-doc/configureEnvs`
+- Page content loads successfully
+- "Setting Up Api Configration" menu item is highlighted as active


Spelling error: "Configration" should be "Configuration"

Suggested change

3. Click on "Setting Up Api Configration"

4. Verify page loads

**Expected Results:**

- URL changes to `/docs/auth-doc/configureEnvs`

- Page content loads successfully

- "Setting Up Api Configration" menu item is highlighted as active

3. Click on "Setting Up Api Configuration"

4. Verify page loads

**Expected Results:**

- URL changes to `/docs/auth-doc/configureEnvs`

- Page content loads successfully

- "Setting Up Api Configuration" menu item is highlighted as active

Copilot · 2025-11-25T08:45:18Z

.vscode/mcp.json

+      "command": "npx",
+      "args": [
+        "playwright",
+        "run-test-mcp-server"


The command playwright run-test-mcp-server does not appear to be a valid Playwright CLI command. The standard Playwright commands are test, show-report, codegen, etc. This configuration may not work as intended. Verify this command exists or update to use valid Playwright commands.

Suggested change

"run-test-mcp-server"

"test"

false positive

rohit-sourcefuse · 2025-11-25T08:47:58Z

This PR lays out a strong foundation for Playwright E2E across multiple Angular apps with clean configuration and project separation. However, a few things should be addressed to make the E2E setup robust and future-proof:

1. Missing Tests for arc and saas-ui

There's no working test suite or even a basic smoke test for arc and saas-ui. Please add something like:

// e2e/arc/tests/smoke.spec.ts
import { test, expect } from '@playwright/test';

test('arc home page loads', async ({ page }) => {
  await page.goto('http://localhost:4201');
  await expect(page.getByRole('heading')).toHaveText(/Arc Home/i);
});

Similar is needed for saas-ui to avoid silent failures.

2. Page Object Pattern

Shared selectors and repeated logic should move into page objects. Example structure:

// e2e/arc/page-objects/header.po.ts
export class Header {
  constructor(private readonly page) {}
  logo() { return this.page.getByRole('img', { name: 'Logo' }); }
  navLink(name: string) { return this.page.getByRole('link', { name }); }
}
// Usage:
import { Header } from '../page-objects/header.po';
const header = new Header(page);
await expect(header.logo()).toBeVisible();

3. Negative/Edge Case Coverage

All tests currently cover only positive paths. Please include cases for 404s, invalid inputs, route guards, and error states. Example:

test('shows 404 for unknown page', async ({ page }) => {
  await page.goto('http://localhost:4201/non-existent-page');
  await expect(page.getByText('Page Not Found')).toBeVisible();
});

4. CI/CD Integration

No CI config is provided for E2E. Recommend adding GitHub Actions that runs Playwright, collects traces/videos, and fails the build on test errors.

5. Test Naming

Add and enforce clear naming conventions for test/spec files, e.g. feature.spec.ts for easier tracking in reports.

Potential Issues

Parallel dev server runs may cause port collisions if ports are reused.
Retry logic is basic. If some tests are flaky, consider backoff, more explicit waits, or separating longer-running flows.

Summary:

Expand coverage for all projects, build out shared page objects, include negative testing, and clarify CI handling. These changes will enhance reliability and help the E2E suite scale with the monorepo.

GH-131

chore(test cases): add playwright for e2e tests

86537d2

GH-131

rohit-sourcefuse requested a review from Copilot November 25, 2025 08:40

rohit-sourcefuse assigned DeepakSF25 Nov 25, 2025

rohit-sourcefuse linked an issue Nov 25, 2025 that may be closed by this pull request

integration of Playwright for e2e tests #131

Open

Copilot started reviewing on behalf of rohit-sourcefuse November 25, 2025 08:40 View session

Copilot finished reviewing on behalf of rohit-sourcefuse November 25, 2025 08:44

Copilot AI reviewed Nov 25, 2025

View reviewed changes

rohit-sourcefuse requested review from Tyagi-Sunny, piyushsinghgaur1 and yeshamavani November 25, 2025 09:20

Deepak Kumar added 3 commits November 26, 2025 11:59

chore(test cases): update readme

54a74c3

GH-131

chore(test cases): update readme files

a95ed5a

GH-131

chore(test cases): update playwright.md

cca6720

GH-131

	"e2e:arc": "playwright test --config=e2e/arc/playwright.config.ts",
	"e2e:arc": "playwright test --config=e2e/arc/playwright.config.ts",
	"e2e:saas-ui": "playwright test --config=e2e/saas-ui/playwright.config.ts",

chore(test cases): add playwright for e2e tests #132

Are you sure you want to change the base?

chore(test cases): add playwright for e2e tests #132

Uh oh!

Conversation

DeepakSF25 commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

How Has This Been Tested?

Checklist:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

DeepakSF25 Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

DeepakSF25 Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

DeepakSF25 Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

DeepakSF25 Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

DeepakSF25 Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

DeepakSF25 Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

DeepakSF25 Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

rohit-sourcefuse commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

DeepakSF25 commented Nov 25, 2025 •

edited

Loading

rohit-sourcefuse commented Nov 25, 2025 •

edited

Loading