Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Regression]: AI aria snapshot drops a button's name when its icon wrapper has whitespace or a CSS-sized SVG

Cerrado
  • ¿Algo no está bien?
#43,315 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Ya se ha fusionado un pull request relacionado.

  • #43317 de @pavelfeldman — fusionado

Evaluación

Dificultad
4/5
Tiempo estimado
1-2 días
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
playwright, typescript
Área
accessibility, testing-qa

Línea de trabajo

Start with the supplied TypeScript reproduction in tests/repro.spec.ts and compare AI aria snapshots for the whitespace and CSS-sized SVG cases against the control. The report identifies ariaSnapshotDistiller and removeRedundantNames as possible investigation points. Done means both failing cases retain button "New survey" in the AI snapshot; an open linked pull request is already addressing the issue.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Last Good Version

1.61.0

First Bad Version

1.62.0

Steps to reproduce

Single spec, no app or dependencies beyond @playwright/test:

  1. npm init playwright@latest repro (or any project with @playwright/test 1.62.0 or later)
  2. Save this as tests/repro.spec.ts:
import { test, expect } from '@playwright/test';

const icon = '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"></path></svg>';

const cases = {
  'icon span with whitespace': `<button><span>\n  ${icon}</span>New survey</button>`,
  'icon styled like MUI SvgIcon': `<button><span><svg aria-hidden="true" viewBox="0 0 24 24" style="width:1em;height:1em;display:inline-block;font-size:1.5rem"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"></path></svg></span>New survey</button>`,
  'control: no whitespace, unstyled icon': `<button><span>${icon}</span>New survey</button>`,
};

for (const [name, html] of Object.entries(cases)) {
  test(name, async ({ page }) => {
    await page.setContent(`<main>${html}</main>`);
    await expect(page.getByRole('button', { name: 'New survey' })).toHaveCount(1);
    const snapshot = await page.locator('main').ariaSnapshot({ mode: 'ai' });
    console.log(`${name}:\n${snapshot}`);
    expect(snapshot).toContain('button "New survey"');
  });
}
  1. npx playwright test tests/repro.spec.ts --reporter=list
Version whitespace MUI-styled icon control
1.60.0 pass pass pass
1.61.0 pass pass pass
1.62.0 fail fail pass
1.63.0 fail fail pass
1.64.0 fail fail pass
1.65.0-alpha-2026-10-12 fail fail pass
Expected behavior

The button keeps its accessible name in the ai snapshot, as it does in 1.61.0 and as getByRole('button', { name: 'New survey' }) resolves it in every version:

- main [ref=e1]:
  - button "New survey" [ref=e2]
Actual behavior

Both the name and the text are gone, leaving a bare button:

- main [ref=e1]:
  - button [ref=e2]

The same happens in Playwright MCP's browser_snapshot, so an agent sees an unlabeled button [ref=…] and can't find it by its label. The code MCP generates for a click on that ref is still correct (getByRole('button', { name: 'New survey' })), so only the snapshot loses the name.

Additional context

Related to #41985, which reports the same symptom for text nested in spans beside an aria-hidden SVG, but its fix (#41988) doesn't cover these cases: they still fail on 1.64.0 and on today's 1.65 alpha, which include that fix.

Two triggers, found by reducing a real page (an MUI <Button startIcon={<AddIcon />}>):

  • A whitespace-only text node inside the icon's wrapper span.
  • The icon being sized by CSS, as MUI's SvgIcon is (width: 1em; height: 1em; display: inline-block; font-size: 1.5rem). This is the trigger on the real page: removing the SVG's class restores the name.

From reading the bundled ariaSnapshotDistiller, it looks like removeRedundantNames clears the button's name because its text is a name-from-content contributor that will be rendered, and a later pass then collapses that contributor away, so neither survives. That's a guess at the cause; the repro above is the evidence.

Environment
System:
  OS: macOS 26.5.1
  CPU: (18) arm64 Apple M5 Pro
Binaries:
  Node: 24.14.1
  npm: 11.11.0
npmPackages:
  @playwright/test: 1.64.0
Lenguaje dominante
TypeScript
Estrellas
97.4k
Forks
6.6k
Merge medio
18 h 53 min
PR fusionados (30 d)
307

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/playwright

Todos los issues de microsoft/playwright

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.