[Bug]: CodeGen generates invalid empty name attribute in getByRole for icon-only buttons

[YashGodseIndexnine]

Version

1.56.1

Steps to reproduce

1. Run Codegen: npx playwright codegen https://www.flaticon.com/authors/smashicons
2. Click on the magnify icon button

3. Observe the generated locator: await page.getByRole('button', { name: '' }).nth(1).click();

Expected behavior

CodeGen should fall back to more reliable selectors when buttons lack meaningful text content:

Option 1: CSS selector with classes
await page.locator('button.search__button').click();

Actual behavior

When using CodeGen on buttons with only icon content and no visible text:

Invalid locator with empty name attribute
await page.getByRole('button', { name: '' }).nth(1).click();

This locator is problematic because:

1. An empty name selector is not semantically meaningful
2. It will match any button without an accessible name, causing ambiguity
3. It doesn't uniquely identify the target element
4. The locator fails to leverage accessible attributes like 'title' or 'aria-label' when available

Additional context

The issue occurs because:

1. Icon fonts render glyphs via CSS pseudo-elements that contribute to accessible name calculation
2. These glyphs are often Unicode private use area characters or special symbols
3. After text normalization/sanitization, they become empty strings
4. CodeGen doesn't detect this edge case and generates invalid selectors

A proper fix would:

1. Detect when icon elements contribute only non-meaningful content to accessible names
2. Filter out icon-generated text from element text extraction
3. Skip role-based selectors when no meaningful text remains
4. Fall back to CSS selectors or parent-scoped locators for better uniqueness

Environment

Playwright Version: v1.56.0-next
Operating System: Windows 10
Browser: All (Chromium, Firefox, WebKit)
Node.js version: 22.16.0