# Running Tests with Playwright Test Explorer and Generating Tests with Codegen

DevFeed: [Running Tests with Playwright Test Explorer and Generating Tests with Codegen](<https://devfeed.tech/articles/running-tests-with-playwright-test-explorer-and-generating-tests-with-codegen-22423.md>)

Original publisher: [Read original article](<https://www.tjmaher.com/2026/08/running-tests-with-playwright-test.html>)

Author: T.J. Maher (noreply@blogger.com)

Published: 2026-08-11T03:00:47Z

Content type: tutorial

Language: en

Sources: [T.J. Maher](<https://devfeed.tech/sources/t-j-maher.md>)

Topics: [Playwright](<https://devfeed.tech/topics/playwright.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [Visual Studio Code](<https://devfeed.tech/topics/visual-studio-code.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [browsers](<https://devfeed.tech/tags/browsers.md>), [bun-create-playwright](<https://devfeed.tech/tags/bun-create-playwright.md>), [debugging](<https://devfeed.tech/tags/debugging.md>), [playwright](<https://devfeed.tech/tags/playwright.md>), [testing](<https://devfeed.tech/tags/testing.md>), [vscode](<https://devfeed.tech/tags/vscode.md>)

## AI overview

A tutorial on using Playwright Test Explorer in VS Code to discover, run, and debug tests across Chromium, Firefox, and WebKit, and on using Playwright's CodeGen to generate test drafts with locators and assertions from browser interactions.

## Source excerpt

Finding the best locator for a web element can be a hassle: Right clicking on an element in Google Chrome. Inspecting the element. Going to Chrome Developer Tools. Try to decide what to do if there isn't a clear test id. Playwright comes with a built in code generator where it can built out a rough draft of a test while you interact with a website. "Playwright will look at your page and figure out the best locator, prioritizing role, text and test id locators. If the generator finds multiple elements matching the locator, it will improve the locator to make it resilient that uniquely identify the target element", according to Playwright.dev / Test Generator. Do you have the Integrated Development Environment (IDE) by Microsoft, VS Code? You can get it at the Visual Studio Marketplace. Playwright Test Explorer Playwright.dev / Getting Started VS Code: https://playwright.dev/docs/getting-started-vscode After installation, you will see a beaker icon in your VS Code left navigation menu. Selecting that, you can see your tests, such as the default ones Playwright automatically adds when it is installed: Here you can see that Test Explorer has discovered the test suite example.spec.ts, along with two tests it created: has title: Verifies that if you go to playwright.dev, that it has a link titled "Get Started". get started link: Verifies at playwright.dev that after clicking on Get Started link, the heading says "Installation". Selecting the green arrow button will open up three browser windows: Chromium, Firefox, and a WebKit browser created by Playwright, mimicking Safari. It will run a total of six tests. But wait! There's more! You can: Run a single test. Run all tests at different levels. Run on multiple browsers. Show a browser. You can also debug your tests: Set breakpoints by clicking on the gutter next to a line number Right clicking the test and select "Debug test". Running your test will pause at your breakpoint, allowing you to step through your code. You can