• 00:03 Introduction to Playwright Installation
• 00:21 Installing GitHub Actions Workflow
• 00:39 Reviewing Installed Files and Folders
• 00:28 Importing Functions and Defining a Test
• 00:54 Working with Locators and Assertions
• 00:59 Creating a Role-Based Locator

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.