Playwright E2E Test Automation with AI for Beginners

Learn how Playwright locators help you find and interact with page elements using a user-first approach, including clicking, filling forms, and basic assertions on a practice site.

Explore basic html concepts, including tags, attributes, id, and class, and learn how aria roles help test elements like links, buttons, and text from a user’s perspective.

Learn how playwright auto waiting lets tests wait for elements to appear using locators, with a simple dev page test that clicks the Get Started button and checks a heading.

Clone the starter html project from GitHub, install dependencies, and run npm start. Open localhost:5000 and test the feedback form with Playwright, learning how Playwright locates elements.

Explore how to use Playwright's get by role locator to target headings, filter by name, and assert visibility with proper await handling from the user perspective.

Explore the get by role locator in Playwright to handle unordered lists, buttons, and links; verify nonempty list items with chainable locators and the all function, and check text content.

Apply getByRole to locate buttons and links in Playwright, handle the cookie banner with accept or decline, and verify navigation to the feedback form via URL checks.

Learn how Playwright get by text locator finds elements by page text, test dynamic validation messages like invalid email format, and compare it with get by role for hidden elements.

Learn to locate form inputs with Playwright's get by label locator, fill fields, and use the Playwright inspector. Explore related locators like get by placeholder, alt text, and test id.

Explore an optional section on locators in Playwright, covering get by test id locator, css locators, and child–parent index locators, plus tools to quickly identify the right locator.

Learn how to locate elements with get by test ID, a robust tester-focused locator using data test ID attributes, and apply it in Playwright tests to handle dynamic content.

Explore using CSS locators with Playwright’s page.locator, including selectors, IDs, classes, and chained elements, while noting they’re not the first choice due to dynamic styling.

Master Playwright's locator API to navigate dom hierarchies using child and parent locators, role-based selectors, data test ids, and nth-element calls, with practical examples of cookie banner and list items.

Explore playwright locator tools: the inspector, codegen, and debugger to find reliable selectors and debug tests. Use vscode integration and UI mode for deeper insights.

Explore how to interact with web page elements using Playwright, performing basic actions like click, type, check, and select, and manage cookies, browser storage, events, and file uploads and downloads.

Learn to handle keyboard events with Playwright using field actions to fill and clear fields, simulate individual key presses, and verify the form’s name field empties.

Click actions in Playwright teach locating a button with a locator, awaiting and clicking, and using options such as right-click, position, and modifiers (Ctrl, Alt, Shift) to simulate complex clicks.

Explore the check and select actions in playwright e2e testing, using check/uncheck on a checkbox and selecting options in an improvement input text area with exact matching and multi-select.

Explore auto-waiting in Playwright by testing a complex button with three approaches in TypeScript, showing how to wait for visibility and enabled states before clicking.

Explore how to handle cookies in a JavaScript/TypeScript app with Playwright. Write tests that programmatically add cookies via the page context and verify the cookie banner disappears after refresh.

Use Playwright to test local storage and form persistence by filling name and email, saving progress, and reloading to verify data remains.

Learn to listen for console events with playwright, intercept error logs, and write tests that prevent or fast-notify on console errors while exploring an events page.

Explore how to monitor and intercept HTTP requests with Playwright by listening to request events and printing them, then test for failed requests and validate error handling.

Learn how to upload and download files using Playwright, handling file inputs, files in memory, and download events, with assertions and path saving in test results.

Practice writing automated tests to simulate the tester experience, then refactor duplicate test code to reduce repetition and boost test dynamics.

Practice a hands-on playwright testing workflow by validating a feedback form's dynamic content. Test the positive outcome, required fields, and that the form clears after submit and handles edge cases.

Refactor tests to reduce duplication by extracting common actions into reusable functions, using a page parameter and constants to validate labels and field values.

Organize a large number of Playwright tests and run only certain tests or certain categories. Edit tests at any level and configure them using the Playwright configuration file.

Explore Playwright test annotations such as fail, skip, and only, learn when to use them for temporary test states, and how they control which tests run in different environments.

Explore test hooks in Playwright, including before all, before each, after each, and after all, to reduce code duplication and manage resources across tests.

Organize end-to-end Playwright tests with describe blocks to group related scenarios, nest describes, and apply hooks and annotations for clearer, reusable test workflows.

Organize tests in Playwright by using tags on tests and describe blocks to run or report only certain cases. Generate an html report and filter results with grep by tag.

Apply Playwright test configurations across global, file, and describe levels using the use object and test.use, shaping language, base URL, and browser options for reliable runs.

Learn how to configure testing devices in Playwright, switch browsers, adjust viewport sizes, and use device descriptors and geo location permissions to run tests on devices with custom viewport settings.

Speed up end-to-end tests by leveraging playwright's parallel execution and adjustable workers, defaulting to half your processors; fine-tune globally or per file with test.describe.configure to optimize CI/CD performance.

Configure Playwright projects to run tests across multiple configurations and devices from one config. Group tests by stage or functionality and use dependencies to share setup across projects.

Explore practical Playwright features in a real life web shop scenario, including cart operations, register and login, while learning page object model, step function, and authentication session persistence.

Learn to approach end-to-end testing with playwright by understanding the coffee shop application's behavior, including cart, checkout, order tracking, signup, and the role of manual testing alongside automation.

Create a Playwright TypeScript project for the Valentino's Magic Beans site, set up tests in the test folder, and configure the base URL for Chromium.

Create your first Playwright end-to-end test by adding a product to the cart and verifying its name, price, and subtotal in cart view using data test IDs and CSS selectors.

Discover how Playwright page object models structure tests with reusable actions across product and cart pages, using a functional approach to reduce repetition and improve readability and maintainability.

Build a complete checkout workflow in Playwright e2e testing, filling contact, shipping, and payment fields with mock data, placing the order, and tracking the resulting order ID.

Use the Playwright test step function to structure tests into clear steps and improve test reports, like add product to cart, go to checkout, and complete checkout information.

Learn sign up and sign in testing with Playwright by using mail slurp for temporary emails, creating an inbox, and configuring environment variables in VSCode.

Automate a sign-up workflow with Playwright, fill sign up data, verify via MailSlurp, extract the confirmation code, and log in to complete the cycle.

Persist sign-up credentials by saving email and password to a json file in a git-ignored playwright/auth folder after validating login, using node path and file system utilities.

Leverage Playwright browser context and storage state to reuse authentication across tests by saving a login session to a user.json file, enabling authenticated workflows without repeated logins.

Intercept and mock api calls in Playwright tests by inspecting network requests, using route.fulfill to return mock data, and waiting for network idle to test dynamic content and error scenarios.

Learn how to speed tests by blocking assets with the root function in Playwright, filtering by request type to abort images, CSS, or scripts and improve test performance.

Explore ai driven test automation with GitHub Copilot and Playwright MCP to automatically visit web apps, write tests, fix failures, and learn fundamentals to evaluate ai generated code.

Explore ai coding tools that enable agentic development and testing across full ides, extensions, and cli tools, with examples like cursor, windsurf, hero, and GitHub Copilot.

Install GitHub Copilot in Visual Studio Code via the Copilot icon or extensions, log in with GitHub, and test functionality with a simple hello prompt.

Shows how to use GitHub Copilot to create and edit files with the agent mode, run commands, and debug, while outlining edit and ascii modes, model options, and usage tracking.

See how Mcpp, the model context protocol, enables llms to access tools and external data via a standardized interface, bridging the gap to real-world APIs and commands.

Install playwright via VSCode MCP servers to enable Copilot in agent mode for browser automation, then configure and access 83 available tools for browser actions.

Learn to test web interactions with playwright MCP as the language model navigates to a URL, clicks elements, and reads product prices, demonstrating a successful end-to-end test workflow.

Explore generating Playwright test scenarios with MCP using agent mode in GitHub Copilot, create reusable prompts, and automatically draft end-to-end tests such as guest checkout with data test IDs.

Explore how to run and debug Playwright tests with AI assistance, using GitHub Copilot to diagnose failures, fix selectors and input formatting, and use deprecated typing approaches versus locator fill.

Discover how code completions from GitHub Copilot appear as you type in your IDE, how to accept or dismiss them, and how to configure or disable completions, including GPT-4.

Discover how chat mode (ask mode) in Copilot helps you understand code, explore project structure and tests, and plan refactorings with no automatic code changes.

Explore how AI tools like GitHub Copilot and Playwright MCP accelerate end-to-end test creation, debugging, refactoring, and exploring web apps while emphasizing critical reasoning and up-to-date practices.

Explore how to write a basic api test with playwright, understand key concepts for api testing, and extend your end-to-end tests within the same toolset to improve coverage.

Explore how to identify api calls in a web app using the browser devtools network tab, filter to api requests, and inspect get and post endpoints like products and orders.

Master api manual testing with Postman to explore endpoints, send requests, and validate products and orders before automating tests in Playwright.

Learn to write playwright tests that perform a simple get request to fetch a list of products from a products endpoint, parse the json response, and start making assertions.

Master API testing with Playwright by asserting status codes, headers, and the response body. Validate 200 status, content-type application/json, and non-empty data arrays from the terminal.

Use Playwright to post a structured body with customer data and items to the orders endpoint, parse json, and verify a 201 response with success true and an order ID.

Chain requests to simulate a realistic workflow: fetch all products, select an in stock product, and use dynamic data to create and verify an order.

Learn to make API calls within Playwright end-to-end tests to set up preconditions, fetch data, and verify postconditions without completing full UI flows.

Learn to make API requests from Playwright, show how Playwright supports API testing, and how it can pair with end-to-end tests, with resources and docs.

Automate end-to-end playwright tests in a CI/CD pipeline, applying continuous integration and continuous deployment with Jenkins, GitLab CI/CD, or GitHub actions, and publish and review test reports.

Configure Playwright for CI/CD pipelines by choosing Docker or direct runners, using environment-driven base URL, enabling retries, and generating HTML reports with screenshots, videos, and traces.

Install and run Jenkins with Docker, then create a Jenkinsfile and set up a pipeline from SCM to build, test, and deploy a mock release.

Integrate Playwright tests into a Jenkins pipeline. Run unit and integration tests in parallel using the Playwright docker image and shared npm dependencies.

Publish Playwright reports in Jenkins to simplify debugging of failing tests by providing HTML and JUnit reports with screenshots, traces, and videos, accessible via a post action.

Set up a GitHub actions ci cd workflow to run Playwright integration and end-to-end tests, including forking the repo, configuring node, installing browsers, and optional docker approaches.

Learn to surface Playwright test results in GitHub Actions by enabling the GitHub reporter for annotations, then publish HTML reports as artifacts for easy troubleshooting in CI.

Automate playwright testing with GitLab CI/CD by configuring a .gitlab-ci.yml, creating a three-stage pipeline (build, test, deploy), and integrating unit, integration, and end-to-end tests.

Publish and troubleshoot Playwright e2e test results in GitLab CI/CD by generating JUnit and HTML reports. Access the HTML report with screenshots, video, and trace via artifacts for easier debugging.