Skip to content

Installation Guide for Playwright with TypeScript

Installation Guide for Playwright with TypeScript

Step 1: Prerequisites

  • Ensure you have Node.js (>= 12) installed. You can download it from Node.js.

Step 2: Initialize Your Project

  1. Create a new directory for your project and navigate into it:
mkdir my-playwright-project
cd my-playwright-project
  1. Initialize a new Node.js project:
npm init -y

Step 3: Install Playwright and TypeScript

  1. Install Playwright and TypeScript:
npm install @playwright/test typescript ts-node @types/node

Step 4: Install Browsers

  1. Install the required browsers:
npx playwright install

Step 5: Create the Directory Structure

  1. Create the following directory structure:
my-playwright-project/
├── src/
│   ├── pages/
│   │   └── LoginPage.ts
│   └── tests/
│       └── login.test.ts
│       └── api.test.ts
├── package.json
└── tsconfig.json

Adding a New UI Test Following the Page Object Model Design Pattern

Step 1: Create the Page Object

  1. Create a file for your specific page, e.g., LoginPage.ts:
// src/pages/LoginPage.ts
import { Page } from '@playwright/test';

class LoginPage {
  private page: Page;
  private usernameInput = 'input[name="username"]';
  private passwordInput = 'input[name="password"]';
  private submitButton = 'button[type="submit"]';

  constructor(page: Page) {
    this.page = page;
  }

  async navigate() {
    await this.page.goto('https://example.com/login');
  }

  async enterUsername(username: string) {
    await this.page.fill(this.usernameInput, username);
  }

  async enterPassword(password: string) {
    await this.page.fill(this.passwordInput, password);
  }

  async submit() {
    await this.page.click(this.submitButton);
  }
}

export default LoginPage;

Step 2: Create the Test File

  1. Create a test file, e.g., login.test.ts:
// src/tests/login.test.ts
import { test, expect } from '@playwright/test';
import LoginPage from '../pages/LoginPage';

test('User can log in', async ({ page }) => {
  const loginPage = new LoginPage(page);

  await loginPage.navigate();
  await loginPage.enterUsername('testuser');
  await loginPage.enterPassword('password123');
  await loginPage.submit();

  // Add your assertion here
  // For example, checking the URL after login
  await expect(page).toHaveURL('https://example.com/dashboard');
});

Adding an API Test Using Playwright

Step 1: Create the API Test

  1. Create a file for your API tests, e.g., api.test.ts:
// src/tests/api.test.ts
import { test, expect, request } from '@playwright/test';

test('GET /users returns a list of users', async ({}) => {
  const apiContext = await request.newContext();
  const response = await apiContext.get(
    'https://jsonplaceholder.typicode.com/users',
  );

  expect(response.ok()).toBeTruthy();
  const users = await response.json();
  expect(users.length).toBeGreaterThan(0);
});

test('POST /users creates a new user', async ({}) => {
  const apiContext = await request.newContext();
  const response = await apiContext.post(
    'https://jsonplaceholder.typicode.com/users',
    {
      data: {
        name: 'John Doe',
        username: 'johndoe',
        email: 'john.doe@example.com',
      },
    },
  );

  expect(response.ok()).toBeTruthy();
  const user = await response.json();
  expect(user.name).toBe('John Doe');
});

Step 2: Run Your Tests

  1. Add a script in your package.json to run Playwright tests:
"scripts": {
    "test": "playwright test"
}
  1. Run your tests:
npm test

This guide covers the basic setup for Playwright with TypeScript, creating a UI test using the Page Object Model, and adding an API test. For more advanced configurations and best practices, refer to the Playwright documentation.

Back to top