Testing Angular Components by Properties with Playwright

Most Angular E2E tests look like this: await page.locator('[data-testid="submit-btn"]').click(); await page.locator('.user-card:nth-child(2) h2').textContent(); You end up fighting CSS specificity and fragile DOM structure instead of testing Angular behavior. What if you could do this instead? await page.locator('angular=app-button[label="Submit"]').click(); await page.locator('angular=app-user-card[user.role="admin"]').textContent(); That's exactly what @playwright-labs/selectors-angular provides. What Is It? A custom Playwright selector engine that queries Angular components by their actual component properties — @Input() values, signals, and nested objects — rather than DOM attributes or CSS classes. It hooks into Angular's DevTools API (window.ng) which is available in development builds. Installation npm install -D @playwright-labs/selectors-angular Setup Register the engine in your playwright.config.ts: import { defineConfig } from "@playwright/test"; import { AngularEngine } fro