[BUG] get_by_role() can't find <dd> elements with accessible name

[michaeldmoser]

System info

• Playwright Version: 1.38.0
• Operating System: Debian bullseye
• Browser: Chromium
• Other info: Using with Django and pytest

Source code

• [X] I provided exact source code that allows reproducing the issue locally.

Test file (self-contained)

I'm using python playwright and trying to locate a <dd> element using the Page.get_by_role() with an accessible name.

Here is the HTML:

<dl class="grid grid-cols-2 gap-2">
  <dt id="term-acres" role="term">Acres</dt>
  <dd aria-labelledby="term-acres" role="definition">1.86</dd>
  <dt id="term-geocode">Geocode</dt>
  <dd aria-labelledby="term-geocode">04-2200-20-4-21-01-0000</dd>
  <dt id="term-property-type">Property Type</dt>
  <dd aria-labelledby="term-property-type">VAC_U - Vacant Land - Urban</dd>
</dl>

Here is the code to query for the element:

page.get_by_role("definition", name="Acres") # finds nothing
page.locator("role=definition[name=Acres]") # finds nothing as well
page.get_by_label("Acres") # Does find the <dd> element
page.get_by_role("definition") # This does find elements with a role of definition

However a very similar situation with an <h2> and a <ul> does work:

<h2 id="properties-title">Properties</h2>
<ul aria-labelledby="properties-title">
<li><a href="">...some address...</a></li>
</ul>

page.get_by_role("list", name="Properties")
            .get_by_role("listitem")
            .get_by_role("link", name="...some address...", exact=True)

Expected

I would have expected that the get_by_role would have found the <dd> element by the associated label of Acres.

Actual

Nothing is found.

[yury-s]

Can reproduce with the following js code snippet:

  await page.setContent(`<dl class="grid grid-cols-2 gap-2">
  <dt id="term-acres" role="term">Acres</dt>
  <dd aria-labelledby="term-acres" role="definition">1.86</dd>
  <dt id="term-geocode">Geocode</dt>
  <dd aria-labelledby="term-geocode">04-2200-20-4-21-01-0000</dd>
  <dt id="term-property-type">Property Type</dt>
  <dd aria-labelledby="term-property-type">VAC_U - Vacant Land - Urban</dd>
</dl>`);
  await page.getByRole('definition', { name: 'Acres' }).click();

[michaeldmoser]

@yury-s Yes, the same issue was present with JS snippet you provided. I also tested with the HTML my app produces and the javascript failed to find the <dd> element there too. In addition the following worked:

await page.getByRole("definition").first().click();

So it would seem from the outside that the python and javascript versions are in parity for the issue.

[dgozman]

According to ARIA spec, definition role prohibits naming. Here is the list of such roles. Here is the definition role description that states Name From: prohibited.

That said, some browsers still compute the accessible name for definition. It is unclear what Playwright should do in this case.

[michaeldmoser]

That's interesting, I hadn't notice that the aria-labeledby was not allowed. And the standard, as you point out, is not very clear on how to define the name. It does make a strong association between a <dd> and <dt> element but agreed the name is not clearly defined.

One possibility, which would turn this into a feature request I suppose, is to allow lookups based on the aria-description and aria-describedby which are allowed for the definition role.

Thank you for looking into this.

[pavelfeldman]

Why was this issue closed?

Thank you for your contribution to our project. This issue has been closed due to its limited upvotes and recent activity, and insufficient feedback for us to effectively act upon. Our priority is to focus on bugs that reflect higher user engagement and have actionable feedback, to ensure our bug database stays manageable.

Should you feel this closure was in error, please create a new issue and reference this one. We're open to revisiting it given increased support or additional clarity. Your understanding and cooperation are greatly appreciated.