Playwright Foundations in Playwright

Playwright Foundations is the first chapter of the free Playwright tutorial. It explains what Playwright is and how it works, sets up a real project, and then has you write, run and record your first tests.

What each lesson covers:

  • Introduction to Playwright: What Playwright is and why it was created, its history and features, the browsers, languages and platforms it supports, how it works (architecture, browser contexts, the protocol and auto-waiting), its tools and its three npm packages.
  • Installation and Project Setup: System requirements, npm init playwright@latest and its prompts, installing browsers, the project files, the VS Code extension and keeping Playwright up to date, all in a practice terminal.
  • Your First Playwright Test: The parts of a test, writing a test that acts and checks, running tests from the command line, reading results, the HTML report and recording tests with Codegen.

Every test box runs in the Playwright lab in your browser, against practice sites. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that run your tests and grade the results.

Lessons in this section

  1. Introduction to Playwright

    What Playwright is and why it was made, its history and features, the browsers, languages and platforms it supports, how it works (architecture, browser contexts, the protocol, auto-waiting), its tools and its three npm packages.

    • Explain what Playwright is and what an end-to-end test checks
    • Name the three browser engines and the four languages Playwright supports
    • Describe how a browser, a browser context and a page fit together
    • Explain auto-waiting and why fixed sleeps make tests flaky
  2. Installation and Project Setup

    System requirements, creating a project with npm init playwright@latest and its prompts, adding Playwright to an existing project, installing browsers (one at a time, with system dependencies, and where they are stored), the project files, the VS Code extension, and keeping Playwright up to date.

    • Check that Node.js is ready for Playwright
    • Create a Playwright project and answer the setup prompts
    • Install all browsers or just one, with or without system dependencies
    • Explain what each file in a new project is for
  3. Your First Playwright Test

    The parts of a test (import, test(), the page fixture, page.goto()), writing a test that acts and checks, running tests from the command line in one file or one browser, headless and headed mode, reading results (passed, failed, flaky, skipped), the HTML report, and recording tests with Codegen.

    • Name every part of a Playwright test
    • Write a test that opens a page, acts on it and checks the result
    • Run all tests, one file or one browser from the command line
    • Read passed, failed, flaky and skipped results