Can someone help me locate the selector for using .click in Nightmare.js?

I am currently using Nightmare.js to automate the scraping of a webpage. As a sysadmin, my understanding of Node.js and CSS is limited.

So far, I have been able to successfully use Nightmare to input and click on certain buttons in order to log in. I identified the selector by utilizing Chrome dev tools' Inspect feature. However, I noticed that what Nightmare requires for selection is not directly copy-paste-able. For example, when working with the login username box, this is the code that worked in Nightmare:

.insert('input#username.form-control', 'username')

In Chrome Dev Tools under Elements, this code appears as the first line in "Properties", but if I attempt to "Copy selector", I receive:

#username

Xpath Copy:

//*[@id="username"]

Element Copy:

<input class="form-control" type="text" cols="60" placeholder="Email (or username)" required="" name="username" id="username" value="" autocorrect="off" autocapitalize="off" autocomplete="off"  background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">

How can I translate these different formats into something usable by Nightmare.js? I feel a bit lost.

Although I managed to make it work by manually copying the property from "Properties", I wonder why I cannot directly copy it from Chrome Dev Tools. It seems like Chrome and Nightmare interpret selectors differently, and I am unsure how to bridge that gap. When looking up CSS Selector and Node.js information, I often come across suggestions to incorporate additional tools like Cheerio.js, rather than addressing the specific issue at hand.

An illustrative problem I am facing involves a button that I cannot click.

Element Copy:

<button tabindex="0" role="button" aria-disabled="false" class="dpl-button___jGBcY button-tertiary-colors button-font-size button-font-weight button-line-height button-text-transform font-family-primary button-pad button-shadow border-radius-button">Policy Tester</button>

I have experimented with various approaches based on research from here and Google, but I seem to be stuck. It is evident that I am overlooking something crucial.

Attempting .click('button#Policy Tester') fails, possibly due to the space within the identifier.

Trying .click('button[tabindex="0"]') results in "unable to find element by selector".

Similarly, 

.click('button.dpl-button___jGBcY.button-tertiary-colors.button-font-size.button-font-weight.button-line-height.button-text-transform.font-family-primary.button-pad.button-shadow.border-radius-button')
also does not locate the element.

cssnode.jsnightmare

Answer №1

Appreciate the background information provided, but it seems like your question can be simplified to asking about which jQuery selector can be used to target 

<button tabindex="0" role="button" aria-disabled="false" class="dpl-button___jGBcY button-tertiary-colors button-font-size button-font-weight button-line-height button-text-transform font-family-primary button-pad button-shadow border-radius-button">Policy Tester</button>
.

The appropriate selector for this element would be 

$('button[class^="dpl-button_"]')
. However, a limitation of this approach is that if there are multiple elements with the same class, the click event will apply to all of them.

There are various attributes within this element, offering different targeting options. It's crucial to aim for uniqueness when selecting an attribute, and assigning a unique ID to the element can simplify the process ($('#YourUniqueId')). Avoid using the element's text as an ID as it is not the correct method (e.g., .click('button#Policy Tester')).

For further guidance on selectors, consider checking out these resources:

Update:

After researching Nightmare.js, you may want to try using 

click('button.dpl-button___jGBcY')
to locate the desired element.

Answer №2

Obtaining the correct selector can be done in a variety of ways, such as using inspect elements and more.

Method 1

To get the proper selector, you can simply "copy selector" from the "inspect element" option. Most of the time, this method proves to be effective. Remember, you are copying the selector, not the element itself.

Method 2

If you're using Chrome, here's an easy way to do it:

  • First, install the SelectorGadget extension from Chrome Web Store
  • Next, navigate to the webpage you wish to scrape and open SelectorGadget
  • Select the element you need on the page
  • Voila! You now have your required element selector

https://i.stack.imgur.com/sXrTs.png

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

Issue with node module: critical error LNK1107 - file is invalid or corrupted and cannot be read at memory address 0x2BE03E

I recently set up Gatsby and began using the Casper Gatsby Starter Kit. After successfully running `npm install`, I encountered errors while trying to start a new project. Initially, I attributed it to my internet connection. Despite numerous attempts, I ...

node.jsnpmnode-gypgatsby

Maintain parental visibility with children when navigating to a different page

I am currently working on a vertical accordion menu that opens on hover, stays open, and closes when other items are hovered. The great assistance I received from @JDandChips has been instrumental in getting this feature up and running. Now, my main focus ...

javascriptjqueryhtmlcssjoomla2.5

Make sure to employ Bootstrap's justify-content-between and stack-to-horizontal col correctly

I am currently working on a responsive form that contains 1 label, 1 input field, and 5 buttons. Both the buttons and the input field are located under col-8. The positioning I aim for the buttons is as follows: They should start below and align with ...

htmlcssbootstrap-4responsive-designfrontend

There is no 'Access-Control-Allow-Origin' header on the resource you requested, so access from 'localhost ' is not permitted

I'm trying to retrieve JSON data by passing a URL, but I keep encountering an error that states: Failed to load https://sample-dec42.firebaseapp.com/one.json: Response to preflight request doesn't pass access control check: No 'Access-Contr ...

angularjsnode.jsexpressmean-stack

Navigating in express

Here is the structure I am working with: server.ts routes/ index.ts homeRoute.ts In server.ts: let app = Express(); app.use(router); In routes/index.ts: const routes = Router(); export default function router() { routes.use('/home' ...

node.jstypescriptexpress

Obtaining a value using the Node.js inquirer package

I'm currently working on a flashcard generator using the node.js inquirer package, but I'm struggling to capture the user's selection. When the user selects an option, I want to be able to log that choice, but right now it's just return ...

javascriptnode.jsnpm

The curious conduct of wild safari creatures

I have been using JavaScript to split my ePub chapter into pages by wrapping the code with new divs that represent separate pages. I have also created CSS styles for these new divs. Everything works perfectly when the file has a filename extension of &apos ...

javascripthtmlcssiossafari

Ways to implement border spacing using CSS

Here's a snippet of the code I've been working on: HTML: <html> <body> <div id="article"> <h1>TITLE</h1> <p>text</p> </div> </body> </html> CSS: #article { colo ...

htmlcss

Javascript on-page scroll positioning

My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header. Is there a way to adjust the scroll position b ...

javascripthtmlcssscrollanchor

What is the correct CSS2 selector syntax to apply the :hover effect to the nth child of a specific element?

My goal is to apply a unique background color to each menu li element when hovered over, and I want to accomplish this using CSS2. <ul> <li> <li> <li> <li> </ul> I managed to add a background color to t ...

csscss-selectors

Error: User cannot be used as a constructor

When attempting to register a user using a Node.js app and MongoDB, I encountered the following error message: const utente = new Utente({ ||||| TypeError: Utente is not a constructor This is my model file, utente.js: const mongoose = require("mongoose") ...

javascriptnode.jsmongodbexpress

The jQuery CSS menu is having trouble highlighting the active link

Can you help me figure out what's wrong with this code and how I can fix it? I'm working on a CSS menu (horizontal) where I want the background and font to change when an item is selected. I found some jQuery code from another post that should m ...

jquerycssmenuhtml-lists

Using the connect-flash package to display a flash message on the website

Currently working on learning expressjs and mongodb through various exercises. I am attempting to display flash messages whenever a new item is added, updated, or deleted from the database. Struggling with getting it to work as expected without any errors ...

node.jsexpressnpmconnect-flash

Are there any user interface frameworks available that can replicate the aesthetic of a Mac application?

I've been searching high and low but I haven't come across any answers yet. It caught my attention that the wunderlist mac app was developed using HTML/CSS/JS, but I'm curious if they incorporated a pre-existing UI JavaScript framework into ...

javascripthtmlcssuser-interfacedesktop

Looking to seamlessly integrate a CommonJS library into your ES Module project while maintaining TypeScript compatibility?

I am interested in creating a project with Typescript. The project is built on top of the Typescript compiler, so I am utilizing Typescript as a library, which I believe is a CommonJS library. Although the project is designed to run on Node (not in the bro ...

node.jstypescriptes6-modulescommonjs

Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

I am currently working with the latest version of mat-select, version 16. I have a requirement where, when a specific option is selected and the select drop-down is clicked again, that selected option should not appear in the options list. Below is the HTM ...

htmlcssangularmat-select

Instructions for transferring an Angular / Node.js application to a different computer

Hey there! I'm in the process of transferring my project to a new computer. Just to let you know, I've already set up node.js and mongoDB on the new machine. When it comes to the Angular app, I understand that I need to copy over the frontEnd d ...

node.jsangularcopy

The collaboration of Node.js and React.js on a single server

Separate ports are used for Node and React, but API requests from the React app can be proxied to the Node URL. I have opted not to implement server-side rendering for React in order to serve the React app. Instead, I build the React app each time there i ...

javascriptnode.jsreactjs

Can you point me in the direction of the node_modules folder?

After creating a new AWS instance running ubuntu 16.04 LTS and setting up a directory called NodeT, I executed the following two commands: curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs (source: https://node ...

node.jsmongodb

Nodejs daemon fails to start in CentOS due to issues with the Upstart script causing crashes

I have a configuration file named .conf located in the /etc/init/ directory of my CentOS server: #!upstart description "shortnr server for fmc.io" author "Felix Milea-Ciobanu" start on startup stop on shutdown respawn respawn limit 10 30 script ...

node.jscentosdaemonupstart