feat(aria): handle array in the injectedScript and write a test

This commit includes the handling accessible.name.array

References #32593
This commit is contained in:
anait-airiian 2024-10-24 18:41:46 +02:00
parent 459914c5cc
commit 7456dea563
2 changed files with 29 additions and 0 deletions

View file

@ -1324,6 +1324,8 @@ export class InjectedScript {
received = elements.map(e => options.useInnerText ? (e as HTMLElement).innerText : elementText(new Map(), e).full); received = elements.map(e => options.useInnerText ? (e as HTMLElement).innerText : elementText(new Map(), e).full);
else if (expression === 'to.have.class.array') else if (expression === 'to.have.class.array')
received = elements.map(e => e.classList.toString()); received = elements.map(e => e.classList.toString());
else if (expression === 'to.have.accessible.name.array')
received = elements.map(e => getElementAccessibleName(e, false));
if (received && options.expectedText) { if (received && options.expectedText) {
// "To match an array" is "to contain an array" + "equal length" // "To match an array" is "to contain an array" + "equal length"

View file

@ -433,6 +433,33 @@ test('toHaveAccessibleName', async ({ page }) => {
await expect(page.locator('div')).toHaveAccessibleName(/hello/, { ignoreCase: true }); await expect(page.locator('div')).toHaveAccessibleName(/hello/, { ignoreCase: true });
}); });
test('toHaveAccessibleName should accept array of names for multiple elements', async ({ page }) => {
await page.setContent(`
<table>
<tr role="row">
<td role="cell">Cell A1</td>
<td role="cell">Cell B1</td>
<td role="cell">Cell C1</td>
</tr>
<tr role="row">
<td role="cell">Cell A2</td>
<td role="cell">Cell B2</td>
<td role="cell">Cell C2</td>
</tr>
<tr role="row">
<td role="cell">Cell A3</td>
<td role="cell">Cell B3</td>
<td role="cell">Cell C3</td>
</tr>
</table>
`);
await expect(page.getByRole('row')).toHaveAccessibleName([
'Cell A1 Cell B1 Cell C1',
'Cell A2 Cell B2 Cell C2',
'Cell A3 Cell B3 Cell C3',
]);
});
test('toHaveAccessibleDescription', async ({ page }) => { test('toHaveAccessibleDescription', async ({ page }) => {
await page.setContent(` await page.setContent(`
<div role="button" aria-description="Hello"></div> <div role="button" aria-description="Hello"></div>