Use PlayWright to test www.google.com

Introduction

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, expect } from '@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('https://www.google.com');

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:

await page.click('input[name="btnK"]');

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('https://www.google.com/search'); 
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.

Conclusion

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!

Related posts:

Learn how to create Playwright Tests Understanding Playwright’s Screen Capture Testing Popup Windows with TypeScript and Playwright Testing Date Pickers with Playwright and TypeScript