javascript - 单击元素句柄内的元素

Question

如何单击现有句柄内的元素？
考虑到有一个对 foo 句柄的引用:

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

当前 foo 选择器重复:

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

我想选择 .bar基于 fooHandle引用而不是重复 .foo选择器。在其他地方，使用嵌套元素获取句柄涉及更复杂的检查，而简单的选择器无法完成这些检查。
我正在使用 Playwright，但由于 API 相似性，我认为该解决方案与 Puppeteer 相同。

Answer 1

在剧作家中，$和 $$方法可在 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();