What Is Playwright? Features, Architecture and Why Testers Use It

Welcome to Lesson 1 of the free Playwright with TypeScript tutorial. Before writing any code, you will understand what Playwright is, what it can test, how it works under the hood, and why it has become one of the most popular test automation tools.

---

🎭 Playwright in One Sentence

Playwright is a free, open-source framework from Microsoft for automating web browsers and testing web applications end to end. You write code that opens a browser, clicks, types and navigates like a real user, then checks that the application behaves correctly.

It was first released in January 2020 by a Microsoft team that had previously built Puppeteer at Google. Since then it has become one of the fastest-growing test automation tools, and many teams now choose it for new projects instead of Selenium or Cypress.

---

🧰 What Can You Do with Playwright?

• End-to-end UI testing: log in, fill forms, add items to a cart, check out, and verify the result.
• API testing: send GET, POST, PUT and DELETE requests and check responses, in the same framework.
• Cross-browser testing: run the same test on Chromium (Chrome, Edge), Firefox and WebKit (the engine behind Safari).
• Mobile web testing: emulate phones and tablets such as iPhone and Pixel (screen size, touch, user agent).
• Visual testing: compare screenshots to catch unexpected UI changes.
• Network control: intercept, block or mock requests to test edge cases.
• Web scraping and automation tasks: generate PDFs, take screenshots and automate repetitive browser work.

---

⭐ Key Features That Make Playwright Popular

Feature	What it means for you
Auto-waiting	Playwright waits for elements to be ready before acting, so you rarely write manual waits
Web-first assertions	expect(...) checks retry automatically until they pass or time out
Browser contexts	Each test gets a fresh, isolated browser profile in milliseconds
Built-in test runner	Parallel runs, retries, reports, fixtures and annotations without extra libraries
Multiple languages	JavaScript, TypeScript, Python, Java and .NET
Powerful tooling	Codegen (record tests), Inspector, UI mode, Trace Viewer, VS Code extension
Multi-tab and multi-user	Test several tabs, windows, users and origins in one test
Free and open source	Apache 2.0 licence, no paid tier required for parallel runs

---

🏗️ Playwright Architecture Explained Simply

Playwright has three layers:

1. Your test code (for example a .spec.ts file written in TypeScript).
2. The Playwright driver, a Node.js process that receives your commands.
3. The browsers, which the driver controls over a fast, persistent WebSocket connection. For Chromium it uses the Chrome DevTools Protocol; for Firefox and WebKit it uses Playwright’s own patched browser builds that expose similar protocols.

Because the connection stays open, commands do not need a new HTTP request each time, which is one reason Playwright is fast and stable compared with tools based on the classic WebDriver protocol. You can read a full comparison in Playwright vs Selenium vs Cypress.

Browser, Context and Page

These three objects appear in every Playwright test, so learn them now:

• Browser: a running browser instance such as Chromium.
• BrowserContext: an isolated session inside the browser, like a fresh incognito window, with its own cookies and storage. Contexts are cheap to create, so every test gets its own.
• Page: a single tab inside a context. Most of your code uses page.

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();       // Browser
  const context = await browser.newContext();    // BrowserContext (isolated session)
  const page = await context.newPage();          // Page (a tab)

  await page.goto('https://sqatools.in');
  console.log(await page.title());
  await browser.close();
})();

---

📦 Playwright Library vs Playwright Test

	Playwright Library (playwright)	Playwright Test (@playwright/test)
What it is	Browser automation API only	Full test framework built on the library
Test runner, assertions, reports	Not included	Included
Best for	Scripts, scraping, custom tools	Automated testing

In this course we use Playwright Test with TypeScript, the setup recommended by the Playwright team for testing.

---

🌍 Supported Browsers, Platforms and Languages

• Browsers: Chromium (also branded Google Chrome and Microsoft Edge), Firefox and WebKit.
• Operating systems: Windows, macOS and Linux, locally or in CI, headed or headless.
• Languages: TypeScript, JavaScript, Python, Java and C#/.NET.

---

⚠️ Limitations to Know

• Playwright tests web applications. It does not automate native Android or iOS apps (use Appium for those) or desktop apps.
• WebKit is tested through Playwright’s own build, not the branded Safari application.
• Some features, such as the full test runner with fixtures, are richest in the TypeScript/JavaScript version.

---

🗺️ What You Will Learn Next

This lesson is the start of the free Playwright Tutorial with TypeScript. Next you will learn testing fundamentals and compare tools, then install Playwright and write your first test.

---

📝 Assignment

1. In your own words, write down the difference between a Browser, a BrowserContext and a Page.
2. List three features of Playwright that reduce flaky tests, and explain why each helps.
3. Visit playwright.dev and find the list of supported languages. Which one will you use, and why?
4. Think of one web application you use daily. Write five user actions you would automate with Playwright.

---

❓ FAQ

🤔 What is Playwright used for?

Mainly for automated end-to-end testing of web applications across Chromium, Firefox and WebKit. It is also used for API testing, visual testing and general browser automation.

🤔 Is Playwright free?

Yes. Playwright is open source under the Apache 2.0 licence, including parallel execution and all tooling.

🤔 Is Playwright a testing tool or a library?

Both. The playwright package is an automation library, and @playwright/test is a complete testing framework built on top of it.

🤔 Who maintains Playwright?

Microsoft maintains Playwright as an open-source project on GitHub, with frequent releases.

🤔 Is Playwright better than Selenium?

For most new web projects it is faster to set up and less flaky. Selenium still wins for wider language support and some legacy setups. See Playwright vs Selenium vs Cypress.