VS Code is a powerful tool for developers/testers, especially when it comes to testing with Playwright. In this post, we'll explore essential settings and snippets that can speed up your testing.

VS Code Features to Speed Up Coding

Minimap

A Minimap (code outline) gives you a high-level overview of code, making it easier to navigate and don't need to scroll through long files. It helps you quickly find sections of code, especially in large files. You can enable the Minimap in your VS Code settings Code > Settings > Settings by enabled Text Editor > Minimap

Sticky Scroll

Sticky Scroll is a feature that keeps your code in view while you scroll through long files. It allows you to see the current function or class you're working on, making it easier to navigate complex codebases. You can enable Sticky Scroll in your VS Code settings by enabling Editor > Sticky Scroll.

Command Palette and Search

This is the most powerful feature in VS Code. The Command Palette allows you to access all commands and Search help to quickly search in your files or codebases.

• To open the Command Palette, press Ctrl + Shift + P (or Cmd + Shift + P on macOS).

• To open Search, press Ctrl + P (or Cmd + P on macOS). You can also use the @ symbol to search for symbols in the current file or % to search for text, : to search for line numbers. You can search files by typing some words related to the file name or folder, don't need to type the full name.

Playwright Snippets Kit extension

This is my VS Code extension that provides a collection of useful code snippets for Playwright. You can use these snippets to quickly generate code for common test cases, such as interacting with elements, assert conditions, and more. If you love it , please consider giving it a star ⭐️ on marketplace

Install

To install the Playwright Snippet Kit, follow these steps:

1. Open the Extensions view in VS Code by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing Ctrl + Shift + X (or Cmd + Shift + X on macOS).
2. Search for Playwright Snippet Kit or codemo-playwright-snippets in the Marketplace.
3. Click the "Install" button to install the extension. (or download here)

How to use

Once installed, you can start using the snippets in your Playwright tests, by typing the prefix for the snippet you want to use and pressing Tab to insert it.

Here is a list of some useful snippets included in the kit:

• pt-test: Generates a simple test case.
• pg-role: Generates a code snippet to locate an element by role.
• pe-checked: Generates a code snippet to assert that a checkbox is checked.
• ... and more...

Write a tests

Locates element

Assertions

References

• VS Code Playwright Snippet Kit
• VS Code Minimap
• VS Code Sticky Scroll
• VS Code Command Palette