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

Question

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 coming up short. Much obliged

Answer 1

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