[Bug]: `level` option for `getByRole('listitem')` always returns 0 elements

[luchsamapparat]

Version

1.47.2

Steps to reproduce

1. Clone my repo at https://github.com/luchsamapparat/listitem-level-reproduction
2. npm install
3. npm run test
4. see results:

    Expected: 2
    Received: 0

    >  8 |   expect(await page.getByRole('listitem', { level: 1 }).count()).toBe(2);

Expected behavior

Given this HTML...

        <li>
            First Top-Level List Item

            <div>
                <ul>
                    <li>Second-Level List Item</li>
                </ul>
            </div>
        </li>
        <li>
            Second Top-Level List Item
        </li>
    </ul>

... getByRole('listitem', { level: 1 }) should return the two top-level listitem elements.

Actual behavior

It returns 0 elements on all three browsers.

Additional context

Chrome DevTools provide correct values for the level property:

Environment

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1355U
    Memory: 13.00 GB / 31.64 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.5.0 - C:\Program Files\nodejs\pnpm.CMD
  IDEs:
    VSCode: 1.93.1 - C:\Users\luchsmar\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  Languages:
    Bash: 5.1.16 - C:\WINDOWS\system32\bash.EXE
  npmPackages:
    @playwright/test: ^1.47.2 => 1.47.2

[yury-s]

The link probably points to a private repo, so I can't access. But I reproduce it with the following test:

import { expect, test } from '@playwright/test';

test('level', async ({ page }) => {
  await page.setContent(`
    <ul>
        <li>
            First Top-Level List Item

            <div>
                <ul>
                    <li>Second-Level List Item</li>
                </ul>
            </div>
        </li>
        <li>
            Second Top-Level List Item
        </li>
    </ul>`);
    expect(await page.getByRole('listitem', { level: 1 }).count()).toBe(2);
});

[luchsamapparat]

Oh, sorry, it‘s public now. But yes, it‘s identical to your reproduction

[dgozman]

I looked over the ARIA specs and it seems like listitem role does not expose levels anymore. Here are a few links:

• listitem role does not list aria-level, that was removed by this change to the spec, see this issue.
• li element mapping to ARIA does not list level either.
• aria-level attribute explicitly lists comment, heading, row and treeitem. It allows user agents to calculate levels for DOM elements, but I can't find anything related to lis.