使用 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') （官方示例在這里）

所以在你的情況下：

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

你可以使用瘋狂的嵌套選擇器，但我寧願選擇在不久的將來很可能不會改變的東西。

您可以在此處閱讀有關屬性選擇器的更多信息。