VS Code - Playwright Helpers

Description

This Visual Studio Code extension adds predefined commands for Node.js Playwright.

Note: For now only Windows OS is fully supported.

Table of Contents

• Description
• How to Use This Extension in VS Code
  • Command Palette
  • Side View
• Features
  • Commands List
  • Command Composer
  • Trace Viewer
  • Report Viewer
  • Playwright Scripts Runner
• Contributing
• For more information

How to Use This Extension in VS Code

Commands are available at:

Command Palette

The Command Palette is a feature in Visual Studio Code that provides a convenient way to access various commands and features within the editor.

1. Open the Command Palette by pressing Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS).
2. Type the name of the command you wish to execute and select it from the list.
3. All commands from this extensions are grouped under category PW Helpers, e.g.:

PW Helpers: Initiate New Playwright Project

Side View

In addition to accessing the commands through the Command Palette, you can also find them in the Side View of Visual Studio Code.

Under the Playwright Helpers section you will see a list of available commands categorized. Simply click on a command to execute it.

The Side View provides a convenient way to access and execute commands without having to remember the command names or use the Command Palette.

Features

This extension provides the following features:

• Commands for Playwright
• Running scripts from package.json
• Command Composer - allows you to compose your own commands

Commands List

Command Composer

The Command Composer allows you to compose your own commands by selecting the desired options and parameters.

From graphical user interface you can select options described in documentation and then execute the command:

Currently available commands to compose: https://playwright.dev/docs/test-cli#reference

Codegen Composer

The Codegen Composer allows you to compose your own codegen command by selecting the desired options and parameters.

Trace Viewer

The extension provides an easy way to view Playwright traces in a graphical user interface. You can view the traces in a tree view, search for specific tests, and quickly run trace-viewer to display selected trace.

Report Viewer

The extension provides an easy way to view Playwright reports in a graphical user interface. You can view the reports in a tree view and quickly run view-report to display selected report.

Playwright Scripts Runner

The extension provides an easy way to run Playwright scripts from package.json. You can run scripts from the package.json file by selecting the script from the list.

Context Menu Commands

The extension provides additional context menu commands for the following items:

• Show Trace files (trace.zip) - you can quickly view the trace in the Trace Viewer via clicking on file in the Explorer and selecting Show Trace from the context menu.

• Show Reports (playwright-report/index.html) - you can quickly view the report via clicking on index.html file in the Explorer and selecting Show Report from the context menu.

• Run Tests (.spec.ts) - you can quickly run the tests via clicking on .spec.ts file in the Explorer and selecting Run Tests from the context menu.

CodeLenses

The extension provides additional CodeLenses for the following items:

• test annotations (test, only, skip) - you can quickly change the test annotations via clicking on the annotation above the test

Contributing

This project is open source and we welcome contributions from the community. If you would like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them to your branch.
4. Push your branch to your forked repository.
5. Open a pull request to merge your changes into the main repository.

Please ensure that your code follows our coding guidelines and includes appropriate tests. We appreciate your contributions and look forward to reviewing your pull requests!

For more information

• Visual Studio Code's Markdown Support
• Markdown Syntax Reference

Enjoy!