使用Nightwatch.js尝试点击具有相同类名的第二个元素

Question

我一直在尝试使用Nightwatch.js的各种不同方式（如nth-child，nth-of-type等）点击浏览器上的特定元素，到目前为止我还没有找到正确的元素。我正在尝试点击屏幕上第二个“更多”按钮。

HTML代码如下。两个“More”按钮具有完全相同的类，并嵌套在一个div中，该div具有不同的类别，其中一个称为discover-teams，第二个嵌套在一个具有discover-athletes类的div中。如果我尝试像这样做，最终会点击图像上的关注按钮。

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

如果有人知道最好的方法，请告诉我，我会非常感激。到目前为止，我没有找到合适的方法。非常感谢。

- Andy Pohl

Answer 1

我看到页面上有两个“.discover-athletes”，因此第二个按钮的选择器应该是：

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

你需要使用符号">"使选择器更加准确。

编辑：只有一个“.discover-athletes”，但这没有什么区别。

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

- Bao Tran

---

我只看到一个“.discover-athletes”。还有一个“.discover-teams”，但每个只有一个。 - Andy Pohl

Answer 2

试试其中任何一个。

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

或者

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

或者

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

- Ashish-BeJovial

Answer 3

我最终找到了一个可行的解决方案。

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

我只是需要继续深入挖掘一下（这是我第一次尝试使用测试框架在HTML中搜索元素）。但我很感激你们两个提交的答案。干杯！

- Andy Pohl

---

你知道这个在Nightwatch页面对象中是否能正常工作吗？ - user1418084

我不能确定。几个月以来，我一直没有使用Nightwatch，因为我被雇佣的公司解雇了，而我正在为测试套件进行构建。归根结底，这取决于DOM中元素的位置，特别是指向它。 - Andy Pohl