How do I click this link using nightmare?

Question

Here is everything involving the link:

<a class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/148393/ma/hBwFmRXhVKI.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/148393/zo/hBwFmRXhVKI.jpg&quot;}" data-style-name="Black" data-style-id="19033" data-sold-out="false" data-description="null" href="/shop/bags/lkav6jh17/xfdbgpiea" data-no-tubolink="data-no-tubolink"><img width="32" height="32" src="//d17ol771963kd3.cloudfront.net/148393/sw/hBwFmRXhVKI.jpg" alt="Hbwfmrxhvki"></a>

I use nightmare with node coded in atom and would like to click on the black bookbag from the url: http://www.supremenewyork.com/shop/bags/lkav6jh17/p9ylgt8vm
using the "data-style-name="Black" found in the elements.

I've tried:

.click("data-style-name ='Black'")

which gave me the error:

Failed to execute 'querySelector' on 'Document': 'data-style-name ='Black'' is not a valid selector.

Not sure what to do to click but any help would be great. The link is an image and part of a list element on the webpage.

Answer 1

first grab the DOM node and assign to a variable then click on the node. Also you need to add brackets around the selector and don't need the inner single quotes unless there is a space or other invalid character in the value

var myLink = document.querySelector("[data-style-name=black]");
.click(myLink)

Answer 2

Also what I did was:

.click('a[data-style-name="Tan"]')

I specified it was an attribute and it worked.