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.

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')

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

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.

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')

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

• javascript
• css-selectors
• nightwatch.js

3 Answers 3

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);
                          });              
                  }

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');

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