[Feature]: Enable Shift-Click to Interact with the Page While Using the Pick Locator Tool in the VS Code Extension

[jameskip]

🚀 Feature Request

Overview

When using the Playwright VS Code extension's Pick Locator tool, users currently need to manually toggle between selecting locators and interacting with the web page. This interrupts the workflow and slows down test development.

Problem Statement

• Current Behavior: The Pick Locator tool captures all click events for locator selection. To interact with the page (e.g., clicking buttons or filling forms), users must exit the locator picking mode.
• Issue: Manually toggling between picking locators and interacting with the page is cumbersome and disrupts the testing workflow.
• Impact: This slows down test creation and can be frustrating for users who need to frequently switch contexts.

Proposed Solution

• Feature: Allow users to hold the Shift key to temporarily bypass the locator selection mode.
• Behavior: While holding Shift, clicks and other interactions are passed directly to the web page, allowing interaction without exiting the Pick Locator tool.
• Benefits:
  • Efficiency: Reduces the need to toggle modes, streamlining the test development process.
  • User-Friendly: Provides an intuitive way to interact with the page without disrupting the locator selection workflow.

Example

1. Scenario: I am writing a test and need to select a locator after interacting with dynamic content (e.g., opening a dropdown menu).
2. Current Workflow:
   • Exit the Pick Locator tool.
   • Interact with the page to open the dropdown.
   • Re-enable the Pick Locator tool to select the locator.
3. With Proposed Feature:
   • Keep the Pick Locator tool enabled.
   • Hold Shift and click to open the dropdown menu.
   • Release Shift and proceed to pick the locator.

Motivation

Implementing Shift-click functionality to allow direct interaction with the web page while using the Pick Locator tool would enhance the usability of the Playwright VS Code extension. It would streamline test development by reducing unnecessary mode toggling and improve the overall developer experience.

[CB-atbas]

Another use case are tooltips: It's hard to capture them because I need to click manually "pick locator" - but then the tooltip already vanishes.
Work around is to start a recording session, but a keyboard shortcut would come in handy :)