I'm trying to use Nightmare.js to automate some scraping of a webpage. I'm a sysadmin, I'm not very knowledgable with Node.js or CSS.
I've been able to get Nightmare to input and click on a few buttons to get me logged in - I found the selector by using Chrome dev tools, Inspect. Unfortunately, what Nightmare needs, or I think it needs, isn't paste-able? For example, the login username box I'm working with, this is what worked in Nightmare:
.insert('input#username.form-control', 'username')
In Chrome Dev Tools, in Elements, that's what hovers over the GUI element, and is the first line in "Properties", but if I "Copy selector", I get
#username
Copy Xpath:
//*[@id="username"]
Copy element:
<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 do I translate from any of those, to what Nightmare.js can use? I'm a bit out to sea.
Like I said, I got that one to work, by manually copying the first thing in "Properties", but why isn't that something I can copy from Chrome Dev Tools? Obviously, Chrome and Nightmare have different ideas of what a selector is and I don't even know how to begin to reconcile them. When I try searching for CSS Selector and Node.js, I find suggestions to use more stuff from Github like Cheerio.js (which I have not done), rather than shed any light on what I'm actually doing wrong.
Concrete example of what's not working: I have a button I can't click. Copy element:
<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'm trying different approaches based on what I'm finding here and on Google and not making headway. I'm clearly missing something.
Trying .click('button#Policy Tester') won't work, apparently because there's a space in it.
Trying .click('button[tabindex="0"]') gives "unable to find element by selector".
Trying .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') is also unable to find the element.
Thank you for the background but I believe your question can be condensed to asking what jQuery selector can be used to access <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>.
This will access the element $('button[class^="dpl-button_"]'). Downside here is that there's nothing unique about this class, which means all* elements that have this class will have your click event applied to them.
Note that this element contains multiple attributes, that means there are a number of options here. However, know that depending on which attribute you target there very well may be other elements in the DOM that have the same attribute so the key here is to find something unique. Most of the time we can apply an ID to an element, and as long as the ID is unique in the DOM you can simply use $('#YourUniqueId') to access that particular element and no others.
One thing to note about what you put in your post that is incorrect is that you attempted to access the element by using the elements text as the ID (e.g., .click('button#Policy Tester')). The elements text is not it's ID.
Here are a couple of links that will likely help those needing a solid reference on selectors:
Revised UPDATE
Researched Nightmare.js a bit, please tryclick('button.dpl-button___jGBcY') to find the element.