Use PlayWright to test

Use PlayWright to test


Automated testing is a cornerstone of modern web development, ensuring that applications behave as expected. In this blog post, we’ll use TypeScript and Playwright to write a test for the Google homepage. This combination offers strong typing and powerful browser automation capabilities, making your tests more robust and maintainable.

Setting Up the Environment

1. Installing Playwright and TypeScript

First, ensure that you have Node.js installed. Then, create a new project directory and initialize it with npm:

mkdir google-homepage-test 
cd google-homepage-test npm init -y

Install Playwright and TypeScript:

npm install playwright 
npm install typescript --save-dev

Initialize a TypeScript project:

npx tsc --init

This creates a tsconfig.json file, where you can customize your TypeScript configuration.

2. Setting up Playwright

Create a basic Playwright test file. Let’s name it google.test.ts:

import { test, expectfrom '@playwright/test'
test('Google Homepage Test'async ({ page }) => 

    // Test steps will go here 

Writing the Test

1. Navigating to the Google Homepage

The first step is to navigate to the Google homepage:

await page.goto('');

2. Typing into the Search Box

Playwright allows you to select elements on the page and interact with them. To type a search term into Google’s search box:

await page.type('input[name="q"]''Playwright');

Here, input[name="q"] is the selector for the Google search box.

3. Clicking the Search Button

Next, simulate a click on the Google search button:


Note: You may need to wait for the element to be visible or clickable. Playwright provides options to handle these scenarios.

4. Asserting the Results

Finally, use assertions to verify that the search results page is displayed:

await expect(page).toHaveURL(''); 
await expect(page).toHaveTitle(/Playwright/);

These assertions check if the URL has changed to the search results page and if the page title contains ‘Playwright’.

Running the Test

To run your test, execute:

npx playwright test

Playwright will launch the browser, run the test, and provide a detailed results report.


Using TypeScript with Playwright for automated testing offers a robust and type-safe way to ensure your web applications work as expected. This example demonstrates a basic test, but Playwright’s capabilities extend further, allowing for comprehensive end-to-end testing of complex web applications.

Remember to explore Playwright’s extensive documentation to leverage its full potential in your testing strategy. Happy testing!


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.