CODEWITHSUNDEEP
javascripthtmlcsspuppeteerbrowser-automation
user1768079
user1768079

Reputation: 713

Selecting and clicking dropdown menu items with puppeteer

I need to select and then click a dropdown menu item with puppeteer to log out.

The menu requires a mouse be hovered over it to drop down rather than click.

When I choose to copy selector for dropdown menu area I get one of two things.

#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

or 

#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

the selector for logout button is:

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

the whole thing is stored in a UL class with LI elements

Here is the HTML for the element you need to hover over to initiate dropdown. 

<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>

Upvotes: 3

Views: 3264

Answers (1)

Michal
Michal

Reputation: 5218

All you need to do is call page.hover('some-selector') (official example is here)

So in your case:

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

You can use the crazy nested selector but I would rather go for something that will most likely not change in the near future.

You can read more about attribute selectors here.

Upvotes: 3

Related Questions