admin 管理员组

文章数量: 1086019

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!

  • javascript
  • css-selectors
  • playwright
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 0
Add a ment  | 

2 Answers 2

Reset to default 3

I 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
);

本文标签：

Error[2]: Invalid argument supplied for foreach(), File: /www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm, Line: 58
File: /www/wwwroot/roclinux.cn/tmp/route_read.php, Line: 205, include(/www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm)
File: /www/wwwroot/roclinux.cn/tmp/index.inc.php, Line: 129, include(/www/wwwroot/roclinux.cn/tmp/route_read.php)
File: /www/wwwroot/roclinux.cn/index.php, Line: 29, include(/www/wwwroot/roclinux.cn/tmp/index.inc.php)

版权声明：本文标题：javascript - How to get an array of elements (buttons) based on aria-label in Playwright with locator.evaluateAll()? - Stack Ove 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1743991461a2514804.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。