OpenCourser
Learn skills that shape your future
Visit OpenCourser.com
Playwright - test automation framework developed by Microsoft. Modern, highly customizable and reliable.
Playwright - test automation framework developed by Microsoft. Modern, highly customizable and reliable.
This class covers all fundamental concepts of the framework. We begin from scratch, starting with setup and configuration and then a hands-on framework overview to familiarize yourself with the environment. Then from lesson to lesson, we slowly increase complexity. All lessons have a logical progression and are connected. The next lesson in the section builds up a new concept on top of what was learned in the previous lesson. This is also related to the code demonstrated in the class. We will have two test applications, and slowly over the course will add more and more code uncovering new topics.
How to follow the classWatch all lessons in the order they have been published. Write the code from the class along with me. If needed, pause the video to complete the code. Practicing - is the best way to learn. Also, I would recommend watching the lessons in full-screen mode because sometimes the text on the screen can be small and hard to read. If you skip lessons or watch them not in order, be ready that you may have a feeling of a knowledge gap, or that something is not clear.
What you will learn:
How to install Playwright from scratch as a new independent project or add to an existing front-end application project.
JavaScript Fundamentals in case you are a beginner to programming.
How to run tests using the command line interface, UI mode, Playwright extension, and debug tests
How to organize tests, structure tests, use test hooks
HTML terminology, locator syntax rules, and Playwright best practices to locate web elements.
Different types of assertions, how auto-waiting concept works, and how to configure different timeouts.
How to work with different UI components, such as input fields, radio buttons, checkboxes, lists, tooltips, dialog boxes, date pickers, web tables, iFrames, sliders, drag and drop.
What is the Page Object Model. How to organize test framework code with Page Objects. Recommended architecture for Page Object model with Playwright
How to work with APIs: API mocking, API requests, intercept API calls, shared storage state, API authentication
Multiple advanced topics: fixtures, global setup and teardown, parallel execution, test tags, test retries, visual testing, mobile device emulation, reporters, environment variables, and test execution in Docker container.
By the end of the class, you'll be familiar with all important Playwright concepts to be able to automate pretty much any web application.
Quick introduction to the class, what will be covered in, and how to work with this class.
Comparison of the main features of Playwright and Cypress frameworks.
Configuration of development environment, installation of needed components to follow the class:
- VS Code installation configuration
- Git Installation
- Node.js installation.
Installation of the test application for the class PW-test.
Configuration, project run and project overview.
Prerequisites for the class. Overview of JavaScript Fundamentals module.
If any of those topics are new, complete those lectures to get familiar with JavaScript basics.
The first run of the "Hello World" program in JavaScript
- How to declare a variable in JavaScript
- How to assign values to variables
- How to create constants. What is the difference between constants and variables.
- What are the different primitive data types in JavaScript
- How to work with strings in JavaScript.
- Combining several strings into a new value using concatenation and interpolation concepts
- Using variables in string concatenation and interpolation.
- What is an object and what is an array
- How to read values from objects and arrays
- How to add new values to objects and arrays
- How to override the existing values of objects and arrays
- Dot notation and bracket notation syntax to read objects
- Relational operators: more than, less than, more than equal, less than equal.
- Equality operators: loose and strict comparison.
- Logical "AND" operator
- Logical "OR" operator
- Logical "NOT" operator
- Examples of combinations with those operators on typical examples of application logic.
Explanation of conditional statements. How to control the flow of code execution
Implementation of small block code, using logical operators and conditional statements, prints a different message to the console depending on the provided input information.
How to repeat code using JavaScript loops
"for i" loop. Looping with index and condition.
"for of" loop. Looping through an array using an iterator.
ES6 JavaScript syntax for "forEach" loop.
How to stop the loop execution
How to create a different type of functions in JavaScriot
Declarative functions
Anonymous functions
ES6 syntax (fat arrow) functions
How to pass arguments into the function and return values from the function
Import and export for the functions.
How to create a JavaScript class
How to create a method
How to create an instance of the class and call methods of the class
How to pass arguments into the methods of the class.
Methods annotation for VS Code intellicense support
Main difference between TypeScript and JavaScript languages
How to define a strict primitive type for a variable in TypeScript
How to create a custom data type.
Playwright framework installation from scratch
Folder structure and files overview
How to run two example tests with the command line interface
Show the report using CLI command.
How to run tests in different browsers
How to run a specific spec file
How to run a test with a specific title
How to skip tests and run only a specific test in spec file
How to run tests with a VS Code Playwright extension
How to use a UI mode with a runner to execute tests and read test results
How to enable a "trace view" to collect a trace of test execution
Review a test trace in the report
How to debug tests using a command line
How to debug tests using a Playwright extension
Explanation of the structure of the test in Playwright
Syntax of the test body
How to group tests by test suites using a "describe"
What is async/await and "page" fixture
First test to open home page of the test application
How to use hooks: beforeAll, afterAll, beforeEach, afterEach
How to define a hook scope by test suite
How to run a specific suite or skip suite (describe)
Check how well you remembered the main Playwirght commands
Overview of the HTML terminology of the DOM, such as: tags, attributes, class and id attributes, values of attributes, parent and child relations between elements
Syntax rules for the different types of locators.
Find by: tag name, ID, class, attribute, class value, combination of selectors, xpath, partial text match, exact text match.
Explanation of Playwright best practice of "user-facing locators". Demonstrations of different methods for "user-facing locators"
How to locate a child elements.
How to locate parent elements.
Filtering locators by optional property "hasTest" and "has".
How to use filter() method.
How to use "name" property for user-facing locators
How to reuse locators
How to get a single text value from the page
How to get a list of the text values
How to get text values from the input field
What are assertions and how to work with them
Generic assertions, locator assertions, and differences between those
Soft assertions
Understanding of how the auto-waiting mechanism works in the Playwright.
How to configure different dynamic wait options for situations when Playwright doesn't wait automatically, such as: wait for a particular element, waiting for the particular API response, waiting for event or network call to be completed.
Explanation of hierarchy and relationships of timeouts in Playwright: global timeout, test timeout, action timeout, navigation timeout, expect timeout.
How to configure timeouts globally, by project and in the test body
Quiz for the section "Interaction with Web Elements"
How to fill and type text into the input field
How to make assertions and grab the values from the input field
How to select radio buttons by label and by text
How to make a correct assertion of radio button selection status
How correctly select check boxes using check() and uncheck() methods
How to select/unselect all checkboxes.
How to perform assertion of checkbox status
How to select values from lists and dropdowns
How to make an assertion of the values of the entire list
How to make an assertion of the CSS property
How to loop through the list of values
How to work with tooltips and simulate "mouse over" event
Tick how to find a locator for the tooltip to perform assertion
How to automate web dialog box
How to automate the browser dialog box to accept it
How to get a row in the table by any text value in this row
How to get a row in the table by a text value in the specific column
How to interact with a row knowing the locator for a desired row
How to loop through the rows of the table and perform assertion of the value for each row
How to select date in the date picker by exact day on the calendar day selector
How to validate the selected value in the input field
How to use a JavaScript Date() object to get a current system date
How to use this data to select a future day in the calendar from today
Writing a logic to automatically change the month in a calendar based on the desired future date
How to move the slider updating the css properties using JavaScript evaluation
How to move the slider simulating mouse movement by desired coordinates
How to switch into the iFrame to get access to the elements inside the iFrame
How to perform Drag and Drop operation
What is a page object model
Page object as a way to organize the test code and reduce code duplication.
DRY and KISS principles
Creation of the first page object for the Navigation menu.
How to create a new class, constructor, pass a page fixture, create a first method and read this method in the test
Complete the Navigation Page page object with methods to navigate across different pages
Creation of the private helper method to correctly select a parent menu item depending on the state of the menu if it's expanded or collapsed.
How to organize locators inside the page object according to Playwright documentation
My own recommendation and approach how to manager locators in page objects
How to parametrize methods of the page objects making them more reusable
How to pass arguments into page object methods
Creation of a new Date Picker page object and moving the code for the date selection into reusable methods
Creation of a private method inside of the page object that is responsible for the selection of the date in two different calendars, which demonstrates code optimization and high reusability.
How to create a new class Page Manager which is responsible for managing all page object classes
Demonstration of further code optimization with a Page Manager
How to create a helper base class that can share common methods with all page object classes.
Overview of the final architecture of the framework with page objects
What is API and how it works
Typical methods of REST API requests
HTTP response status codes
How client-server architecture organized
What is API mock
New project setup and overview for the API section.
What is API mocking
How to intercept browser API request and provide your own response
How to save the desired response into a separate JSON file and read this file from the test.
How to listen for a particular browser API endpoint request, intercept the response from the server, modify the response, and fulfill the modified response to be reflected on the web page
How to perform POST API request to get the token
How to use this authorization token in the headers for the next API request
How to perform assertions of the API response
Real-life example, of how using API request it is possible to create a test precondition for the actual test. In this lesson we create a new article using API request as a precondition and then delete this article using UI
How to listen for a particular API endpoint request performed by the browser and get the response object saved into the variable
How to preform a Delete API request
Real-life example, of how information from intercepted API response object can be used to perform API request to clean up data after test execution. The article is created in UI and deleted using API request.
How to share the authenticated state of the application across the tests using storageState.
Optimization of beforeEach step. Log in to the application performed only once and then the authentication state is shared between the tests for the entire test run.
How to perform authentication to application using API request.
How to store token in the JSON file responsible for authentication
How to create own custom NPM scripts in package.json
How to use the command line interface to use those scripts
How to use the Faker JavaScript library to generate random test data
Installation of the Faker library into the project, import to the spec file, replacing of hardcoded test data by dynamically generated data.
How the Test Retry mechanism is designed in the Playwright
How to configure the retry count globally for the framework
How to configure retry only for a particular test or the test suite
How to add a conditional statement based on the retry event to manage flow of the test execution
How to run tests in fully parallel mode
How to run tests only in a single worker
How to configure the number of workers (desired threads)
How to configure parallel execution only for particular spec file or test suite
How to configure a sequential execution of the tests.
How to make a screenshot of the page at the desired step
How to make a screenshot of a particular section of the page.
How to save screenshots into a buffer instead of the file
How to configure video recording for the entire framework or by project
How to configure a recording resolution
How to configure environment variables by projects in the configuration file
How to create your own custom environment variables using fixtures
How to use ".env" file to manage environment variables
How to use process environment variables to pass values from the command line
Explanation of playwright.config.ts
How to create several configuration files with a different setup and switch between them
How to create a custom fixture as a replacement for the beforeEach hook
Replacement of the default "page" fixture with a custom fixture which is responsible for the initialization of Page Manager page object.
How to use a Project dependency to create a project-scoped setup and teardown steps
How to configure a global setup and global teardown steps for the entire framework
How to mark tests by tags
How to execute tests only with desired tags
How to combine several tags together per single test or test suite
How to select different mobile devices to run tests in mobile device emulation
How to provide a custom viewport size
How to use a testInfo object to get the name of the project and add a condition to the test to perform a different flow based on that, i.e. we run a test on mobile or desktop. That way script can be more universal, and the same test can be executed on desktop and mobile browsers.
How to set a desired built-in reporter
How to configure multiple test reporters
How to install and configure 3-rd party Allure reporter
How to use built-in tools for visual testing
How to visually test a specific UI component
How to adjust accuracy of visual testing
How to analyze test result of visual testing
How to update the base snapshots for the project with a single command
How to run Playwright tests in Docker container
How to configure Docker file
How to configure docker-compose.yaml file
How to save reports from the container to a host computer after the test execution
How to run Playwright tests using GitHub Actions for every pull request. And how to make automatic visual testing validation using Argos CI
Just a final word from me after the class completion :)
Save
Accessible even with limited prior knowledge.
Focus on practical examples and coding.
Covers Playwright from basics to advanced.
Instructor's teaching is highly praised.
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
