Playwright POM Organizer

📌 Overview

Playwright POM Organizer is a VS Code extension designed to enhance the Playwright test automation workflow. It provides an intuitive way to organize Page Object Model (POM) locators and methods, displaying them in a dedicated sidebar.

This extension groups Playwright POM methods by their locators, enabling quick navigation and better visibility of locators and their usage across test scripts.

✨ Features

• 🗂 Locator & Method Grouping – Automatically organizes Playwright locators and their associated methods in a sidebar.
• 🔍 Real-Time Search – Quickly filter locators as you type.
• 📋 Copy Locator Name – Copy locator names to the clipboard with one click.
• 🔄 Refresh-Current POM file – Refresh and memorizes the current opened POM file, its locators and methods.
• ✅ Toggle Used & Unused Locators – View only used or unused locators for better maintenance.
• 📖 Jump to Method – Easily navigate to methods using the tree view.

🛠 Installation

1. Open VS Code.
2. Go to Extensions (Ctrl + Shift + X).
3. Search for Playwright POM Organizer.
4. Click Install.
5. Open a Playwright Page Object file and start using the extension.

🚀 Usage

Once installed, the extension automatically activates when you open a Playwright Page Object file.

Commands

You can use the following commands from the Command Palette (Ctrl + Shift + P):

Sidebar View

The extension provides a dedicated sidebar under Activity Bar → Playwright POM:

• Expand locators to view their associated methods.
• Click on a method to navigate to its definition in the code.

⚙️ Configuration

No additional configuration is required. The extension works automatically with Playwright Page Object files.