Utilizing Puppeteer to interact with dropdown menu options through selection and clicking

To log out, I am trying to use Puppeteer to select and click on a dropdown menu item.

This particular menu requires hovering over it with a mouse in order to reveal its options, as opposed to clicking directly.

When attempting to copy the selector for the dropdown menu area, I have two possible outcomes:

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

All of this is contained within a UL class with LI elements.

Below is the HTML code for the element that needs to be hovered over in order to activate the 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>
javascripthtmlcsspuppeteerbrowser-automation

Answer №1

To make your code work, simply use the function page.hover('some-selector') (check out a sample on the official page)

In this specific scenario:

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

You could utilize a complicated nested selector, but it's smarter to stick with something more likely to remain constant over time.

If you want to explore attribute selectors further, click here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the optimal method for saving and organizing data in SQL?

I currently have a MySQL table containing data that is displayed in an HTML table. Using JavaScript and drag & drop functionality, I am able to locally sort this table. My question is, what is the most effective method for saving these sorting changes? W ...

javascriptphpmysqlajaxsorting

An issue has arisen where Jasmine, when operating on Grunt, is unable to locate

It seems that the async functions (waits, waitsFor, runs) in Jasmine are not accessible when running it from Grunt. Grunt setup: jasmine:{ pivotal:{ src: 'src/**/*.js', options:{ specs: 'spec/**/*.spec.js&ap ...

javascriptgruntjs

Angular6 HttpClient: Unable to Inject Headers in Get Request for Chrome and IE11

Under my Angular 6 application, I am attempting to make a GET request while injecting some custom Headers: Here is how my service is structured: @Injectable() export class MyService { constructor(public httpClient: HttpClient) { } getUserInfos(login): Ob ...

javascriptangulartypescriptrxjsangular-cli-v6

Entering credit card information in a modal popup using Bootstrap form

I have implemented a bootstrap modal for my credit card payment form and now I want to validate the credit card information. Currently, I am using basic validation in jQuery. <script> $(function() { $('#error_message_reg').text(""); //$( " ...

javascriptphpjqueryajaxtwitter-bootstrap

Error encountered when attempting to convert a JSON object to a String using JSON.stringify(), due to a cyclic object value

I have a JSON object with the following structure: obj { name: "abc" , entriesList : "list of entry obj" , propertiesList : "list of properties obj" }; In this structure, an entry is also another object entry { info : "data obj" , ...

javascriptjqueryjson

What is the best way to ensure a grid element has a column designated for each of its children?

Imagine this HTML structure: /* Desired styling: */ .container { display: grid; grid-template-columns: 250px 250px 250px /* this is the part to automate */ grid-template-rows: 50px; } .child { width: 100%; height: 100%; background: ...

htmlcss

Is there a way to include a tag as an argument in a scss mixin?

Currently, I am working on a mixin that will target a specific child element within a parent. For instance, my goal is to target all <a> tags within a parent element that also has a parent of section---blue. I initially thought that passing the tag ...

csssassscss-mixins

What is the process for adjusting the checkbox border color in Material Design 15 and above?

Ever since the latest update to Angular Material 15, I've noticed some changes in how styling is applied to Angular Material components. Previously, in version 14, I used to be able to accomplish styling changes with code like this: ::ng-deep .mat-che ...

cssangular-material

PHP - The form page freezes up every time I try to submit the form

Hey there! I've encountered an issue with my form submission. Everything works perfectly fine, except when the Title field is left blank. Here's a snippet of my HTML code: Title: <input type="text" name="title"><br /> Description:&l ...

phphtmlforms

Restrict a class to contain only functions that have a defined signature

Within my application, I have various classes dedicated to generating XML strings. Each of these classes contains specific methods that take input arguments and produce a string output. In order to enforce this structure and prevent the addition of methods ...

javascripttypescript

Using PHP to dynamically pull and update webpage content directly from the database

Currently, I am utilizing PHP to upload information into a database and then using PHP again to display that data. In the code snippet provided below, PHP is used to exhibit all the content stored in the database. Each row within the database table will b ...

phphtmlmysql

Download the PDF instead of just viewing or downloading it through a link

I need help configuring a link so that when the user clicks "download here," a PDF file is automatically downloaded to their desktop. Can someone provide guidance on how to achieve this? ...

htmlcss

Should you make multiple API calls or just one?

Currently in the process of developing an application that combines NodeJS and VueJs. I have created an API endpoint that provides all the necessary data. For instance, it may include The top Football Team The bottom Football Team The team with the most ...

javascriptnode.jsvue.jsapi-design

Navigating with Angular Material and md-nav-bar for efficient routing

Currently, I am delving into Angular and have opted to utilize the Angular Material library for my initial application. After tweaking some basic code borrowed from this source, which I adjusted to suit my requirements, I encountered difficulties with rout ...

javascripthtmlcssangularjsangular-material

A step-by-step guide to loading a .php file via Ajax using JQuery when an item is selected from a dropdown

I have successfully populated a dropdown list using PHP from a database on the page named admin.php. Now, I am utilizing JQuery with Ajax functionality to display information when a surname is clicked from the dropdown menu. The goal is to call employerP ...

phpjavascriptjqueryajaxdrop-down-menu

Tips for reliably resizing slider images with varying widths

I am trying to scale '.slick-slide img' by height because the images vary in width. Scaling them by width would result in inconsistent proportions. However, when I apply a dimension to the height property for '.slick-slide img', the ima ...

htmlcss

Toggle the operational status of the bootstrap switch

Does anyone have a solution for customizing the appearance of the Bootstrap switch button when it is disabled? I have successfully styled it for the enabled state, but it defaults to a dark appearance when disabled. I would like the disabled state to have ...

cssinputfrontendswitch-statementbootstrap-5

Unexpected behavior with CSS background-image transitions effects

Currently, I am experimenting with a hover swipe effect using div and background image. The background image utilizes the outer div's max-width and an inner div with a padding-bottom percentage to maintain the aspect ratio. However, there are several ...

csscross-browser

What is the best method for adding files to JSZip from a remote URL?

Is it possible to load files into a Zip folder from a specified URL? For example: var zip = new JSZip(); zip.file("file.txt", "/site.net/files/file.txt"); Update I am following this example: I attempted the code provided but it was unsuccessful. I do ...

javascriptjqueryjszip

I am looking to identify when the focus event occurs on all HTML input elements on a page without using addEventListener or any HTML attributes

Does anyone know a way to detect the focus event on all HTML input elements on a page without using the addEventListener function or HTML attributes? I was successful in detecting click events with the following code: onclick = () => { // do somethi ...

javascripthtmlfrontenddom-events