Get Started with Playwright and VS Code (2025 edition)
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/gett...
Discord: https://aka.ms/playwright/discord
GitHub: https://github.com/microsoft/playwright
Twitter: / playwrightweb
#playwright #vscode #playwrightdev #playwrightweb