Nightwatch.jsを使って同じクラスの2番目の要素をクリックしようとしています

Question

Nightwatch.jsを使ってブラウザ上の特定の要素をクリックする方法をたくさん試しています（nth-child、nth-タイプなど）、これまでのところ私は正しい要素を見つけることができません。私は画面上の2番目の "More"ボタンをクリックしようとしています。

HTMLは次のようになります。両方の「More」ボタンはまったく同じクラスを持ち、クラス内で重要な違いを持つdiv内に入れ子になっています。つまり、discover-teamsと呼ばれ、2番目のクラスはdivのクラスにネストされています-athletes。私はこのような何かをしようとすると、私は誰もがこれを行うための最善の方法を知っているならば、私はそれを大幅に感謝した画像

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

にフォローボタンの1つをクリック終わります。これまでのところ私は不足しています。多くの義務

Answer 1

私は第二ボタンの選択があるべきように、ページは「-選手.discover」2を持っていることを参照してください。

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

Answer 2

いずれかを試してください。

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

Answer 3

私が働いていた解決策を見出すことになりました。

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

ちょっと掘り続けておく必要があります（テストフレームワークを使用してhtmlで要素を検索しようとしています）。しかし、私は両方の提出した答えに感謝します。乾杯。