单击元素句柄内的元素

【问题标题】：Clicking an element inside element handle单击元素句柄内的元素
【发布时间】：2021-09-12 08:26:02
【问题描述】：

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

考虑到对 foo 句柄的引用：

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

当前 foo 选择器被重复：

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

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

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

【问题讨论】：

标签： javascript puppeteer playwright

【解决方案1】：

在 Playwright 中，$ 和 $$ 方法也可以在 ElementHandle objects 上使用：

elementHandle.$(selector)

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

returns: <Promise<null|ElementHandle>>

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

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

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

【讨论】：