尝试使用 Nightwatch.js 单击具有相同类的第二个元素答案

【问题标题】：Trying to click on the 2nd element with the same class using Nightwatch.js尝试使用 Nightwatch.js 单击具有相同类的第二个元素
【发布时间】：2019-03-15 00:01:45
【问题描述】：

我一直在尝试很多不同的方法来使用 Nightwatch.js（nth-child、nth-of-type 等）在浏览器上单击特定元素，但到目前为止我无法找到正确的元素。我正在尝试单击屏幕上的第二个“更多”按钮。

HTML 看起来像这样。两个“更多”按钮都具有完全相同的类，并且嵌套在类中具有关键区别的 div 中，其中一个称为发现团队，第二个嵌套在具有发现类的 div 中-运动员。如果我尝试这样的事情，我最终会点击图片上的以下按钮之一

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

如果有人知道执行此操作的最佳方法，我将不胜感激。到目前为止，我还不够。非常感谢

【问题讨论】：

标签： javascript css-selectors nightwatch.js

【解决方案1】：

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

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

您需要符号“>”来使选择器更准确。

编辑：只有 1 个“.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);
                          });              
                  }

【讨论】：

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

【解决方案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');

【讨论】：

【解决方案3】：

我最终找到了一个行之有效的解决方案。

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

只需要继续挖掘（这是我第一次尝试使用测试框架在 html 中搜索元素）。但我很欣赏你们提交的答案。干杯

【讨论】：

你知道这是否适用于 Nightwatch 页面对象吗？
我不能肯定。自从我从为其构建测试套件的公司被解雇以来，我已经有几个月没有使用 Nightwatch 了。最终归结为元素在 DOM 中的位置，并具体指向它