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

Question

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

考虑到对 foo 句柄的引用：

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

目前 foo 选择器被重复：

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

我想.bar根据fooHandle参考进行选择，而不是重复.foo选择器。在其他地方，使用嵌套元素获取句柄涉及更复杂的检查，而简单的选择器则无法完成。

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

标签： javascriptpuppeteerplaywright

Answer 1

在 Playwright中$，ElementHandle 对象$$也可以使用方法：

elementHandle.$(selector)

selector <string>- 要查询的选择器。

returns: <Promise<null|ElementHandle>>

该方法在 ElementHandle 的子树中查找与指定选择器匹配的元素。[...] 如果没有元素匹配选择器，则返回 null。

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

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