Playwright

What is End To End Testing?

End to end testing (E2E testing) refers to a software testing method that involves testing an application’s workflow from beginning to end.

Clarifying Terminology

Unit Tests

Tests for discrete units of code, e.g. pure functions or class methods

*In the context of UI dev

End to End Tests

Tests for user flows

Integration Tests

Tests for interactions between components or component composition

* Can run headless or headed, supports multiple rendering engines

* A framework for driving browser interactions and testing assertions

* Support for multiple languages, including TypeScript/JavaScript, Python, and .NET

What is Playwright?

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  // Navigate to page
  await page.goto('https://playwright.dev');

  // Select the page title element
  const title = page.locator('.navbar__title');

  // Test an assertion
  await expect(title).toHaveText('Playwright');
});

The Basics

Fixtures

Test fixtures are used to establish an environment for each test, giving the test everything it needs and nothing else.

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

// Uses the provided `page` fixture
test('basic test', async ({ page }) => {
  // ...
});

Selectors

Selectors are strings that are used to create Locators. Locators are used to perform actions on the elements by means of methods such as locator.click([options]), locator.fill(value[, options]) and alike.

// Select by text
await page.locator('text=Log in').click();

// Select via CSS selector
await page.locator('button').click();
await page.locator('#nav-bar .contact-us-item').click();

// Select based on layout
await page.locator('input:right-of(:text("Username"))').click();

Hooks & Assertions

Hooks are functions that receive test fixtures and key off lifecycle methods.

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

// Uses the provided `page` fixture
test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

Live Coding Exercise!

Write tests for React TodoMVC