使用 puppeteer 选择并单击下拉菜单项

Question

我需要选择然后单击带有 puppeteer 的下拉菜单项以注销。

该菜单需要将鼠标悬停在其上才能下拉而不是单击。

当我选择复制下拉菜单区域的选择器时，我会得到两件事之一。

#ds-desktop-nav-main > div > div > ul.ds-nav-toolbar > li.ds-btn-group.ds-dropdown-group.ds-my-xxx-dropdown.show-logged-in > a > span

或

#ds-desktop-nav-main > div > div > ul.ds-nav-toolbar > li.ds-btn-group.ds-dropdown-group.ds-my-xxx-dropdown.show-logged-in > a

注销按钮的选择器是：

<a href="/users/sign_out" class="ga-tracking" data-ga-action="user" data-ga-category="main_nav" data-ga-label="LOGOUT">Logout</a>

整个东西都存储在一个带有 LI 元素的 UL 类中

这是您需要将鼠标悬停在上面以启动下拉菜单的元素的 HTML。

<a href="/users/current" class="ga-tracking" data-ga-category="main_nav" data-ga-action="user" data-ga-label="PROFILE"><span class="user-icon"></span></a>

Answer 1

您只需拨打page.hover('some-selector')（官方示例为here）

所以在你的情况下：

page.hover('a[href="/users/sign_out"]')

你可以使用疯狂的嵌套选择器，但我宁愿选择在不久的将来很可能不会改变的东西。

您可以阅读有关属性选择器的更多信息here。