Understanding Playwright's Selector Detection and Locator Generation
How Playwright Detects Selectors
Playwright uses a sophisticated approach to detect and generate selectors:
1.1 Event Interception
Intercepts DOM events (clicks, inputs, etc.) on the page
1.2 Element Identification
Identifies the target element when an event occurs
1.3 Selector Generation Process
a. Unique Attributes: Checks for id, data-testid, or aria-label
b. Text Content: Uses text content for elements like buttons or links
c. Role-based Selectors: Generates selectors based on ARIA roles
d. CSS Selectors: Falls back to CSS selectors if needed
1.4 Selector Optimization
Optimizes the generated selector for uniqueness and stability
1.5 Special Handling
Handles elements inside iframes and Shadow DOM
1.6 Key Components
Implemented in files like:
packages\playwright-core\src\server\injected\consoleApi.ts
packages\playwright-core\src\server\injected\recorder\recorder.ts
packages\playwright-core\src\server\injected\selectorGenerator.ts
packages\playwright-core\src\server\injected\injectedScript.ts
Playwright's Locator Generation: Integration and Complexity
It's important to note that we cannot easily extract Playwright's locator generation functionality for use in a custom recorder. Here's why:
2.1 Tight Integration
Playwright's core InjectedScript, which handles locator generation, is deeply integrated with other Playwright components
2.2 Complex Dependencies
Relies on various parts of Playwright's codebase, including DOM utilities and internal APIs
2.3 Context Awareness
Requires context from the entire page, including iframes and shadow DOMs
2.4 Evolving Implementation
Frequently updated and optimized, making a separate copy hard to maintain
2.5 Internal APIs
Uses non-public APIs that may change without notice
2.6 Performance Optimizations
Includes optimizations dependent on Playwright's internal workings
2.7 Browser-Specific Logic
May contain browser-specific code paths