[BUG]: Unable to Locate the <summary /> Element by Its Implicit button Role #26354
Closed
Description
System info
- Playwright Version:
@playwright/test@1.36.2, - Operating System: MacOS 12.6
- Browser: Chromium
Source code
- I provided exact source code that allows reproducing the issue locally.
Config File
// playwright.config.ts
import { defineConfig, devices } from '@playwright/test'
export default defineConfig({
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
],
})Test File
test.describe('Accessible Elements', () => {
test('Finding `summary` Button', async ({ page }) => {
await page.goto('PATH_TO_HTML_FILE_BELOW')
const list = page.getByRole('list', { name: /my-list/i })
expect(await list.count()).toBe(1)
const button = page.getByRole('button', { name: /expander/i })
expect(await button.count()).toBe(1)
const summary = page.getByRole('button', { name: /summary/i })
expect(await summary.count()).toBe(1) // Fails Here
})
})Test Page
<!-- Basic Markup for Reproducing Bug -->
<!DOCTYPE html>
<html>
<head>
<title>This is a raw HTML File</title>
</head>
<body>
<ul aria-label="my-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button>
<h1>My Element <span>Expander</span></h1>
</button>
<details>
<summary>Summary</summary>
Some Details
</details>
</body>
</html>Steps
- Create a details element in any browser environemnt
- Look for the summary element via the
buttonrole. - Discover that the
summaryelement is not discoverable. 😭
These steps are executed in the test file above.
Expected Behavior
According to the summary element specifications, the element should be discoverable under the button role.
Actual
Locator.getByRole() is not able to find summary elements by the button role.
Activity