In modern web development, ensuring your application works flawlessly across different environments is crucial. End-to-end (E2E) testing helps developers verify that the entire system functions as expected from the user's perspective. This tutorial guides you through implementing E2E tests for an Astro project using Playwright, a powerful testing framework.

Prerequisites

  • Node.js installed on your machine
  • Basic knowledge of Astro framework
  • Familiarity with Playwright
  • A working Astro project setup

Step 1: Install Playwright

Begin by installing Playwright and its testing dependencies. Run the following command in your project directory:

npm install -D @playwright/test

Step 2: Configure Playwright

Create a configuration file named playwright.config.js in your project root. This file customizes test settings and browsers.

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

export default defineConfig({
  testDir: './tests',
  timeout: 30000,
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
  ],
});

Step 3: Write Your First E2E Test

Create a tests directory in your project root. Inside, add a file named astro.spec.ts and include the following test:

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

test('Homepage loads correctly', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveTitle(/My Astro Site/);
  await expect(page.locator('text=Welcome to Astro')).toBeVisible();
});

Step 4: Run Your Astro Development Server

Before executing tests, ensure your Astro site is running locally. Use the command:

npm run dev

Step 5: Execute Playwright Tests

Open a new terminal window, and run the tests with:

npx playwright test

Step 6: Automate Testing in CI/CD

Integrate your Playwright tests into your CI/CD pipeline to automate testing on every commit or deployment. Use commands like:

npx playwright test --project=chromium

Best Practices for E2E Testing with Playwright

  • Keep tests independent to avoid flaky results.
  • Use fixtures to set up consistent test environments.
  • Mock external API calls when necessary to speed up tests.
  • Regularly update tests to reflect UI changes.

Conclusion

Implementing E2E tests with Playwright in your Astro projects enhances reliability and user experience. By following this step-by-step guide, developers can ensure their applications perform well across browsers and environments, ultimately delivering a better product to users.