UI Mode and Test Explorer#

Playwright provides visual ways to run, debug, and manage your tests through its UI Mode and the VS Code Test Explorer. These tools make test development more intuitive and efficient.

Playwright UI Mode#

Playwright’s UI Mode provides a graphical interface for running and debugging tests without using the command line.

Starting UI Mode#

To launch Playwright’s UI Mode:

# Launch UI Mode for all tests
npx playwright test --ui

# Launch UI Mode for a specific test file
npx playwright test path/to/test.spec.ts --ui

# Launch UI Mode with specific browser project
npx playwright test --ui --project=chromium

Features of UI Mode#

Playwright UI Mode

1. Test Explorer Panel#

The left panel displays your test files and individual tests organized in a tree structure. You can:

  • Run a single test by clicking the play button next to it

  • Run all tests in a file

  • Filter tests by status (passed, failed, skipped)

2. Source Panel#

The center panel shows your test source code with:

  • Syntax highlighting

  • Line numbers

  • Clickable actions that can be traced in the timeline

3. Timeline Panel#

The right panel shows the test execution timeline with:

  • Screenshots at each step

  • Network requests

  • Console logs

  • Test steps with timestamps

4. Watch Mode#

UI Mode automatically watches for file changes and re-runs tests when you save modifications, making the test-debug cycle much faster.

# Enable file watching with UI Mode
npx playwright test --ui --watch

Debugging in UI Mode#

When a test fails or when you’re developing new tests, UI Mode makes debugging easier:

  1. Tracing: See exactly what happened at each step

  2. Step Exploration: Click on any step to see the application state at that point

  3. Screenshot Review: View screenshots captured at each action

  4. Console Access: Review console logs directly in the UI

  5. Locator Testing: Test selectors in real-time to verify they target the correct elements

Pick Locators Using UI Mode#

One of the most powerful features of UI Mode is the Locator Picker:

  1. Click the “Pick locator” button in the toolbar

  2. Click on any element in the application

  3. UI Mode will suggest the best locator for that element

  4. Copy the generated locator directly into your test

VS Code Test Explorer#

If you’re using Visual Studio Code, you can leverage the Playwright Test Explorer extension to run and debug tests directly within your IDE.

Installing the Extension#

  1. Open VS Code Extensions view (Ctrl+Shift+X or Cmd+Shift+X)

  2. Search for “Playwright Test”

  3. Install the official “Playwright Test for VSCode” extension

Features of the VS Code Extension#

VS Code Playwright Extension

1. Test Explorer View#

Access the Test Explorer view to see all your tests organized hierarchically:

  • Group by file, suite, or tag

  • Run individual tests with a single click

  • View test status (passed, failed, skipped)

2. CodeLens Integration#

The extension adds CodeLens annotations above test definitions, allowing you to:

  • Run a single test

  • Debug a test

  • Show test output

// CodeLens appears above this line
test("should navigate to homepage", async ({ page }) => {
  // Test code here
});

3. Inline Debug Actions#

Right-click on any test in your code to access contextual actions:

  • Run Test

  • Debug Test

  • Show Output

  • Go to Test

4. Debug Configuration#

The extension automatically configures debug settings for Playwright:

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "name": "Debug Current Test",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/@playwright/test/cli.js",
      "args": ["${file}:${lineNumber}"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

Running Tests in VS Code#

There are multiple ways to run tests in VS Code:

Using the Test Explorer#

  1. Navigate to the Testing view (flask icon in the sidebar)

  2. Browse the test tree to find your test

  3. Click the play button next to the test name

Using CodeLens#

  1. Open your test file

  2. Click the “Run Test” CodeLens above the test definition

Using Command Palette#

  1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P)

  2. Type “Test: Run Test at Cursor” and press Enter

  3. Alternatively, use “Test: Debug Test at Cursor” to start debugging

Debugging Tests in VS Code#

The VS Code integration provides a powerful debugging experience:

  1. Set breakpoints in your test code

  2. Start debugging the test (via CodeLens or Test Explorer)

  3. Use the debugging controls to:

    • Step through code

    • Inspect variables

    • View call stack

    • Add watch expressions

Output and Reporting#

Test results appear directly in VS Code:

  • Test Output panel shows console logs and test reporter output

  • Problems panel displays test failures with stack traces

  • Terminal shows detailed execution logs

Best Practices#

UI Mode Best Practices#

  1. Use watch mode for rapid test development

  2. Filter tests to focus on specific areas

  3. Explore all actions in the timeline to understand test flow

  4. Use the trace viewer to diagnose failed tests

  5. Leverage pick locators to create robust selectors

VS Code Best Practices#

  1. Use keyboard shortcuts:

    • Alt+T R - Run test at cursor

    • Alt+T D - Debug test at cursor

  2. Create custom test patterns in settings.json:

    "playwright.testExplorer.patterns": {
  "spec": ["**/*.spec.ts", "**/*.test.ts"]
}

  3. Configure test groups to organize large test suites

  4. Use test filtering with glob patterns

Common Workflows#

Test-Driven Development with UI Mode#

  1. Write a failing test

  2. Launch UI Mode with watch enabled

  3. Implement the feature

  4. See the test pass in real time as you save changes

  5. Refine and optimize your code

Debugging a Failed Test#

  1. Open the test file in VS Code

  2. Set breakpoints at critical points

  3. Use CodeLens to start debugging

  4. Step through the execution to identify the issue

  5. Fix the code and re-run the test

Cross-Browser Testing#

  1. Configure multiple browser projects in playwright.config.ts

  2. Use UI Mode to run tests across all browsers

  3. Examine browser-specific differences in the timeline

  4. Debug browser-specific issues with targeted debugging

By leveraging both UI Mode and VS Code Test Explorer, you can significantly speed up your test development workflow and make debugging more efficient and intuitive.