I'm trying to get an array of dom elements from one of two aria-label values. I'm trying to do this with the locator.evaluateAll method.
Currently, this is as far as I've gotten; I'm trying to grab all buttons in my DOM, and create an array out of those that possess a specific aria-label attribute:
const elements = this.page.locator('button');
const allSigButtons = await elements.evaluateAll(
(button) =>
`${button}[aria-label='Sign']` || `${button}[aria-label='Initial']`
);
When I print my allSigButtons array to the console, I get:
[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement][aria-label='Sign']
Clearly I'm doing something wrong!
I think you're looking for comma-delimited CSS selectors (logical OR):
const playwright = require("playwright");
const html = `
<body>
<button aria-label="Sign">foo</button>
<button aria-label="Signy">NO</button>
<button aria-label="Initial">bar</button>
<button aria-label="Initial">baz</button>
<button aria-label="Initia">NOT ME</button>
</body>
`;
let browser;
(async () => {
browser = await playwright.chromium.launch({headless: true});
const page = await browser.newPage();
await page.setContent(html);
const sel = "button[aria-label='Sign'], button[aria-label='Initial']";
const btns = await page.locator(sel);
console.log(await btns.allTextContents()); // => [ 'foo', 'bar', 'baz' ]
})()
.catch(err => console.error(err))
.finally(() => browser?.close())
;