Playwright using JavaScript with AI - Web & API Testing

Execute playwright tests across chromium, firefox, and webkit with npx playwright test in headless parallel mode. Configure the project to run across browsers and generate a test report.

Learn to run Playwright tests with headed mode, target browsers (Chromium, Firefox, WebKit) using --project, and use -G and --last-failed for efficient debugging in web and api testing.

Debug Playwright tests by running npx playwright test --debug to launch the Playwright inspector in the browser UI, then use step over, resume, or line-based targeting.

Discover how to configure Playwright with define config, including test directory, fully parallel mode, test.only and forbid only handling, retries, workers, and reporters for robust test execution and artifacts.

Configure Playwright in JavaScript to set timeouts and a global base URL for all tests, overriding defaults with use and baseURL when needed.

Configure Playwright projects with environment-specific and global settings, including QA environment and Dove environment, define device-based configurations, and run tests with npx playwright test in headed or headless modes.

Explore configuring Playwright tests via a configuration script in package.json, define runners like runner1 and runner2, and execute them with npm run to run different projects.

Analyze how to configure retries in the Playwright configuration file, see how retries affect multi-project runs (Chromium and Surendra), workers, and test execution, including synchronization issues.

Learn to configure Playwright to set viewport width and height, launch the browser in headed mode, and run tests at specified dimensions using viewport values.

Execute Playwright tests using the VSCode extension, choosing between individual tests or a full suite, and debug with breakpoints, watch, and browser visibility settings.

Execute Playwright tests using the UI mode to observe actions before and after each step, inspect source code, network requests, and locators with a timeline and watch mode.

Learn to control test execution in Playwright using test.skip to skip tests and test.only to run only specific tests, even across many spec files.

Explore the trace view in Playwright, a GUI tool for analyzing test runs with snapshots and timelines. Configure trace modes: on, off, on first retry, or retain on failure.

Create a Playwright test by writing a spec file, importing the Playwright test, and using page.goto to open www.saucedemo.com; grasp async and await for handling promises in browser actions.

Explore how to identify and interact with web elements using locators in Playwright, covering id, class, tag, placeholder, and text attributes for login fields and buttons.

Create a Playwright test to log into the sauce demo site by locating elements by id, filling username and password, and clicking login, using await and optional pause for inspection.

Explore Playwright built-in locators and the page.getbyrole method to identify headings, checkboxes, and buttons by name, fill text fields, and perform login automation.

Discover how to locate form fields with getByLabel and getByPlaceholder in Playwright, using examples like first name, last name, and job title, including placeholders when labels are absent.

Identify elements by text or by title with Playwright's getByText and getByTitle, using exact, substring, or regex matches. Click next or sign me up, handling first among duplicates.

Learn how to locate elements with page.getByAltText() and page.getByTestId() in Playwright, using alt attributes for images and data test id attributes in practical examples like bing.com.

Explore using css locators in playwright, prioritizing getByRole and getByText, then css selectors with pseudo-classes such as visible, has text, text ease, and nth-match, including shadow dom handling.

Explore XPath as a powerful locator, compare absolute and relative paths, and apply filters using has text to locate and click on a Hyderabad entry among many list items.

Identify a parent element and drill down to its child using Playwright locators, or vice versa, then click city items like Hyderabad or Kochi with get by text.

Identify the issue: the vscode extension defaults to generating TypeScript scripts (ts extension). Rename the scripts to JavaScript (js) for the next three lectures, especially when working with hooks.

Master recording playwright tests via the vscode extension and code gen, capturing actions, locators, and assertions, then run and playback with page.pause.

Explore Playwright built-in annotations, such as test.skip, test.fail, test.fixme, test.slow, and test.only, and see how each affects test execution and pacing.

Learn to group multiple Playwright tests with test.describe, using describe to merge scenarios into a single group and run them to cover valid and invalid credentials.

Tag tests and describes in Playwright with single or multiple labels, such as smoke, regression, or story, and run focused sets using grep or invert grep.

Explore hooks in Playwright using JavaScript, covering before each, after each, before all, and after all with practical preconditions and postconditions.

Explore how to use Playwright assertions, including general versus locator-based and hard versus soft assertions, to validate login success, element visibility, and text with the expect library.

Learn how to convert hard assertions to soft assertions in Playwright using JavaScript, via dot soft after expect, and verify a page’s URL and title to control test flow.

Explore locator-based assertions in Playwright using JavaScript with AI for web and API testing, validating element visibility, hidden states, enablement, and attributes like placeholder values, and text presence on buttons.

Explore Playwright's auto waiting mechanism, including the default timeout of 30,000 ms, wait for selector, and explicit waits, illustrated with an ajax loading example and element readiness checks.

Explore auto waiting in Playwright by creating test auto weighting 4, opening source demo, logging in, and waiting for the url with a 50-second timeout.

Explore Playwright timeouts, including global, test, action, navigation, and expected timeout limits; configure them in code and per-command, and use waits for text and element state to ensure reliability.

Learn to handle text fields in Playwright by filling, clearing, and retrieving values, using role-based and label-based locators to interact with username and password fields.

Learn to extract text from a button or element in Playwright with JavaScript by using page.locator, nth indexing, and text content or all text contents.

Learn to handle checkboxes in Playwright with JavaScript by using check and uncheck commands, verify status, and identify elements by label, role, or locator on web pages.

Learn to handle radio buttons in Playwright using JavaScript by locating elements by role, label, or id, and validating their checked state with to be checked and is checked assertions.

Handle multiple checkboxes in Playwright using JavaScript by selecting all with get by role or label, then uncheck them via for loops or await page.locator.

Learn to select dropdown values in Playwright for JavaScript with AI testing, using the select option method, role, label, and CSS selectors, including shadow roots, and enumerate all options.

Explore selecting a dropdown value in Playwright by clicking the button, identifying the first matching element, and selecting the option via XPath or text, including handling non-selector tags.

Learn to handle frames with playwright using frame locator and frame object, switching from the main page to single or multiple frames to fill text fields and interact with elements.

Explore how to perform mouse and keyboard interactions in Playwright using JavaScript, including double clicks, right clicks, hovers, coordinate-based clicks, frame handling, and sequential key presses.

Learn to handle tooltips by accessing the title attribute of an element inside a jQuery UI tooltip within a frame, using a frame locator to switch context and print value.

Learn to perform drag and drop in a jQuery UI frame with Playwright in JavaScript, using drag-to and mouse-move approaches to drag draggable to droppable elements.

Learn to automate selecting a date from a date picker in a web test using Playwright with JavaScript, including frame switching, locating calendar elements, and dynamic date selection.

Learn to handle web tables with Playwright using JavaScript, locating rows via role and cells via tr and td, and retrieving the second row's first column.

Learn to extract all company names, contacts, and countries from web tables using Playwright with JavaScript by looping through rows and reading td1, td2, and td3 values.

Discover how to handle web page dialogues with Playwright using a dialogue handler, page.on, and dialog.accept for alerts, confirmations, and prompts.

Learn to handle JS confirm dialogs in Playwright by registering a dialog handler, using accept to click ok and dismiss to click cancel, and asserting dialog message and type.

Demonstrates handling a JavaScript prompt in Playwright by using a dialogue handler to accept with a value, dismiss, and validate the resulting page text and alerts.

Navigate to bing.com, enter a query to trigger auto suggestions, and print the suggestions to the console using Playwright with awaits and role-based locators.

Learn how to upload files with Playwright using set input files on an input element. Upload single or multiple files and clear selections with an empty array.

Capture web page and element screenshots using Playwright with JavaScript, saving with dynamic timestamps, enabling full-page and locator-based captures for web testing.

Configure video capture in playwright with the use.video option to control recordings—off, on, retain on failure, or on first retry—and store and view them in test results and reports.

Learn to run Playwright tests on mobile emulators by configuring device settings in the project config, selecting devices like galaxy a55 or iphone 12 mini, and using mobile-specific locators.

Learn to handle multiple windows in Playwright by creating pages from a single context, awaiting new pages before clicks, and performing actions on each tab.

Enable parallel execution in Playwright by configuring the Playwright configuration file for fully parallel true. Learn how workers and test independence reduce overall test time.

Demonstrates a full end-to-end automation flow using Playwright in JavaScript: login to SauceDemo, add to cart, checkout, fill form, finish, and log out, prepared for a page object model.

Explore Playwright built-in reports, including HTML, JSON, JUnit, and dot, list, and line reporters, and learn to configure and generate them via a configuration file or the CLI.

Learn how to configure environmental URLs in Playwright by setting a base URL in the config file and using environment-specific projects to run tests against dev, qa, and pre-prod.

Learn to create and use a .env file to store environment-specific settings and credentials, integrate it with Playwright config, and fetch values via process.env to run projects securely.

Explore how fixers encapsulate setup and teardown in Playwright tests, compare them with hooks, and learn to create custom fixers with tester.extend for reusable environments across tests.

Explore fixtures in Playwright with a practical example: create a login/logout setup using a page fixer, define preconditions and postconditions, and reuse it across tests to open apps like bing.com.

Learn to generate a custom allure report for playwright tests by installing allure playwright, configuring the reporter, running tests to create allure results, and generating and opening the allure report.

Discover how the page object model organizes test automation by separating locators and actions per page, and structuring pages and tests in separate folders.

Learn to implement a page object model in Playwright by exporting a login page class, storing the page object, and defining reusable locators with open and close methods.

Build and test a login flow with the page object model in Playwright, defining username, password, and login button locators, filling credentials, and handling locator issues to log in successfully.

Shows building a home page with add to cart, cart logo, side menu, and logout locators using page object model; implements add item to cart and logout in Playwright JavaScript.

Define your cart page class with a checkout button locator, implement a checkout operation, and show importing and instantiation with brief waits.

Explore implementing a page object model for the Yoveri information page, defining locators for first name, last name, and zip code, and automating form fill and continue button click.

Learn to implement a page object model in Playwright using JavaScript, finishing overview and confirmation pages, placing an order, waiting for elements, and reusing login code for end-to-end testing.

Refactor your end-to-end tests by introducing a page manager to centralize page objects (login, home, cart, info, overview, and complete pages), reducing imports and simplifying test code.

Learn to perform visual comparisons in Playwright by capturing screenshots and validating UI against references. Review html reports and adjust the max pixel difference when updating snapshots.

Explore how REST enables lightweight web services over HTTP, with RESTful APIs exchanging JSON, XML, or text data and handling request and response cycles with headers, bodies, and status codes.

Learn how APIs work by using get, post, put, and delete requests, with url, header, and json body, and validate responses via 2xx, 4xx, and 5xx status codes.

Learn how to perform api testing in Playwright using the built-in request fixer, test a public get endpoint, inspect response body and status, and validate status codes with assertions.

Make a get request to the API endpoint, parse the response JSON, extract the name and manufacturing year from the data object, and assert the year equals 2019.

Learn how to perform a post request in Playwright, including setting headers and json body, handling request and response bodies, and validating via Postman.

Discover updating entries with put and patch, using a complete json or a partial body, and deleting entries with a delete request, guided by stored ids.

Learn to read data from csv files in a Playwright JavaScript project by installing csv-parse and using fs read file sync with columns: true and skip empty lines.

Read multiple CSV rows to drive a source demo test, looping over records and using record.username and record.password to log in, then close the browser after a timeout.

Read csv data in a Playwright test using forEach to iterate rows and inject values with template literals. The example runs tests for data sets like surin and lucky.

Learn how to read credentials from a json file in Playwright with JavaScript, import json data from the test directory, and automatically fill username and password on a web page.

Learn to read multiple data records from a JSON file using for and for-each loops, import testdata4.json, and generate two data-driven tests with record.username in the names.

Learn to set up a Jira testing environment: create a Jira cloud account, generate an api token, and configure project with Zephyr for Jira to manage test cases and defects.

Learn how to handle basic authentication in Playwright by encoding credentials to base64 and passing them in headers to fetch dashboards via a protected API.

Learn how git manages code changes with a reliable history and how github hosts remote repositories; practice a team workflow with branches, staging, commit, push, pull, clone, review, and merge.

Learn how to push local code to a GitHub remote by initializing a repo, staging changes with git add, committing, and pushing to origin master.

Learn to automate Playwright tests with GitHub Actions, using a YAML workflow to run on push or pull requests on the main branch, including setup, testing, and report generation.

Explore how GitHub Actions runs a Playwright workflow via the playwright.yaml file, installs dependencies, executes six tests as configured in the configure.ts, and generates and downloads a playwright report artifact.

Create a Jira testing environment by signing up for a new account, generating an API token, setting up a project and Zephyr squad for test cases and defects management.

Install and configure Playwright MCP in Visual Studio Code via the official website or VS Code extensions, with prerequisites like the GitHub Copilot extension and a .VSCode folder with settings.xml.

Use the MCP extension to generate a Playwright JavaScript test navigating bing.com, verify the title 'Search - Microsoft Bing', and learn how detailed prompts in agent mode drive auto-generated code.

Draft prompts to generate a Playwright JavaScript login test, locate username and password fields, enter credentials, and click login. Create login_source_spec.js and run the test to observe browser closure.

Builds a Playwright JavaScript test by defining a web test context, crafting rules for code generation, and selecting the strict radio button on Bing settings while handling locator issues.

Learn to use Playwright with JavaScript for web and API testing by building a multi-window flow that opens htfc.com, clicks blogs, handles a disclaimer pop-up, and updates locators.

Generate manual test cases from a web context using Playwright, focusing on positive and negative login flows for SauceDemo, and output a csv file in the test folder.

Explore the Playwright agents—planner, generator, and healer—and learn to generate a markdown test plan, create Playwright tests, and automatically repair failing tests.

The overview presents Playwright CLI as an AI-enabled automation tool, compares it with MCP, and explains its use of YAML element references, page snapshots, and built-in skill documentation.

Install the Playwright CLI for a project (local instead of global), create a project folder, install via npm, then explore the skills docs and cloud references for test script generation.

configure the playwright cli in vscode with github copilot to automate a login on source demo.com and generate a cli folder with yaml/ml files.

Learn to generate a Playwright spec file for a login flow using the CLI, guided by YAML-driven instructions, handling multiple users, and aligning TypeScript or JavaScript output with your prompts.

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

Learn how to run playwright cli from the terminal and open in headed mode to interact with elements, fill by reference, and view generated snapshots like 273z.yml.

Learn to use playwright cli sessions to manage multiple browser profiles, preserve state with persistence, run parallel sessions, capture snapshots, generate test scripts, and monitor or kill sessions.

Use Playwright CLI to record the entire login flow—from entering credentials to verifying the page title—and save the video with a specified file name for easy review.

Master the playwright cli to capture a trace with snapshots and screenshots, generating trace.gif or trace1.gif while automating login flows. View the trace to verify actions.