← Back to videos

Get started with end-to-end testing: Playwright | Episode 2 - Getting Started

Let’s take a look at how to install playwright using the VS Code extension as well as walk through the example so you can fully understand what is happening on each line of the test and see how locators and assertions are used when writing tests.

Installing Playwright with VS Code Extension: A Step-by-Step Guide

In this video tutorial, we jump into the process of installing Playwright using the VS Code extension and explore the foundational elements of setting up tests with it.

The video starts off by showing us how to install Playwright. Upon typing install playwright in VS Code, we're presented with the default browser options, which can be modified later in the config file. An interesting feature highlighted is the "Install GitHub Actions workflow," which creates a YAML file for GitHub actions, allowing tests to run automatically on each pull request.

After selecting the browsers and proceeding with the installation, Playwright installs the necessary binaries. It's noted that the actual browsers do not need to be installed on your machine for this to work.

We're then introduced to the result of the setup process—a GitHub folder with a YAML file, a test folder with a sample test, an examples folder, and the Playwright config file where various configurations can be set, like the base URL, web server setup, and device emulation.

Diving into the example test, the video explains that the test begins with importing functions from Playwright and defining a test with a specific name and function. The page object is essential for performing actions and asserts within the test. Playwright ensures that each test runs in an isolated environment to avoid interference.

Interacting with the page is similar to how a user would—the video walks through examples such as filling forms, clicking links, and navigating to URLs. We're reminded of the importance of using await due to Playwright's async nature, which prevents flaky tests.

Asserting the page title is demonstrated using a built-in assertion in Playwright that retries until the expected title is found or a timeout occurs. The video emphasizes the need for using await here as well.

Another key aspect introduced is the concept of locators in Playwright, which help identify elements on the page for interaction. The tutorial recommends using user-facing attributes for locating elements, like placeholder, label name, etc., rather than CSS or XPath. These locators are said to be built with auto-waiting and retryability.

The video shows an example of using a role-based locator followed by an assertion to check if a specific heading is visible on the page. Assertions like toBeVisible, toBeChecked, and others are mentioned, along with a reference to the documentation for a complete list.

Lastly, the tutorial wraps up by summarizing what was covered: installation of Playwright, use of locators, and assertions. A teaser for the next video is provided, which will delve into running tests with and without browser windows and include a step-by-step recording of test execution.

Stay tuned for the next installation and learn how to make the most of Playwright's capabilities for automated testing.

Related Videos

#16 - ARIA and how Playwright is making use of it to identify UI controls?
#16 - ARIA and how Playwright is making use of it to identify UI controls?
Generating Playwright Tests in VS Code
Generating Playwright Tests in VS Code
Playwright - Set timeout, parallelisation and retries directly in your test files
Playwright - Set timeout, parallelisation and retries directly in your test files
Playwright Version 1.14 | Playwright Tutorial - Part 45
Playwright Version 1.14 | Playwright Tutorial - Part 45
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.