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

Less-middleware in Node.js not automatically compiling files

I've incorporated the less-middleware into my Node.js Express app, but I'm encountering an issue. Whenever I update my screen.less file, it doesn't recompile automatically. To trigger a recompilation, I have to delete the generated .css file ...

javascriptnode.jsexpressless

CSS styling not functioning properly

After spending a considerable amount of time on this issue... <div id="pager" style="top: 5px; position: relative; " class="pager" > <form> <img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first" ...

htmlcsstablesorter

The body can only stretch up to a certain percentage of its width, not a full 100%

Recently, I've been encountering an issue with my webpage where the body does not stretch 100% the width of the screen. I've tried numerous CSS rules to fix it, but nothing seems to be working. When you view the page in a browser, it appears to c ...

htmlcssstretch

Ways to add gaps between flexbox items within a single row?

I have a coding dilemma where I am trying to display two items in the same row with a 12px gap between them, but my current method is not working as desired. I want there to be space between the A's and B's without resorting to traditional techni ...

htmlcssflexbox

Exploring how process.argv in NodeJS can be utilized within JavaScript code compiled by

I'm having trouble compiling a basic TypeScript file using webpack (with 'awesome-typescript-loader') that needs to access command line arguments. It seems like the compiled JavaScript is causing a problem by overriding the Node 'proce ...

javascriptnode.jstypescriptnpmwebpack

Display only a loading image with a see-through background after submitting the page

After submitting the page, I would like to display a loading image in the middle of the page with a transparent background. The current styling code I have used is as follows: #loading { position: fixed; top: 50%; left: 50%; z-index: 1104; ...

javascripthtmlcsscss-position

Is it possible for a cipher to transform the same message into multiple unique strings?

During registration, I encrypt the password before storing it in the database. However, when a user tries to login, even after encrypting the password again and comparing it with the one stored in the database using SELECT * FROM table where uname=Username ...

node.jsencryption

Designing Buttons and Titles for the Login Page

I'm currently working on developing a straightforward login page in react native and I've encountered some difficulties with styling. Does anyone have tips on how to center the text on the button? Also, is there a way to move the INSTARIDE text ...

javascriptcssreactjsreact-native

How can I search for a particular string in JavaScript?

I have a unique custom div that has been modified to function as an input element. Inside this custom div input element, there is a <p> tag with a default placeholder text. My goal is to verify whether the content of this div is empty or contains new ...

javascriptjqueryhtmlcss

Tips for executing a Mongoose Find operation within a Foreach loop in a synchronous manner

I have a scenario where I need to query a collection called "Case" and then match the records with another collection named "CustomerAgreement". However, when using a forEach loop and calling the second query inside it, the problem arises as the queries ru ...

node.jsasynchronousmongooseforeach

Is there a way to display a vertical list in a horizontal orientation?

I am in the process of creating my portfolio on Cargo Collective and have customized one of their pre-made themes to suit my preferences. The only thing I'm currently struggling with is how to change a set of vertical links to display horizontally ins ...

htmlcsslistheaderalignment

Can you guide me on implementing an onclick event using HTML, CSS, and JavaScript?

I am looking for a way to change the CSS codes of the blog1popup class when the image is clicked. I already know how to do this using hover, but I need help making it happen on click instead. The element I want to use as the button; <div class=&quo ...

javascripthtmljquerycss

Exploring the power of TypeScript for authenticating sessions with NextJS

Utilizing next-auth's getSession function in API routes looks something like this for me: const mySession = await getSession({ req }); I have confirmed that the type of the mySession is outlined as follows: type SessionType = { user: { email: s ...

javascriptnode.jstypescriptnext.jsnext-auth

Different columns in sqlite3 that are distinct

I'm currently developing a web application centered around restaurant menus. For the backend, I am utilizing node and the database system sqlite3. Within my 'items' table, there is a field named barcode that is already unique. However, users ...

node.jssqlite

The issue of "undefined is not a function" is arising when trying to use the session in NHibernate with a mongo store

In my MongoDB database, I have a collection named 'Sessions' within the 'SessionStore' to store session state. To manage sessions, I am using express-session. Below is the code snippet used to set up sessions: var session = requi ...

javascriptnode.jsexpress-sessionconnect-mongo

Using Jquery's prependTo method will add a display:block property to

Can't find a solution to this issue. This is the code snippet in question: var new_img = '<img id="' + drag_id + '" rel="' + drop_id + '" class="' + gallery_link + ' drop_out" src="' + drag_src + '" /& ...

jquerycssprepend

Local variables in Node modules do not retain their values between different calls or invocations

I'm facing a puzzling issue. I would expect that the local variables in a node module should persist within the module, but it seems like they are not. Here is my node module: var Mailgun = require("mailgun-js"); var api_key, domain; exports.config ...

node.jsmodule

Text-color in the v-tooltip

Is there a way to change the text color of v-tooltips components without affecting the tooltip background color? I attempted to inspect the element, but the tooltip only appears on hover, making it impossible to inspect. Below is the code snippet: < ...

cssvue.jsvuejs2vuetify.jsv-tooltip

Image in the background not showing up on Chrome or Internet Explorer

The issue I'm facing is that the background-image displays correctly in Firefox, but not in Chrome or IE. Despite trying various solutions found on Stackoverflow, such as disabling my ad-blocker, placing the code in the head of the file: <head> ...

cssasp.netgoogle-chromeinternet-explorerfirefox

Stop and start an Express.js server using the original port number

Currently, my Node.js application utilizes Express.js to handle incoming connections. The code snippet looks something like this: const express = require("express"); var server = express(); server.get("/test", (req, res) => testResponse(req, res)); ser ...

javascriptnode.jsexpress