Rayrun
← Back to videos

Getting Started with Playwright and VS Code

Let's get started with Playwright using the VS Code Extension. In this video we will walk though how to install the extension, then install Playwright and browsers needed, and go over what was installed. Then we will take a look at the example test and run the test while viewing it in the browser, and then learn how to run our tests in different browsers.

In this video, we learn how to get started with Playwright using the VS Code extension and running tests across different browsers. Playwright is a powerful tool for end-to-end testing of web apps and has excellent TypeScript support, allowing for better IDE integration even if you don't have prior TypeScript experience.

First, install the Playwright test for VS Code from the extensions marketplace and then use the command panel to install Playwright along with the desired browsers (Chromium, Firefox, WebKit, or all of them). You can also opt to add a GitHub Actions workflow, so your tests will run on every push or pull request.

A sample test folder, test examples folder, and Playwright configuration file will be created. You can modify the configuration file if necessary, for example, if you want to exclude a particular browser or include specific devices.

To run your tests, click the green triangle in the test file. The browser window will open, run the test, and display the test result. You can run tests on different browsers by selecting the desired browser profile in the configuration menu. Additionally, you can run tests on all installed browsers simultaneously.

In conclusion, Playwright is a powerful tool for end-to-end web app testing, integrated with VS Code to make it simple and efficient for developers to write, run, and debug tests.

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?
Playwright with UI Mode is awesome
Playwright with UI Mode is awesome
Create feature, steps & config | Playwright & Cucumber - Typescript | Part 1
Create feature, steps & config | Playwright & Cucumber - Typescript | Part 1
Working with multiple elements in Playwright Test (NodeJS)
Working with multiple elements in Playwright Test (NodeJS)
TwitterGitHubLinkedIn
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.