Cleanup: root .gitignore, unignore package-lock.json, npm ci, playwright --with-deps, JS examples

[Copilot]

Applies the still-relevant cleanup from stale PR #27 against current main. Fixes CI reliability issues and documentation accuracy.

Changes

• New /.gitignore — root-level ignore for OS files, IDE artifacts, and logs (previously only automated-testing/.gitignore existed)
• automated-testing/.gitignore — remove package-lock.json entry; lockfile must be tracked for npm ci to work
• .github/workflows/ci.yml — npm install → npm ci for reproducible CI builds
• README.md — fix two instances of npx playwright install → npx playwright install --with-deps
• automated-testing/README.md:
  • Fix npx playwright install → npx playwright install --with-deps
  • Bump example workflow action versions v3 → v4 (checkout, setup-node, upload-artifact)
  • Convert TypeScript-style code examples to CommonJS JavaScript matching the actual codebase

Before (TypeScript, wrong):

import { Page, Locator } from '@playwright/test';
export class ExamplePage {
  readonly page: Page;
  constructor(page: Page) { ... }
}

After (CommonJS JS, correct):

class ExamplePage {
  constructor(page) {
    this.page = page;
    this.submitButton = page.getByRole('button', { name: 'Submit' });
  }
}
module.exports = { ExamplePage };

Original prompt

Fresh Repo Cleanup PR (replaces stale PR #27)

PR #27 had good cleanup ideas but is now stale with merge conflicts. This PR should apply the still-needed cleanup changes against the current main branch (commit 85fd567).

What to change:

1. Add a root .gitignore file

There is currently no root .gitignore — only automated-testing/.gitignore exists. Create a new /.gitignore at the repo root with standard entries:

# OS files
.DS_Store
Thumbs.db

# IDE
.vscode/
.idea/
*.swp
*.swo

# Logs
*.log

2. Unignore package-lock.json in automated-testing/.gitignore

Currently line 3 of automated-testing/.gitignore ignores package-lock.json. This is incorrect for CI — npm ci requires a lockfile. Remove the package-lock.json line from automated-testing/.gitignore.

The updated file should look like:

# Dependencies
node_modules/

# Test results
test-results/
playwright-report/
test-output/

# Environment files
.env

# OS files
.DS_Store
Thumbs.db

# IDE
.vscode/
.idea/
*.swp
*.swo

# Logs
*.log
npm-debug.log*

# Coverage
coverage/
.nyc_output/

3. Change npm install → npm ci in .github/workflows/ci.yml

On line 26 of .github/workflows/ci.yml, change:

        run: npm install

to:

        run: npm ci

This is a CI best practice — npm ci is faster, stricter, and ensures reproducible builds from the lockfile.

4. Fix npx playwright install → npx playwright install --with-deps in READMEs

In README.md (root):

• Line 128: change npx playwright install → npx playwright install --with-deps
• Line 272: change npx playwright install → npx playwright install --with-deps

In automated-testing/README.md:

• Line 86: change npx playwright install → npx playwright install --with-deps

The --with-deps flag ensures system dependencies (like libgbm, libatk, etc.) are also installed, which is critical for CI and fresh machines. The copilot-instructions.md already documents this as the correct command.

5. Fix TypeScript examples → JavaScript in automated-testing/README.md

The repo is 100% JavaScript (CommonJS with require), but the "Writing Tests" section in automated-testing/README.md shows TypeScript examples with import, export class, readonly, and type annotations. Convert these to match the actual codebase style:

Page Object Model Example (lines 249-265) — replace with:

// pages/ExamplePage.js
const { expect } = require('@playwright/test');

class ExamplePage {
  constructor(page) {
    this.page = page;
    this.submitButton = page.getByRole('button', { name: 'Submit' });
  }

  async clickSubmit() {
    await this.submitButton.click();
  }
}

module.exports = { ExamplePage };

Test Example (lines 270-289) — replace with:

// tests/ui/example.spec.js
const { test, expect } = require('@playwright/test');
const { ExamplePage } = require('../../pages/ExamplePage');

test('Example Test', async ({ page }) => {
  const examplePage = new ExamplePage(page);
  
  await test.step('Navigate to page', async () => {
    await page.goto('/example');
  });

  await test.step('Perform action', async () => {
    await examplePage.clickSubmit();
  });

  await test.step('Verify result', async () => {
    await expect(page).toHaveURL(/.*success/);
  });
});

Also fix the CI/CD example YAML in automated-testing/README.md (lines 212-243):

• Update actions/checkout@v3 → actions/checkout@v4
• Update actions/setup-node@v3 → actions/setup-node@v4
• Update actions/upload-artifact@v3 → actions/upload-artifact@v4

These should match what's actually in the repo's workflows (which already use v4 after PR #26 was merged).

Files to modify:

1. CREATE .gitignore (root) — new file
2. MODIFY automated-testing/.gitignore — remove package-lock.json line
3. MODIFY .github/workflows/ci.yml — npm install → npm ci
4. MODIFY README.md — npx playwright install → npx playwright install --with-deps (2 occurrences)
5. MODIFY automated-testing/README.md — fix --with-deps, TS→JS examples, action versions in YAML example

What NOT to change:

• Do not modify any JavaScript source files
• Do not modify any test files
• Do not modify DashboardPage.js (that's being handled by a separate PR)
• Do not change .github/workflows/automated-tests.yml (the main test workflow was already updated by PRs Fix critical CI failures: remove stale root configs, update actions to v4, add artifact upload #26/Stabilize flaky PIM tests and consolidate CI workflows #29/Optimize CI: Chromium-only runs, lower timeout, fewer retries, remove test.slow() #30)

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.