Playwright E2E Test Automation with AI for Beginners

Overview of Playwright locator strategies covered in this section: getByRole, getByText, getByLabel, basic actions like click and fill, and toBeVisible assertions.

HTML tags, attributes, id/class attributes, and ARIA roles explained for Playwright locator strategy, using browser DevTools element inspection.

Playwright's auto-waiting mechanism, default 5-second timeout for locators, and toBeVisible assertion timeout behavior demonstrated with a real test failure.

Setting up a local Node.js/Express practice application with npm install and npm start, plus Playwright project initialization, webServer config, and baseURL configuration.

getByRole locator basics: role-based element selection, name filtering with accessible names, exact matching, and toBeVisible assertions on heading elements.

Using getByRole to query list and listitem elements, chaining locators, the .all() method for locator arrays, and toBeTruthy assertions on text content.

getByRole with button and link roles, name and exact filters, strict mode violations, not.toBeVisible assertions, and handling cookie banner interactions.

getByText locator for dynamic and validation text, the nth() and first() methods, toBeHidden/toBeVisible assertions, and comparison with getByRole for hidden elements.

getByLabel locator for form fields, fill and clear actions, plus overview of getByPlaceholder, getByAltText, and getByTitle locators.

Overview of advanced and less common Playwright locators covered: getByTestId, CSS locators, parent/child/index navigation, and locator debugging tools.

CSS and XPath locators via page.locator(), tag/id/class selectors, nested element selection, and why CSS locators are discouraged over role-based locators.

DOM parent-child-sibling navigation in Playwright: chained locators, CSS locator combinators, the ".." parent selector, and nth()-based index selection.

Playwright Codegen for locator generation and assertions, VS Code breakpoint debugging, and Playwright UI mode with timeline-based test inspection.

Overview of Playwright interaction actions covered: fill, click, check, select, cookies, storage, event handling, and file upload/download.

fill action for text inputs, page.keyboard.press for single keypresses, deprecated type() method, and simulating Escape key events with toBeEmpty assertions.

Playwright click action options: button (left/right), position (x/y) coordinates, and modifiers (Ctrl/Alt/Shift) for multi-select interactions.

check/uncheck actions for checkboxes, selectOption for single and multiple select dropdown values, and toHaveValue/toHaveValues assertions.

Auto-waiting exercise comparing isVisible()/isEnabled() polling versus toBeVisible()/toBeEnabled() web-first assertions for delayed-appearance buttons, plus soft assertions.

Programmatic cookie handling with context.addCookies, cookie inspection via DevTools Application tab, and page.reload() for cookie-dependent UI updates.

localStorage testing with Playwright: page.reload() persistence checks, test.use() storageState for preloaded local storage, and page.evaluate() for direct browser localStorage access.

Playwright dialog handling with page.on('dialog'), dialog.accept()/dialog.dismiss(), event listener registration order, and testing confirm/cancel pop-up workflows.

Console event listening with page.on('console'), filtering error-type messages, soft assertions for multiple failures, and test.fail() for known-broken tests.

Network request monitoring with page.on('request') and page.on('requestfailed') events, request/response URL and resource type inspection, and page.waitForLoadState('networkidle') for complete request capture.

File upload via setInputFiles with in-memory buffers, file download handling with waitForEvent('download') and download.saveAs(), and path.join for output paths.

Introduction to hands-on Playwright testing practice: writing real-world feedback form tests and refactoring to reduce code duplication.

Feedback form test scenarios: required field submission, form clearing after submit, negative validation cases, dialog confirm/cancel, and clear/save button behavior.

Refactoring Playwright tests into reusable TypeScript functions: completeFields, clickButton, and assertion helpers to eliminate code duplication.

Overview of test organization topics covered: annotations, hooks, describe blocks, tags, configuration layers, and playwright projects.

Playwright test annotations: test.fail() for expected failures, test.skip()/fixme() including conditional skip, and test.only() for isolating a single test.

beforeAll, beforeEach, afterEach, and afterAll test hooks in Playwright for reducing setup/teardown duplication, viewed via UI mode fixture timeline.

test.describe() blocks for grouping and nesting Playwright tests, scoped beforeEach hooks, and applying annotations like skip at the describe level.

Tagging Playwright tests with @tag syntax on tests and describe blocks, filtering with --grep on the CLI and playwright.config, and HTML report tag search.

Playwright configuration hierarchy: global config use options, test.use() at file and describe level, and per-test browser context overrides via locale settings.

Device emulation in Playwright: viewport size, the devices object (iPhone 13, etc.), custom device descriptors, and geolocation/permissions configuration.

Parallel test execution in Playwright: fullyParallel config, workers option (number or percentage), and test.describe.configure() for serial mode.

Playwright projects configuration for multi-browser/device test runs, staging vs production targeting, and project dependencies for shared setup like authentication.

Introduction to intermediate Playwright practice testing a real-world e-commerce app: cart, checkout, sign-up/login, Page Object Model, and route mocking.

Manual exploration of an e-commerce shop workflow: adding products to cart, checkout, order tracking, and sign-up/login flows prior to automation.

Playwright TypeScript project setup for e-commerce testing: npm init playwright, baseURL configuration, and disabling non-Chromium projects.

Add-to-cart test using CSS class-based locators, getByRole with data-testid, cart subtotal assertions, and TypeScript non-null assertions.

Page Object Model implementation in Playwright using functional TypeScript modules for products and cart actions, improving test reuse and maintainability.

Complete checkout-to-order-tracking E2E test: checkout page object, contact information, shipping/payment forms, order ID extraction, and order status lookup.

test.step() for structured Playwright HTML reports, TypeScript ReturnType and Awaited generics for typing step-scoped variables.

Disposable email testing with the mail.tm API for sign-up confirmation codes, comparison with MailSlurp and Mailtrap, and building an EmailUtils class.

Automated sign-up and login flow using mail.tm disposable inboxes, regex extraction of confirmation codes, Page Object files for signup/login, and toHaveURL assertion.

Persisting login credentials to disk with Node.js fs functions (writeFileSync, existsSync), .gitignore for auth data, and test.skip() based on existing credentials.

Playwright authentication state reuse: storageState setup project, context.storageState(), auth.setup.ts dependency configuration, and shared login across test projects.

API request interception with page.route() and route.fulfill() for mocking JSON responses, request/response logging, and network idle waiting.

Blocking image/asset requests with page.route() and route.abort() to speed up Playwright tests and reduce backend load during test runs.

Introduction to AI-driven Playwright test automation using GitHub Copilot and Playwright MCP, covering agentic test generation, debugging, and refactoring.

Overview of AI coding tools and agentic IDEs: Cursor, Windsurf, Kiro, GitHub Copilot, Claude Code, Gemini CLI, Codex CLI, and Qwen Code CLI.

Installing and authenticating GitHub Copilot in Visual Studio Code via the Extensions marketplace and GitHub account login.

GitHub Copilot core features: agent mode, ask mode, edit mode, model selection, usage tracking, inline edits, and voice chat for Playwright test generation.

Model Context Protocol (MCP) explained as a standardized interface connecting LLM coding agents to external tools, APIs, and live data sources.

Installing the Playwright MCP server in VS Code via the extensions MCP servers panel for browser automation inside GitHub Copilot agent mode.

First Playwright MCP test: navigating a URL, clicking elements, and extracting page data via GitHub Copilot agent mode browser automation.

Playwright test generation using MCP prompt files and voice input in GitHub Copilot agent mode: e-commerce checkout scenario, data-testid locators, and generated spec files.

Debugging failing Playwright tests with GitHub Copilot: inline "fix this" prompts, pressSequentially() versus deprecated type(), and AI-assisted root cause analysis.

GitHub Copilot inline code completions: tab-to-accept suggestions, completion model configuration, and enabling/disabling code completions in VS Code.

GitHub Copilot ask/chat mode for codebase Q&A, brainstorming refactors, and exploring project structure without making direct code changes.

Recap of AI-assisted Playwright workflows: code completions, AI-assisted debugging, Page Object Model refactoring, prompt engineering, and git version control practices.

Introduction to API testing with Playwright, covering the request object, HTTP methods, and combining API tests with existing end-to-end suites.

Identifying REST API endpoints in an e-commerce app using browser DevTools Network tab: GET /products, GET /products/:id, and POST /orders requests.

Manual API testing with Postman: importing a collection, GET/POST requests, status codes (200, 201), and chaining product/order/lookup endpoints.

Playwright API testing setup: dedicated project configuration with baseURL and extraHTTPHeaders, request.get(), and response.json() parsing.

API assertions in Playwright: response.status(), response.headers(), Content-Type checks, and toHaveProperty/toBe checks on JSON response body data.

POST requests with Playwright's request.post(), request body data payloads, status 201 assertions, and validating order ID and success properties in the response.

Chaining API requests in Playwright: fetching products, selecting an in-stock item dynamically, and using its ID to create an order without hardcoded data.

Combining API and UI testing in Playwright: request.newContext() in beforeAll/afterAll for API preconditions and postconditions around UI-driven end-to-end tests.

Recap of Playwright API testing: request object usage, status/header/body assertions, request chaining, and combining API calls with end-to-end tests.

Introduction to CI/CD pipelines for Playwright: automating build-test-deploy stages with Jenkins, GitLab CI/CD, and GitHub Actions.

Playwright config for CI/CD: environment-variable-driven baseURL and retries, workers setting, webServer command, and HTML/JUnit reporters with screenshot/video/trace capture.

Jenkins installation via Docker Compose, Docker Pipeline/HTML Publisher/AnsiColor plugin setup, and a build-test-deploy Jenkinsfile pipeline configuration.

Integrating Playwright into a Jenkins pipeline using the Microsoft Playwright Docker image, parallel integration test stages, and environment-variable-based end-to-end test targeting.

Publishing Playwright HTML and JUnit reports in Jenkins with publishHTML and junit steps, plus Content Security Policy configuration for report viewing.

Playwright in GitHub Actions: installing browsers with playwright install --with-deps versus using the Microsoft Playwright Docker image container, and job dependency configuration.

GitHub Actions reporting for Playwright: the built-in github reporter for PR annotations and actions/upload-artifact for HTML report artifacts.

Playwright in GitLab CI/CD using .gitlab-ci.yml, the Microsoft Playwright Docker image, staged build/test/deploy jobs, and merge request pipeline checks.

Publishing Playwright JUnit and HTML reports as GitLab CI/CD artifacts, merge request test summaries, and job artifact browsing.