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
Playwright
By Cameron Sampson
