CODEWITHSUNDEEP
javascriptcss-selectorsnightwatch.js
Andy Pohl
Andy Pohl

Reputation: 253

Trying to click on the 2nd element with the same class using Nightwatch.js

I have been trying out a lot of different ways to click on a particular element on the browser using Nightwatch.js (nth-child, nth-of-type, etc), and so far I am not able to find the correct element. I am trying to click on the 2nd "More" button on the screen.

enter image description here

The HTML looks like this. Both of the "More" buttons have the exact same class, and are nested within a div that has a key difference in the class, in that one is called discover-teams and the second is nested within a div that has a class of discover-athletes. If I try something like this, I end up clicking on one of the follow buttons on the image

.click('.discover-athletes div:nth-child(3) button')

enter image description here

If anyone knows of the best way to do this I would greatly appreciate it. So far I am coming up short. Much obliged

Upvotes: 6

Views: 9364

Answers (3)

Andy Pohl
Andy Pohl

Reputation: 253

I ended up finding a solution that worked. 

.click('.discover-athletes .discover-card-load-more')

Just needed to keep digging a bit (this is my first time trying to search for elements in html using a testing framework). But I appreciate the answer you both submitted. Cheers

Upvotes: 0

Ashish-BeJovial
Ashish-BeJovial

Reputation: 1867

Try any one of them.

browser.click('.discover-athletes.discover-card div:nth-child(3) button');

OR

browser.click('.discover-athletes.discover-card div:discover-card-load-more.discover-card-footer button');

OR

browser.click('.discover-athletes.discover-card div:discover-card-load-more button');

Upvotes: 0

Bao Tran
Bao Tran

Reputation: 626

I see that the page has two ".discover-athletes" so the selector for 2nd button should be :

'test' : function(browser){
       const 2ndSelector = 'div[class="discover-athletes"]:nth-child(2) > div:nth-child(3) > button';
       browser.click(2ndSelector);
          }

You need symbol ">" to make selector more accurate.

Edit:there is only 1 ".discover-athletes",but it make no difference.

        'test' : function(browser){
           const 2ndSelector = 'div[class="discover-athletes"] > div:nth-child(3) > button';
           browser.waitForElementVisible(2ndSelector,5000,false,function(result){
                 browser.click(2ndSelector);
                          });              
                  }

Upvotes: 1

Related Questions