Writing your first end-to-end test with Playwright

Are you ready to dive into modern web automation? Whether you're a developer or a tester, Playwright is one of the most powerful tools to write fast, reliable end-to-end (E2E) tests for modern web applications. In this guide, we'll walk you through writing your first E2E test with Playwright from setup to execution.

Let's get started!

What is End-to-End Testing?

End-to-End (E2E) testing simulates real user interactions in a browser. It tests your application from start to finish, including UI, APIs, and backend interactions, ensuring everything works together as expected.

Playwright makes E2E testing smooth by offering:

• Support for multiple browsers (Chromium, Firefox, WebKit)
• Auto-waiting for elements
• Fast parallel execution
• Rich features like network mocking, device emulation, and more

Step 1: Set Up Your Project

Before writing your first test, let's set up a Playwright testing environment.

Prerequisites

Make sure you have Node.js installed on your machine.

Initialize a New Project

This command will:

• Install Playwright and its dependencies
• Ask you a few setup questions (choose TypeScript or JavaScript based on your preference)
• Set up a sample project with example tests

Once done, your folder structure will look like this:

Step 2: Create Your First Test

Let's create a simple test that:

• Opens a browser
• Navigates to a website (e.g., https://playwright.dev)
• Verifies the title of the page

Create a test file tests/firstTest.spec.ts

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

test('Verify Playwright homepage title', async ({ page }) => {
  // Navigate to the Playwright website
  await page.goto('https://playwright.dev');

  // Assert the title
  await expect(page).toHaveTitle(/Playwright/);
});

Step 3: Run the Test

Use the Playwright test runner to execute your test:

You'll see output like:

Congratulations, you've just written and run your first Playwright E2E test!