Playwright Test Automation With JavaScript - Getting Started

Name: Playwright Test Automation With JavaScript - Getting Started
Rating: 4.1 (16 reviews)

Learn how to locate and interact with elements, how to make an assertions, and way more

Created byOleksiy Kyrylenko

Last updated 1/2023

English

English [Auto],

What you'll learn

Install Playwright
Locate Elements with Playwright
Execute Actions on Elements with Playwright
Perform Test Assertions

Course content

6 sections • 22 lectures • 4h 14m total length

Introduction10:55
Explore how Playwright enables fast JavaScript and TypeScript test automation with built-in reporting, visual comparison, ADA testing, cross-domain support, parallel execution, and multi-browser capabilities.
Installing Playwright13:03
Install playwright with node.js and npm, set up visual studio code, initialize a playwright project, explore the test folder and config, and run tests against practice websites.
Writing Our First Test14:07
Write your first test in Visual Studio Code, letting Playwright start the browser automatically, navigate pages, locate elements, wait for actions, and generate an html test report.

Locating Elements-By CSS and By XPATH14:45
Learn to locate elements with CSS and XPath in Playwright using locators, clicking, and URL validation to automate navigation.
Locating Elements-By Role, By Label, By Placeholder, By Title14:03
Learn to locate elements by role, label, placeholder, and title in Playwright test automation with JavaScript, using get by role, get by label, and additional filters in Visual Studio Code.
Locating Elements-By Text, By Alt Text, By TestId10:51
Locate elements by text, alt text, and test id to interact with the page in a Playwright JavaScript test. Click targets and assert the resulting URL to verify navigation.
Locating Elements-Filter By Text, By Another Element, Finding Multiple Elements13:35
Master advanced locators in Playwright: filter by text, filter by nested elements, and locate multiple elements using count and has, with practical examples.
Locating Elements-Locating By Multiple CSS and By Multiple XPATH values9:09
Learn to locate elements with multiple css and xpath locators in Playwright by providing comma separated css selectors and pipe separated xpath values, enabling fallback when first locators fail.

Element Actions-Enter/Get Text,Click Element,Working with checkbox/radio button25:51
Master basic Playwright element actions like entering text, getting text, clicking, and selecting dropdown options. Verify whether elements are visible and whether checkboxes and radio buttons are checked.
Element Actions-Selecting from Dropdown, Check if Element Is Visible or Checked21:42
Learn to select dropdown options by value, text, or index, and verify element visibility and checked states with Playwright in JavaScript.
Element Actions-Clear Text Field, Keyboard Key Press, Hover Over Element12:50
Master advanced playwright element actions in javascript, including clearing a text field, hovering to reveal dropdowns, and simulating keyboard presses to move from username to password.
Element Actions-Drag and Drop8:58
Learn how to perform drag and drop in Playwright using page and locator approaches, dragging from the element with id column A to column B, with coordinates and timeouts.

Assertions-Expect, Element To Have Text, Element To Have Attribute9:55
Master Playwright's expect assertions for text, attribute value, visibility, and checked states, using built-in and extended APIs, with practical locator-based tests for title and URL.
Assertions-Element is Visible, Element is Checked, Element has Value10:01
Learn to apply Playwright JavaScript assertions to verify element visibility, checkbox states, and dropdown values in test automation. Practice using toBeVisible, toBeChecked, and toHaveValue with timeouts and selectors.
Assertions-Page To Have Title, Page to Have Url2:40
Learn how to assert a page title and URL with Playwright in JavaScript by creating a test in Visual Studio Code and using expect to have title and URL.
Assertions-Element To Have CSS Value, Element To Have Class, Count of Elements8:29
Learn advanced assertions in Playwright test automation with JavaScript by verifying element css values, asserting element classes, and counting elements, then explore negation, array usage, and self assertions.
Assertions-Negating Assertions, Soft Assertions10:25
Learn to negate assertions and apply soft assertions in Playwright tests, using not and expect.soft to run multiple checks and provide custom failure messages.

Waits-Autowaits6:18
learn how playwright automatically waits for elements to be attached, visible, stable, and enabled during actions like click or hover; explore tracing, reporting, and optional bypass of actionability checks.
Waits-Wait For Element State, Wait For Page To Have Url, Wait for Network Idle13:35
Learn to wait for an element state with a locator, wait for the page url after navigation, and wait for network idle using Playwright load state options.

Test Annotations-Grouping Tests,Only Running Single Test, Skipping Test7:45
Explore Playwright test annotations to group tests with describe, run a single test with test.only, and skip tests with test.skip. Learn to tag tests with custom annotations.
Test Annotations-Tagging a Test, Creating Our Own Annotations5:29
Learn to tag tests and add custom annotations in Playwright Test for JavaScript, filter runs with grep by tag, run across multiple browsers, and view reports.
Hooks-Executing Custom Code Before/After All Tests, Before/After Each Test9:39
Explore Playwright hooks to run setup and teardown with before all, before each, after each, and after all. Manage shared data and view test reports.

Requirements

No programming experience is required. Beginner Friendly course.

Description

Playwright is a test automation tool that becoming more and more popular each year. In this course you will learn how to start writing automated scripts with Playwright and JS. Learn how to locate and interact with elements, how to make an assertions, how to wait on different conditions, annotations and way more. This course is beginners friendly and no prior knowledge is required. Everything you need to get started with Playwright.

Why Playwright:

Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox.

Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed.

Auto-wait. Playwright waits for elements to be actionable prior to performing actions. It also has a rich set of introspection events. The combination of the two eliminates the need for artificial timeouts - the primary cause of flaky tests.

Web-first assertions. Playwright assertions are created specifically for the dynamic web. Checks are automatically retried until the necessary conditions are met.

Tracing. Configure test retry strategy, capture execution trace, videos, screenshots to eliminate flakes.

Test frames, pierce Shadow DOM. Playwright selectors pierce shadow DOM and allow entering frames seamlessly.

Browser contexts. Playwright creates a browser context for each test. Browser context is equivalent to a brand new browser profile. This delivers full test isolation with zero overhead. Creating a new browser context only takes a handful of milliseconds.

Log in once. Save the authentication state of the context and reuse it in all the tests. This bypasses repetitive log-in operations in each test, yet delivers full isolation of independent tests.

Who this course is for:

Beginner Automation Engineers

Playwright Test Automation With JavaScript - Getting Started

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 38min

Locating Elements5 lectures • 1hr 2min

Interacting with Elements4 lectures • 1hr 9min

Assertions5 lectures • 42min

Waits2 lectures • 20min

Annotations and Hooks3 lectures • 23min

Requirements

Description

Who this course is for: