Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

getByRole and ariaSnapshot ignore names set through ariaLabelledByElements

Aperta
  • Qualcosa non va?
#43,549 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@dcrousso ci sta già lavorando.

Dal 22/10/2026.

  • #43577 di @dcrousso — aperta

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
73/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript, playwright, typescript
Ambito
accessibility, testing-qa

Direzione di ricerca

Start in packages/injected/src/roleUtils.ts, where the issue says labelled-by lookup currently reads aria-labelledby. Read the role name computation and related accessibility tests, then reproduce with ariaLabelledByElements and compare the snapshot and role locator results against the attribute-based control. Done means both label assignment methods produce the same accessible name and matching locator count.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Setting Element.ariaLabelledByElements gives a group an accessible name in Chromium's native accessibility tree, but Playwright's role locator cannot find it by that name and ariaSnapshot() omits the name. Using the equivalent aria-labelledby attribute works.

Reproduced with the latest stable Playwright 1.64.1 and the latest prerelease 1.65.0-alpha-2026-10-19, as identified by the npm registry on October 19, 2026. Both were executed with Node 26.10.0 on macOS arm64 and installed Google Chrome 155.0.8059.84 in headless mode. The example uses an installed Chrome through channel: 'chrome'.

import { chromium } from 'playwright';

const browser = await chromium.launch({ channel: 'chrome' });
try {
  const page = await browser.newPage();
  await page.setContent('<span id="title">Chosen name</span><div role="group"></div>');
  await page.evaluate(() => {
    document.querySelector('[role]').ariaLabelledByElements = [document.querySelector('#title')];
  });

  console.log(await page.getByRole('group').ariaSnapshot());
  console.log(await page.getByRole('group', { name: 'Chosen name' }).count());

  const cdp = await page.context().newCDPSession(page);
  const { nodes } = await cdp.send('Accessibility.getFullAXTree');
  console.log(nodes.find(node => node.role?.value === 'group').name.value);
  await cdp.detach();

  // Control: retain the same DOM and set the equivalent attribute.
  await page.getByRole('group').evaluate(element => element.setAttribute('aria-labelledby', 'title'));
  console.log(await page.getByRole('group').ariaSnapshot());
  console.log(await page.getByRole('group', { name: 'Chosen name' }).count());
} finally {
  await browser.close();
}

Actual output:

- group
0
Chosen name
- group "Chosen name"
1

Expected: both ways of assigning the label produce - group "Chosen name" and a matching locator count of 1.

The ARIA element-reference reflection interface provides this property as an alternative to ID references; it also supports cases where an IDREF attribute cannot express the relationship. Assigning the property clears the corresponding attribute, so reading only aria-labelledby cannot recover these names. Current roleUtils.ts still starts the labelled-by lookup from getAttribute('aria-labelledby').

We use element-reference labelling for task groups in a web component UI and currently need a Chromium CDP accessibility-tree assertion instead of the ordinary role locator/snapshot. No application code or web component is needed to reproduce the mismatch above.

This was written by Codex on behalf of max-sixty

Lingua principale
TypeScript
Stelle
98k
Fork
6.6k
Merge medio
16h 20m
PR unite (30g)
301

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/playwright

Tutte le issue di microsoft/playwright

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.