Playwright TypeScript Automation - Web & API

Overview of Playwright, an open source Microsoft framework for web automation testing, with TypeScript support, headless or headed runs across multiple browsers and OS, plus built-in reporting, recording, and assertions.

Install playwright for a TypeScript project via npm init playwright @latest in VS Code. Configure the project, select TypeScript, set test directories, and run tests with npx playwright test.

Install playwright using the VSCode extension, then run, record, and debug tests with the command panel, exploring single or multiple tests and locators.

Learn to run and debug Playwright tests for beginners using npx, with config-driven multi-browser execution (Chromium, WebKit, Firefox), headless and headed modes, and test discovery via .spec.ts.

Learn to run Playwright tests in headed mode, target specific browsers or WebKit engines, and execute single or multiple spec files, with test title filtering and re-running last failed tests.

Debug Playwright tests with --debug and the Playwright inspector to watch execution in real time. Learn to run a single spec or start debugging from a specific line in VSCode.

Configure playwright with the configuration file by exporting define config and devices, and manage test dir, full parallel, retry, and reporter for reliable test runs.

Explore Playwright timeouts in the configuration file, noting the default 30s for elements and 5s for assertions, and how base URL and trace options affect tests.

Configure Playwright with a project-based setup by defining an array of objects, override global settings per project, and control headless mode and devices.

Learn to configure Playwright tests in a TypeScript web automation setup by defining runner scripts in package.json, mapping commands to variables, and running multiple spec files with npm run.

Explore Playwright configuration's retry mechanism, detailing how CI uses two retries while local execution uses one, manages workers, and logs test info and retry details.

Configure Playwright to launch browsers in a maximized mode by setting the viewport width and height in the configuration file, using the viewport size.com reference.

Learn to execute Playwright tests in VSCode using the extension, leveraging the test explorer, line-number run buttons, and the show browser option, with running, debugging, and viewing test execution details.

Run Playwright tests in UI mode to debug and inspect actions, source code, and network traffic with a live timeline, test filtering, and watch mode that auto-replays on changes.

Learn how to skip tests and run only selected tests in Playwright using TypeScript, by adding the skip keyword or using execute-only options, and verify results via a report.

Explore the trace feature in Playwright for TypeScript, generating reports with timelines and logs. Configure on, off, on first retry, and retain on failure in config or at runtime.

Create a playwright test for opening an application by importing the test, using a page fixture and page.goto, and handling promises with async/await.

Explore how Playwright locators identify web elements using id, tag name, class name, and attributes, including combining attributes and text, with a hands-on login form example.

Automate logging into the swag labs source demo application using Playwright with TypeScript by locating username and password fields, filling them, and clicking the login button, with promises and aviator.

Discover how to use page.getByRole in Playwright with TypeScript to identify elements by role and name in a login flow, prioritizing role locators.

Learn to locate form fields using page.getByLabel and page.getByPlaceholder, then fill inputs like username or first name with Surendra in a Playwright TypeScript test.

Learn how to locate elements by text and by title in Playwright with getByText and getByTitle, handling substrings, regex, and multiple matches for web automation.

Learn to locate elements with page.getByAltText and page.getByTestId using alt text and data test IDs, and practice clicking through examples on Bing and Swag Labs.

Learn to use css locators in Playwright, prioritize visible locators, and use first, last, index, has a text, has text, and text is options to interact with page elements.

Learn XPath syntax and how to filter locators in Playwright to select the correct element among many. Prioritize user-visible locators and apply text-based filters when needed.

Learn to identify a parent and drill down to a child with locator chaining in Playwright using TypeScript, including reusable constants for role-based links like flights and visa.

Record playwright tests in VSCode using the extension or codegen, capture login flows and interactions with page.pause, and emulate devices with codegen for beginners.

Explore Playwright built-in annotations such as skip, fail, fixme, and slow, and learn how each controls test execution, fail behavior, and timeout handling.

Group related Playwright tests using test.describe to form a login test suite, combining valid and invalid credential scenarios in a single spec and executing them as a unit.

Learn how to tag Playwright tests and test groups with user story, regression, and smoke tags, then run or skip them using grep and invert options.

Learn how hooks manage preconditions and postconditions in Playwright tests using TypeScript, with before each, after each, before all, and after all across login to source demo scenarios.

Learn to use Playwright assertions with TypeScript, including general and locator assertions and the hard versus soft distinction, with a focus on the expected library and locator waiting behavior.

Learn how soft assertions work in Playwright using TypeScript, with expect.soft to continue tests after failures. Verify url and title during browser tests and anticipate future element based assertions.

Validate element states with assertions in Playwright by checking the username text field for visibility, presence, enabled status, and placeholder value using locator-based and general assertions.

Explains Playwright's auto waiting, detailing default timeouts and element checks (visible, stable, receive events, enabled) and demonstrates wait for timeout and wait for selector usage.

Learn how to implement auto waiting in Playwright with TypeScript by waiting for a specific URL after login, handling 30-second timeouts, and validating subsequent actions.

Explore Playwright timeouts—global, tester, action, navigation, and verifying—along with defaults, per-use or per-command configuration, and auto slow to extend wait times.

Handle text fields by entering, clearing, and retrieving values with fill, clear, and input value commands, using get by role or label to locate the text box.

Learn to get text from buttons in Playwright using TypeScript, by role and text content, and to retrieve all button texts with all text content.

Learn how to handle checkboxes in Playwright using TypeScript by performing check and uncheck actions, verifying state, and using get by label or get by role with locators.

Learn to handle radio buttons in Playwright with TypeScript using the check command across radio and checkbox types, via label, role, or locator methods with checks.

Learn to handle multiple checkboxes in Playwright by selecting all with a rule, converting to an array with dot all, and unchecking them with a for-each loop, or using page.check/locator.check.

Learn to select a single option from a dropdown in Playwright using TypeScript, with role, label, XPath, index, and value attribute approaches, and get all options.

Learn to select multiple items from a dropdown in Playwright by using a listbox role and passing an array of values to the select option, then verify options.

Learn how to handle bootstrap dropdowns in Playwright with TypeScript, opening the menu by click, then selecting options via locator or XPath when using li elements, without a selector tag.

Learn to perform mouse clicks (single, double, right, force) and mouseover to reveal options, then click at positions and use fill and press sequentially for keyboard input in Playwright.

Learn how to handle frames in Playwright using frame locator and frame objects, interact with elements inside iframes, and manage nested frames across multi-frame pages.

Discover how to extract tooltip text in a Playwright TypeScript workflow by locating elements, retrieving the title attribute with get attribute, and logging the tooltip value across frames.

Learn to handle drag and drop in Playwright using TypeScript with AI, including frame-based interactions with draggable and droppable elements and two approaches using hover and mouse actions.

Learn to handle date pickers in Playwright with TypeScript by switching frames, opening the calendar, selecting a fixed date or the next day dynamically, and using concise locators.

Master extracting the first data value from a web table with Playwright by locating a table, skipping header row, and reading the first cell via inner text or text content.

Learn to read all values from a web table using for loops to extract company names, contact names, and countries, then print the data to the console.

Learn to handle alert, confirm, and prompt dialogs in Playwright using TypeScript by registering a dialog handler before triggering actions. Use dialog.accept and assertions to validate dialog content and type.

Learn to handle confirmation alerts in a Playwright TypeScript workflow by using accept and dismiss to click okay or cancel, verify outcomes with console logs and simple assertions.

Learn to handle JS prompt alerts in Playwright with TypeScript by passing values to prompts, validating results with assertions, and resolving case sensitivity issues between copilot prompts and the app.

Explore auto suggestions in a Playwright TypeScript workflow for beginners, retrieving and printing suggestions to the console by locating a text box, using id or role, and chaining locators.

Learn to upload single and multiple files with Playwright in TypeScript using setInputFiles on input tags, and delete uploads with an empty array.

Learn to capture full page, partial page, and element screenshots in Playwright using TypeScript, save with unique timestamps, and explore using fullPage and locator-based captures.

Explore capturing videos in Playwright tests by configuring video options in the use config, including on, retain on a failure, and on first retry.

Learn to run Playwright tests on mobile emulators by selecting devices like Galaxy Note 3 or iPhone 13 Pro and tailor tests with mobile-specific locators and test info.

Learn to handle multiple windows in Playwright by creating new pages per context, waiting for a new page before clicking, and performing actions on the new page before closing it.

Configure Playwright for parallel execution by ensuring tests are independent, updating the configuration file, and running tests in parallel from the test examples directory.

Automate an end-to-end scenario on swag labs with Playwright and TypeScript, from login to logout, including add to cart, checkout, filling details, and finishing the order.

Discover the built-in reports in Playwright using TypeScript, including HTML, JSON, JUnit, dot and line reporters, and learn how to generate them via config files or the command line.

Learn to pass an application URL via a Playwright config base URL, reference it with a slash in tests, and manage dev, QA, and staging environments with project-specific URLs.

Store configuration, environment variables, and sensitive information in a dot env file at the project root. Install and configure dot env, load url with process.env.url, and use pipe fallback.

Explore fixtures in Playwright with TypeScript, showing how before and after hooks compare to fixers and how to create a customized fixer using tester.extend for reusable setup and teardown.

Extract login and logout into a reusable Playwright TypeScript fixture, alias it, and extend base fixtures for end-to-end tests, as shown in fixtures part two.

Install the allure reporter for playwright to create custom reports, configure it in the playwright config, run tests to generate allure results, and open the report in chromium.

Master the page object model to organize test automation by storing locators per page across end-to-end flows like login and add to cart, with separate pages and tests folders.

Implement a page object model in TypeScript with Playwright by building an exported login page class, using a read-only page property and a constructor wired to the page fixer.

Learn to build a page object model in Playwright with TypeScript by defining login locators (username, password, login button) and implementing a parameterized login for end-to-end tests with a wait.

Define a home page object with locators for add to cart, cart logo, side menu, and logout; implement actions and use them in the test to complete login and add-to-cart.

Master page object model scenario part 4 by building a cart checkout flow in Playwright with TypeScript, including cart page interactions, logout, and navigation between login, home, and information page.

Explore organizing page object model in Playwright with TypeScript by centralizing instance creation and building a user info page with locators and parameterized methods, enabling login, cart, and checkout flows.

Develop a page object model workflow using an overview page with a finish button. Automate place order and order confirmation, validate the message, and navigate back home before logging out.

Adopt the page object model by creating a page manager in Playwright TypeScript to centralize login, home, info, overview, and order confirmation pages via instance methods.

Learn how to perform visual comparisons in Playwright using TypeScript, capturing reference screenshots, auto comparing with updates to snapshots, and configuring pixel differences to validate UI changes.

Explore the fundamentals of api requests, including get, post, put, and delete, along with url, headers, authorization, and json input, and validate responses via response codes.

Explore the fundamentals of rest and web services, including http requests and responses, restful apis, and common methods like get, post, put, delete, and patch.

Learn how to perform api testing with Playwright using the built in request fixture to call a get endpoint, log the json response, and assert a 200 status.

Explore advanced get requests by fetching JSON from endpoints, extracting fields like name, year, price, and color, and handling single objects and arrays with index-based access.

Learn how to perform a post request in Playwright using a json body and headers. Retrieve response data, including fields with spaces, from the api.

Explore using put and delete requests in Playwright with TypeScript, updating and removing data. Learn how to handle responses, IDs, and common mistakes to ensure proper API interactions.

Read data from a CSV file using a CSV parser, enabling columns as true to treat the first row as headers, producing an array of objects for data-driven testing.

Read data from a CSV file and populate the username and password fields in a Playwright test using a for loop and as any, across two data sets.

Learn to read data from a csv file using a forEach loop in TypeScript, replacing concatenation with backticks and template literals, and validate two data sets in tests.

Learn to read data from a JSON file in a Playwright TypeScript project by importing test data two dot JSON and accessing the username and password fields.

Read a JSON array with two objects in Playwright by iterating with forEach and accessing data.username and data.password to run tests on two data sets.

Explore reading data from json using a for loop, replacing a for each loop, and running the program with two data sets to compare for loop and for each loop.

Master basic authorization for APIs in Playwright with TypeScript by encoding credentials in base64 and sending an authorization header to access Jira dashboards.

Learn the difference between git and GitHub and master a typical workflow—from local staging to remote repositories, including commits, branches, pushes, pulls, reviews, and merges.

Push code from a local repo to a GitHub remote by git init, add, commit, and push to origin master, while troubleshooting token-based authentication.

Explore how GitHub actions automate CI/CD with a playwright.yaml workflow that builds, tests, and reports on pushes and pull requests using Playwright.

Observe how GitHub actions runs a Playwright test suite from a TypeScript project, uses a playwright.yaml file to configure browsers, generates a downloadable playwright report artifact, and validates six tests.

Create a free Azure dev apps account, sign in with a Microsoft account, and set up an organization and project to enable a pipeline for Playwright automation testing.

Explore how AI enables computers to think, learn, and decide like humans by processing data, recognizing language and images, and generating text and test cases across devices.

Explore how humans and AI collaborate in a human-in-the-loop setup to boost efficiency and accuracy while acknowledging AI limits and the need for human review in testing and development.

Define large language models as AI brains trained on vast data that understand language, answer questions, translate, summarize, and generate images, with examples like GPT four and Gemini.

Explore how retrieval augmented generation enhances llms by using a vector database of embedded information to retrieve data and augment queries for accurate responses without full retraining.

Explore how generative AI differs from traditional AI by creating new content, such as code, documents, images, audio, and video. Traditional AI analyzes existing data and cannot create new content.

Explore how AI memory stores, retains, and retrieves past interactions to enable conversations. Learn about short term memory and long term memory with chatbot examples and session persistence.

Understand how an AI agent, an autonomous software program, perceives its environment, reasons and plans to achieve a goal, uses tools, and may interact with other agents.

Explore LangChain and LangGraph, linking LLMs to external data sources via a vector database with RAG, and use LangGraph’s node, edge, state, and checkpoint workflow to coordinate AI agents.

Explore how the MCP model context protocol standardizes AI interactions with external tools, APIs, and databases, acting as a universal adapter that enables reusable, scalable tool use.

Apply human in the loop to require human approval for AI decisions, manage budget and money-related cases, and guard against hallucination with precise prompts and guardrails.

Fine tuning updates the existing knowledge base to tailor AI agent interactions for customers, staff, and leaders, contrasting it with RAG that relies on external knowledge.

Explore why context matters and how providing information to a language model increases output accuracy. Learn to supply context to the LM to follow defined rules and produce appropriate results.

Explore prompt engineering and the role of clear context in AI responses, illustrated with travel planning from Bangalore to Ooty, booking details, and avoiding hallucinations.

Discover how to define and attach a context file to an llm, set role-based rules for manual and automation testing, and generate test cases from user stories and ui mockups.

Create a manual context file, attach it to ChatGPT, and demonstrate a generic login flow with positive and negative tests, while discussing prompts and prototype notes.

Explore zero-shot, one-shot, few-shot prompts and chain-of-thought reasoning, and learn to craft clear prompts using context files for automation testing in Playwright TypeScript.

Compare ChatGPT, Copilot, and Cursor for coding assistance in automation testing, noting ChatGPT as general purpose and Cursor as best for complex coding tasks.

Explore how OpenAI drives AI development with a mission to benefit humanity, publishing shared principles and protocols, and powering GPT models, Copilot, ChatGPT, and DALL-E.

Demystify AI models by explaining how trained data helps recognize patterns and generate outputs, with examples like GPT for text and DALL-E for images.

Learn to create a customized AI agent with n8n for no-code workflow automation, including a 14-day trial, AI-enabled workflows, and automating onboarding emails with nodes.

Learn to generate a secret OpenAI API key, copy the key, and use it to establish a connection to OpenAI for your AI agents.

Create an n8n workflow that connects Gmail and Google Drive, reads a data sheet, and uses an AI agent with GPT-4.1 mini to send an email when Sam is found.

Create an n8n workflow that dynamically selects email recipients from a sheet using an ai prompt, triggers emails, and handles invalid addresses.

Build an n8n workflow that reads data from sheet two, checks for status S, and sends emails announcing that background verification started.

Demonstrates creating a Jira cloud account, generating an API token, and configuring a Zephyr test management setup to create test cases and defects from user input.

Explore an n8n workflow that reads new defects from an Excel sheet and creates Jira issues in a cloud Jira project, using email, API token, and domain credentials.

Explore building an n8n workflow to auto-create Jira bugs from a status new sheet, wiring credentials, URL, and access tokens to automate defect creation in the Lucky Trainings project.

Understand how OpenAI tokens are the fundamental units of words and punctuation in prompts, and how token usage determines budgets and costs, including rate limits on trial accounts.

Create a chrome extension that records and plays back browser actions, generating playwright typescript or selenium java scripts with cursor ai prompts, and load unpacked extension in chrome.

build a public chat in an n8n workflow with a generated url, then use an artificial intelligence model and memory to analyze a Google Sheet and create defects in zero.

Create a Chrome extension for record and playback using cursor AI, generating Playwright TypeScript or Selenium scripts from recorded actions, with playback, download, and troubleshooting.

Learn to build an OTP shield mobile app that monitors text messages, calls, and WhatsApp for OTP prompts. See Cursor AI scaffold, generate an APK, and configure permissions.

Discover GPT4All, an open source desktop app that runs private LLMs offline on Windows, macOS, or Linux, enabling manual test cases and document summaries locally without cloud access.

Discover how large language models use prompts to generate code and test scripts, and how the modal context protocol bridges LLMs with Playwright for browser automation.

Install the playwright MCP in vscode via the official site or extensions, ensuring a copilot extension is installed. Then create a .vscode folder with the required settings.

Configure and run a Playwright MCP in VSCode to generate a TypeScript test that navigates to bing.com, verifies the title, and closes the browser, using copilot prompts.

Create and execute a Playwright test that logs into a demo app by entering a username and password, clicking login, and closing the browser, with prompts and context guidance.

Demonstrates creating a Playwright context and generating a TypeScript test that navigates to Bing settings, selects the strict safe-search radio button, waits, and closes the browser with retry on failure.

Automate a multi-window workflow with Playwright using TypeScript, navigating to HDFC.com, opening blogs, switching to the new window, handling a disclaimer popup, and performing a search.

Generate manual test cases from a web context using Playwright, producing a CSV in the tests folder and covering login flows such as valid credentials, invalid username, and empty fields.

Explore the playwright agents—planner, generator, and healer—and learn to initialize them in VSCode to create a markdown test plan and generate Playwright tests.

Explore how the Playwright CLI uses AI agents to automate tests and manage element references with snapshots and YAML. Compare CLI with MCP and understand installation, skills, and screenshots.

Install the playwright cli locally in your project with npm. Open VS code to configure with JavaScript or TypeScript and review the skills doc for commands and test script generation.

Configure the playwright cli in vscode with github copilot to automate a login flow, generate aml element references, capture screenshots, and create the first script.

Use the Playwright CLI to turn YAML-driven login flow into a TypeScript spec file, review the generated users, and customize for a happy path.

Use the Playwright CLI to automate the Salesforce login flow by entering the username and password, clicking login, and generating a focused test spec from YAML references.

Explore using the Playwright CLI from the terminal and VS Code, learn to run in headed or headless mode, and fill fields via element references captured from a generated snapshot.

Learn to use Playwright CLI sessions in a TypeScript setting to manage multiple browser profiles with persistent and headless modes, monitor sessions, and generate test scripts.

Record a full login flow video with Playwright CLI, capturing input, login, and page title verification, and save it as source demo login flow.

Learn to use the Playwright CLI to capture traces with snapshots and screenshots, generate trace files like trace.gif and trace1.gif, and view the resulting trace during login automation.

Build a manual test case generator agent part 2 that fetches user story details from azure, prints title, description, acceptance criteria, and stores UI mockups with a Python program.

Convert a multi-window automation script into a page object model with Playwright and TypeScript, defining locators and page objects for htfc.com, using Copilot to generate tests in test cases folder.