Playwright Snippets & Useful command
A list of simple Playwright code snippets to speed up your tests. Besides, this extension also provides useful commands for folding and Playwright Insights Annotation reporting.
- Folding: collapse test bodies and suites to focus on file structure. Use
Fold Playwright Test Blocks / Unfold Playwright Test Blocks from the Command Palette.
- Insights: scan the workspace for
.fail, .fixme, .skip, .slow, and .setTimeout annotations and open a workspace-scoped markdown report for review. Run Playwright Insights: Generate Report.
Support languages
How to use
- Install this extension
- Open a JavaScript or TypeScript file in the editor.
Using the extension features
Snippets: type a snippet prefix (for example pt-test, pt-step, pt-group) and press Tab to insert common Playwright scaffolding such as tests, hooks, and modifiers.
Folding: collapse or expand Playwright test blocks in the active editor using the Command Palette (Ctrl+Shift+P on Windows or Cmd+Shift+P on Mac):
Fold Playwright Test Blocks — collapse all detected test/suite bodies in the current file.Unfold Playwright Test Blocks — expand previously collapsed blocks.
Playwright Insights (Report): run Playwright Insights: Generate Report from the Command Palette to scan your workspace for test annotations (.fail, .fail.only, .fixme, .skip, .slow, .setTimeout) and open a generated markdown report in an unsaved editor tab. The report includes a summary by annotation type and a detailed inventory with workspace-relative paths and line numbers.
Editor features
This extension also adds editor-level support for Playwright tests:
Folding
- Fold Playwright Test Blocks - Collapse all Playwright test blocks in the current file
- Unfold Playwright Test Blocks - Expand all folded Playwright test blocks in the current file
Reporting
- Playwright Insights: Generate Report - Scan your entire workspace for Playwright test insights including annotations (
.fail, .fail.only, .fixme, .skip, .slow, .setTimeout) and comprehensive test case metrics.
- Report is displayed in an unsaved editor tab
- You can choose to save or discard the report
- Includes suite directory metadata (breakdown by workspace-relative test directory)
- Summary breakdown by annotation type
- Detailed inventory with test titles, file paths, and line numbers
- Uses workspace-relative paths for unambiguous file identification
You can enable or disable the editor features in VS Code settings:
"playwrightSnippetsKit.enable": true
You can customize which Playwright-style identifiers are recognized for folding and annotation scanning in VS Code settings:
"playwrightSnippetsKit.playwrightIdentifiers": ["test", "base", "myTest"]
Snippets
Type the prefix then press Tab to insert the snippet.
Write a tests
| Prefix |
Content Description |
pt-test |
Write a test case |
pt-step |
Write a test step |
pt-group |
Write a group tests |
pt-tags |
Tags your test |
pt-annotate |
Annotate your test |
Test hooks
| Prefix |
Content Description |
pt-afterall |
Will runs after all tests |
pt-aftereach |
Will runs after each test |
pt-beforeall |
Will runs before all tests |
pt-beforeeach |
Will runs before each test |
Test modifiers
| Prefix |
Content Description |
pt-focus |
Write a focus test |
pt-skip |
Write a skip test |
pt-slow |
Write a test as slow |
pt-fail |
Write a test as fail |
pt-fixme |
Write a test as fixme |
pt-timeout |
Change timeout for test |
Files
| Prefix |
Content Description |
pt-download |
Download event |
pt-upload |
Upload file event |
Screenshot
| Prefix |
Content Description |
pt-screenshot |
Take a screenshot of the page |
Clock
| Prefix |
Content Description |
pclock-install |
Install the clock |
pclock-forward |
Jump forward in time by duration (milliseconds) or time |
pclock-pause |
Pause the clock at a specific time |
pclock-resume |
Resume the clock |
pclock-run |
Run the clock for a specific duration or time |
pclock-set |
Set the clock to a specific fixed time |
pclock-system |
Set the clock to a specific system time |
Locates element
| Prefix |
Content Description |
pg-role |
Locate element by role |
pg-label |
Locate element by label |
pg-placeholder |
Locate element by placeholder |
pg-text |
Locate element by text |
pg-alt |
Locate element by alt text |
pg-title |
Locate element by title |
pg-testid |
Locate element by test id |
pg-locator |
Locate element by CSS or XPath selector |
Test (expect) assertions non-retrying
| Prefix |
Content Description |
pe-tobe |
Value is the same |
pe-closeto |
Number is approximately equal |
pe-defined |
Value is not undefined |
pe-falsy |
Value is falsy, e.g. false, 0, null, etc. |
pe-gt |
Number is more than |
pe-gte |
Number is more than or equal |
pe-beinst |
Object is an instance of a class |
pe-lt |
Number is less than |
pe-lte |
Number is less than or equal |
pe-benan |
Value is NaN |
pe-benull |
Value is null |
pe-betruthy |
Value is truthy, i.e. not false, 0, null, etc. |
pe-beundef |
Value is undefined |
pe-containstr |
String contains a substring |
pe-containarr |
Array or set contains an element |
pe-containeq |
Array or set contains a similar element |
pe-equal |
Value is similar - deep equality and pattern matching |
pe-haslength |
Array or string has length |
pe-hasprop |
Object has a property |
pe-match |
String matches a regular expression |
pe-matchobj |
Object contains specified properties |
pe-stricteq |
Value is similar, including property types |
pe-throw |
Function throws an error |
pe-any |
Matches any instance of a class/primitive |
pe-anything |
Matches anything |
pe-arrcont |
Array contains specific elements |
pe-close |
Number is approximately equal (closeTo) |
pe-objcont |
Object contains specific properties |
pe-strcont |
String contains a substring (stringContaining) |
pe-strmatch |
String matches a regular expression (stringMatching) |
Test (expect) assertions auto-retrying
| Prefix |
Content Description |
pe-checked |
(promise) Checkbox is checked |
pe-attached |
(promise) Element is attached |
pe-disabled |
(promise) Element is disabled |
pe-editable |
(promise) Element is editable |
pe-empty |
(promise) Container is empty |
pe-enabled |
(promise) Element is enabled |
pe-focused |
(promise) Element is focused |
pe-hidden |
(promise) Element is not visible |
pe-viewport |
(promise) Element intersects viewport |
pe-visible |
(promise) Element is visible |
pe-containtext |
(promise) Element contains text |
pe-containclass |
(promise) Element has specified CSS classes |
pe-accdesc |
(promise) Element has a matching accessible description |
pe-accname |
(promise) Element has a matching accessible name |
pe-attr |
(promise) Element has a DOM attribute |
pe-class |
(promise) Element has specified CSS class property |
pe-count |
(promise) List has exact number of children |
pe-css |
(promise) Element has CSS property |
pe-id |
(promise) Element has an ID |
pe-jsprop |
(promise) Element has a JavaScript property |
pe-role |
(promise) Element has a specific ARIA role |
pe-screenshot-element |
(promise) Element has a screenshot |
pe-text |
(promise) Element matches text |
pe-value |
(promise) Input has a value |
pe-values |
(promise) Select has options selected |
pe-ariasnap |
(promise) Element matches the ARIA snapshot |
pe-screenshot-page |
(promise) Page has a screenshot |
pe-title |
(promise) Page has a title |
pe-url |
(promise) Page has a URL |
pe-ok |
(promise) Response has an OK status |
If you have any questions or suggestions, feel free to reach out:
Visit my personal blog
Enjoy 🚀
| |
