单击元素句柄内的元素

Question

如何单击现有句柄内的元素？

考虑到有对 foo 句柄的引用：

const fooHandle = await page.$('.foo');

当前 foo select或重复：

page.click('.foo .bar');

我想 select .bar 基于 fooHandle 参考而不是重复 .foo select 或者。在其他地方，获取带有嵌套元素的句柄涉及更复杂的检查，这些检查无法通过简单的 selector.

完成。

我正在使用 Playwright，但由于 API 相似性，我认为解决方案与 Puppeteer 相同。

Answer 1

在 Playwright 中，$ 和 $$ 方法也适用于 ElementHandle objects：

elementHandle.$(selector)

selector <string> - A selector to query for.

returns: <Promise<null|ElementHandle>>

The method finds an element matching the specified selector in the ElementHandle's subtree. [...] If no elements match the selector, returns null.

所以你的代码可以这样组织：

const fooHandle = await page.$('.foo');
const barHandle = await fooHandle.$('.bar');
await barHandle.click();

单击元素句柄内的元素

Clicking an element inside element handle

javascript

puppeteer

playwright