Getting Started with Playwright & VS Code (2025) 🚀

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 config and run the example test while viewing it in the browser, and then learn how to run our tests in different browsers as well as with the trace viewer option. Other things covered are how to pick a locator, how to record a test using Playwrights builtin Codegen as well as how to fix a test using AI.

00:00 Installing the VS Code extension
00:25 Installing Playwright
01:12 Exploring what was installed
02:12 Understanding the config
03:46 Running your first test
04:38 Show browser option
05:45 Show trace viewer option and exploring the trace
08:35 Understanding projects and running tests on mobile viewports
10:54 Pick locator
12:40 Fix with AI
14:55 Record a test with Codegen
18:30 Record at cursor

Useful Links:
Docs: https://playwright.dev/docs/next/getting-started-vscode
Discord: https://aka.ms/playwright/discord
GitHub: https://github.com/microsoft/playwright
Twitter: https://twitter.com/playwrightweb

#playwright #vscode #playwrightdev #playwrightweb