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'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!
Share Improve this question edited Jul 24, 2022 at 4:00 ggorlen 57.9k8 gold badges114 silver badges157 bronze badges asked Jul 22, 2022 at 21:39 naemtlnaemtl 1131 gold badge1 silver badge11 bronze badges 02 Answers
Reset to default 3I think you're looking for ma-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();
const page = await browser.newPage();
await page.setContent(html);
const sel = "button[aria-label='Sign'], button[aria-label='Initial']";
const btns = page.locator(sel);
console.log(await btns.allTextContents()); // => [ 'foo', 'bar', 'baz' ]
})()
.catch(err => console.error(err))
.finally(() => browser?.close());
I see multiple issues in your approach:
1). The syntax (button) => ... suggests you're expecting a single button, but evaluateAll() provides an array of buttons.
2). The expression `${button}[aria-label='Sign']` is syntactically incorrect. This attempts to convert the button to a string and then concatenate with a selector, which doesn't make sense in this context.
3). The || operator is not filtering buttons, but instead trying to return a string.
Here is how I would do it using evaluateAll:
const elements = this.page.locator('button');
const allSigButtons = await elements.evaluateAll((buttons) =>
buttons.filter(button =>
button.getAttribute('aria-label') === 'Sign' ||
button.getAttribute('aria-label') === 'Initial')
);
Alternative approach using filter and map
const allSigButtons = await this.page.locator('button').evaluateAll((buttons) =>
buttons
.filter(button =>
['Sign', 'Initial'].includes(button.getAttribute('aria-label'))
)
.map(button => button.outerHTML) // Optional: get button details
);