Learn how to create Playwright Tests

Learn how to create Playwright Tests


In the fast-paced world of web development, ensuring the reliability and functionality of web applications is paramount. Playwright, a modern automation library, provides an efficient solution for testing web applications across multiple browsers. This blog post serves as a detailed guide to creating a Playwright test, covering everything from setup to writing and running tests.

What is Playwright?

Playwright is an open-source testing tool developed by Microsoft, designed for automated testing of web applications. It supports testing across Chrome, Firefox, and WebKit, offering a consistent API for all browsers. Playwright tests can simulate real-user interactions, making it a powerful tool for end-to-end testing.

Setting Up Playwright


Before writing tests, you must set up Playwright in your development environment.


  • Node.js installed on your machine.


  1. Create a project directory
  2. Initialize a Node.js project
  3. Install Playwright
  4. Initialize Playwright
mkdir playwright-tests && cd playwright-tests
npm init -y
npm i -D @playwright/test
npx playwright install

This process installs Playwright and its browser dependencies.

Writing Your First Test

Basic Test Structure

A Playwright test typically includes importing the necessary modules, writing the test function, and defining what actions the browser should take.

Example Test: Checking a Website’s Title

  1. Create a test file:
    • touch tests/example.spec.js
  2. Write the test
const { test, expect } = require('@playwright/test'); 
test('Check page title of example.com'async ({ page }) => {
   // Go to the website 
   await page.goto('https://example.com'); 
   // Check the title 
   const titleawait page.title();
   expect(title).toBe('Example Domain'); 

This test navigates to “example.com” and asserts that the page title is “Example Domain”.

Running the Test

To run the test, use the Playwright test runner:

npx playwright test

Playwright will execute the test and report its success or failure.

Advanced Testing Scenarios

Working with Selectors

Selectors are used to interact with elements on a web page. Playwright supports a variety of selectors like CSS, XPath, and text selectors.

Example: Clicking a Button

test('Click a button'async ({ page }) =>
    await page.goto('https://example.com'); 
    // Click a button by text 
    await page.click('text=Some Button Text'); 

Handling Inputs

Playwright can simulate user input, such as typing into text fields.

Example: Filling a Form

test('Fill a form'async ({ page }) =>
    await page.goto('https://example.com/form'); 
    // Fill text fields 
    await page.fill('#name''John Doe'); 
    await page.fill('#email''john@example.com'); 
    // Submit the form 
    await page.click('text=Submit'); 

Capturing Screenshots

Playwright can take screenshots, which is useful for visual verification and debugging.

Example: Taking a Screenshot

test('Take a screenshot'async ({ page }) =>
    await page.goto('https://example.com');
    await page.screenshot({ path: 'screenshot.png' }); 

Testing on Different Browsers

Playwright supports testing across different browsers. You can specify the browser in your test.

Example: Running Test on Firefox

const { test, expect, devices } = require('@playwright/test'); 

test('Test on Firefox'async ({ playwright }) =>
    const browserawait playwright.firefox.launch(); 
    const contextawait browser.newContext(); 
    const pageawait context.newPage(); 
    // ... your test steps 
    await browser.close(); 

Best Practices

  • Organize Tests: Group related tests into files and directories.
  • Use Descriptive Names: Name your tests and test files for easy identification.
  • Handle Asynchronous Code: Ensure proper handling of promises and async/await for reliable test execution.
  • Clean Up: Close browsers and clean up resources after tests to prevent memory leaks.


Playwright is a versatile and powerful tool for automated web testing, offering capabilities to simulate a wide range of user interactions. Following this guide, you can set up Playwright in your project, write meaningful tests, and run them across different browsers.

Whether you’re testing a simple web application or a complex web service, Playwright provides the tools to ensure your application performs as expected in the real world.

Remember, the key to effective testing is regular practice and continuously refining your test cases to cover various user scenarios.


Hi, my name is Stephen Finchett. I have been a software engineer for over 30 years and worked on complex, business critical, multi-user systems for all of my career. For the last 15 years, I have been concentrating on web based solutions using the Microsoft Stack including ASP.Net, C#, TypeScript, SQL Server and running everything at scale within Kubernetes.