Getting Started & Architecture

Guided briefing

Getting Started & Architecture video demo

A practical screen-share style walkthrough for chapter 1, showing how the Playwright idea works in TypeScript and Java.

Briefing focus

Why Playwright, and why now?

This is a structured lesson briefing. Real video/audio can be added later as a media source.

Estimated time

10 min

1. 1Why Playwright, and why now?
2. 2Install & scaffold
3. 3Your first Playwright test

Transcript brief

Understand why Playwright is different, how its architecture enables true cross-browser testing, and scaffold your first test in TypeScript or Java. The video brief explains the mental model first, then demonstrates the workflow using the course code samples, and finishes with reliability checks you can apply in CI.

Key takeaways

• Translate the concept into a maintainable Playwright test.
• Understand the TypeScript and Java equivalents without changing the test intent.
• Avoid the common source of flaky or slow end-to-end tests for this topic.

Why Playwright, and why now?

Playwright is a browser automation framework built by the original Puppeteer team at Microsoft. It talks directly to Chromium, Firefox and WebKit through a single API over the DevTools Protocol, making it genuinely cross-browser. Unlike Selenium, it ships its own browsers, its own drivers, and an architecture designed for modern web apps.

Playwright runner

The test runner that drives browsers, manages parallel workers, collects traces, videos and screenshots.

Browser context

An incognito-like isolated session. Each test gets its own context — no cookie or storage leakage between tests.

Page

A single tab within a context. All interactions (click, fill, navigate) flow through a Page object.

Locator

Playwright's first-class way to refer to an element. Locators auto-retry and re-evaluate on every use.

Install & scaffold

# Scaffold a new project
npm init playwright@latest

# Pick TypeScript, pick the GitHub Actions workflow when prompted.
# Playwright downloads Chromium, Firefox and WebKit binaries.

# Run the example test
npx playwright test

# Open the HTML report
npx playwright show-report

Your first Playwright test

// tests/homepage.spec.ts
import { test, expect } from '@playwright/test';

test('homepage has a CTA', async ({ page }) => {
  await page.goto('https://qatraining.uk');
  await expect(page.getByRole('heading', { name: /master software testing/i })).toBeVisible();
  await page.getByRole('link', { name: /start learning/i }).click();
  await expect(page).toHaveURL(/\/learn/);
});