How to get an array of elements (buttons) based on aria-label in Playwright with locator.evaluateAll()?

user_8072178 0
Viewed 145

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!

playwright css-selectors javascript
1 Answers

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())
;
user_62433520
Related