Building Your First Playwright Test with TypeScript (Step-by-Step Tutorial)

This tutorial will guide you through installing Playwright with TypeScript and writing your first automated test. By the end, you will be able to launch a browser, navigate to a website, and verify a page title.

1. Prerequisites

1
Before starting, make sure you have the following installed: Node.js (v16 or later) npm or yarn VS Code or another code editor
Verify installation
```
javascript
1node -v
2npm -v
```
Warning
if not installed, please install node first
2
Install node playwright
Since you are working with Playwright automation, you can now install it:
```
javascript
1npm init playwright@latest
```

installation query

During installation, Playwright will ask some questions:

javascript
1✔ TypeScript or JavaScript? → TypeScript
2✔ Where to put your tests? → tests
3✔ Install Playwright browsers? → Yes
4✔ Add GitHub Actions workflow? → Optional

This will automatically install:

Playwright

TypeScript

Playwright Test Runner

Browser binaries

Project Structure

project look like

After installation, your project will look like this:

javascript
1playwright-demo
2│
3├── tests
4│   └── example.spec.ts
5│
6├── playwright.config.ts
7├── package.json
8└── node_modules

Steps

create a file

tests/homepage.spec.ts

javascript
1import { test, expect } from '@playwright/test';
2
3test('verify homepage title', async ({ page }) => {
4
5  await page.goto('https://example.com');
6
7  const title = await page.title();
8
9  console.log("Page Title:", title);
10
11  await expect(page).toHaveTitle('Example Domain');
12
13});

Run the test

Run all tests using:

javascript
1npx playwright test

8. View Test Report

Playwright automatically generates an HTML report.

Run:

typescript
1npx playwright show-report

This report shows:

Test results

Screenshots

Error logs

Execution time

Steps

Capture Screenshot Example

Example of capturing a screenshot:

javascript
1import { test } from '@playwright/test';
2
3test('take screenshot example', async ({ page }) => {
4
5  await page.goto('https://example.com');
6
7  await page.screenshot({
8    path: 'homepage.png'
9  });
10
11});

Steps

Example: Verify Login Button

Another example test:

javascript
1import { test, expect } from '@playwright/test';
2
3test('verify login button visibility', async ({ page }) => {
4
5  await page.goto('https://example.com');
6
7  const element = page.locator('h1');
8
9  await expect(element).toBeVisible();
10
11});

Building Your First Playwright Test with TypeScript (Step-by-Step Tutorial)

Building Your First Playwright Test with TypeScript (Step-by-Step Tutorial)

1. Prerequisites

Project Structure

Steps

8. View Test Report

Steps

Steps

About the Author