spliit/prds/e2e-testing-setup.md

Setting Up E2E Testing with Playwright

Follow these steps to integrate Playwright for end-to-end testing in your application:

Step 1: Install Playwright

Install Playwright along with its testing library by running:

npm install --save-dev @playwright/test

This command sets up Playwright to manage automated browser interactions.

Step 2: Configure Playwright

Create a Playwright configuration file named playwright.config.ts at the root of your project with the following content:

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  testDir: './tests',
  timeout: 30000,
  retries: 1,
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
    ignoreHTTPSErrors: true,
    video: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    },
    {
      name: 'firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'webkit',
      use: { browserName: 'webkit' },
    },
  ],
};

export default config;

Step 3: Add E2E Test

Create a tests directory in the root of your project. Add E2E tests under this directory.

Example test file tests/example.spec.ts:

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('http://localhost:3000'); // replace with your local dev URL
  await expect(page).toHaveTitle(/Your App Title/); // update with your app's title
});

Step 4: Update Package.json

Add a script in package.json for running Playwright tests:

  "scripts": {
    ...
    "test:e2e": "playwright test"
  }

Step 5: Run the Test

Ensure your application is running locally, then execute your tests with:

npm run test:e2e

---

Additional Considerations

• If using CI/CD, adapt Playwright settings to accommodate environment constraints.
• Manage environment variables as necessary for successful testing.
• Utilize Playwright's global-setup.js and global-teardown.js for set up and tear down logic.

Follow these steps to effectively incorporate E2E testing into your build process using Playwright. For further customization or troubleshooting, consult Playwright's documentation.