Add PlayWright

Author: Hypenate

.github/workflows/playwright.yml

@@ -40,3 +40,11 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

.gitignore

@@ -48,13 +48,47 @@ ng test
 
 ## Running end-to-end tests
 
-For end-to-end (e2e) testing, run:
+This project uses [Playwright](https://playwright.dev/) for end-to-end testing. 
 
+### Quick Start
+
+Run all tests:
+```bash
+npm run e2e
+```
+
+### Available Test Commands
+
+Run tests in UI mode (interactive):
+```bash
+npm run e2e:ui
+```
+
+Run tests in headed mode (see the browser):
+```bash
+npm run e2e:headed
+```
+
+Debug tests:
+```bash
+npm run e2e:debug
+```
+
+Generate tests using Codegen:
+```bash
+npm run e2e:codegen
+```
+
+### Advanced Options
+
+Run tests in a specific browser:
 ```bash
-ng e2e
+npx playwright test --project=chromium
+npx playwright test --project=firefox
+npx playwright test --project=webkit
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+For more information, visit the [Playwright documentation](https://playwright.dev/docs/intro).
 
 ## Additional Resources
 

README.md

@@ -7,7 +7,12 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "lint": "ng lint"
+    "lint": "ng lint",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
+    "e2e:headed": "playwright test --headed",
+    "e2e:debug": "playwright test --debug",
+    "e2e:codegen": "playwright codegen http://localhost:4200"
   },
   "private": true,
   "dependencies": {
@@ -28,7 +33,9 @@
     "@angular-devkit/build-angular": "^19.1.8",
     "@angular/cli": "^19.1.8",
     "@angular/compiler-cli": "^19.1.0",
+    "@playwright/test": "^1.56.1",
     "@types/jasmine": "~5.1.0",
+    "@types/node": "^24.9.1",
     "angular-eslint": "19.1.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.20.0",

package-lock.json

@@ -0,0 +1,50 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env['CI'],
+  /* Retry on CI only */
+  retries: process.env['CI'] ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env['CI'] ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('')`. */
+    baseURL: 'http://localhost:4200',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run start',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env['CI'],
+    timeout: 120 * 1000,
+  },
+});

package.json

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Bingo Application', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the app before each test
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+  });
+
+  test('should display the app root component', async ({ page }) => {
+    // Check if the Angular app root is present
+    const appRoot = page.locator('app-root');
+    await expect(appRoot).toBeVisible();
+  });
+
+  test('should have the correct page title', async ({ page }) => {
+    // Verify the page title
+    await expect(page).toHaveTitle(/Bingo/i);
+  });
+
+  // Add more tests specific to your Bingo application features
+  // Example tests you might want to add:
+
+  // test('should generate a bingo card', async ({ page }) => {
+  //   const generateButton = page.getByRole('button', { name: /generate/i });
+  //   await generateButton.click();
+  //
+  //   const bingoCard = page.locator('.bingo-card');
+  //   await expect(bingoCard).toBeVisible();
+  // });
+
+  // test('should mark a cell when clicked', async ({ page }) => {
+  //   const cell = page.locator('.bingo-cell').first();
+  //   await cell.click();
+  //
+  //   await expect(cell).toHaveClass(/marked/);
+  // });
+});
+

playwright.config.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Bingo App', () => {
+  test('should load the homepage', async ({ page }) => {
+    await page.goto('/');
+
+    // Wait for Angular to load
+    await page.waitForLoadState('networkidle');
+
+    // Check if the page loaded successfully
+    await expect(page).toHaveTitle(/Bingo/i);
+  });
+
+  test('should have working navigation', async ({ page }) => {
+    await page.goto('/');
+
+    // Wait for Angular to load
+    await page.waitForLoadState('networkidle');
+
+    // Add more specific tests based on your app's features
+    // For example, if you have a header or navigation elements:
+    // await expect(page.locator('app-root')).toBeVisible();
+  });
+});
+