ボタンをクリックしてスクロールをキャプチャする

Question

ボタンをクリックするとウェブページ内の次のセクションにスクロールするウェブページがあります。誰かがスクロールをキャプチャする方法を提案してもらえますか？コードはアンカータグにあり、hrefは＃を指してページの次のセクションにスクロールします。スクロールが実際に動いたかどうかを検証する方法がわかりません。

Answer 1

あなたが主張することができます/は、この場合にはいくつかのことを確認してください。

expect(browser.getCurrentUrl()).toEqual("https://url.com/mypage#myparagraph"); 

checkbody要素のscrollTop位置（仮定：

• current URLが正しい#セクションを指すようにスクロールされたもの、または他のスクロール可能なコンテナ）：

  var body = $("body"); 
  expect(body.getCssValue("scrollTop")).toEqual("someValue"); // or apply the "greater than" check 
  

• window.pageYOffsetを使用するように提案をもとにcurrent active element（「アンカー」の段落が活発化されると焦点を当てた要素があると仮定した場合）

• ソリューションチェック - クリックする前と後の値を比較します

  browser.executeScript('return window.pageYOffset;').then(function (offsetBefore) { 
      offsetBefore = parseInt(offsetBefore); 
      button.click(); 
  
      browser.executeScript('return window.pageYOffset;').then(function (offsetAfter) { 
       offsetAfter = parseInt(offsetAfter); 
       expect(offsetAfter).toBeGreaterThan(offsetBefore); 
      }); 
  }); 
  

  を

Answer 2

あなたはアンカーがgetBoundingClientRect()でビューポートに位置決幅を相対的に確認することで、ウィンドウの一番上にスクロールされていることを確認することができます：

browser.get('https://www.w3.org/TR/webdriver'); 
$("[href='#capabilities']").click(); 

// assert that the position of the anchor relative to the top border of the window is less than 16 pixels. 
var anchor = $('#h-capabilities'); 
var isCloseToTop = browser.executeScript(e => !(e.getBoundingClientRect().top >> 4), anchor); 
expect(isCloseToTop).toBeTruthy(); 

アンカーがドキュメントの一番下にある場合、アンカーはウィンドウの上部になく、内部のどこかにあることに注意してください。 この場合も、より汎用的な解決策を検討する必要があります。

browser.get('https://www.w3.org/TR/webdriver'); 

$("[href='#informative-references']").click(); 
expect(isScrolledTop($('#h-informative-references'))).toBeTruthy(); 

function isScrolledTop(element) { 
    return browser.executeScript(function(elem) { 
    var doc = elem.ownerDocument, 
     viewHeight = doc.defaultView.innerHeight, 
     docBottom = doc.documentElement.getBoundingClientRect().bottom, 
     box = elem.getBoundingClientRect(); 
    return box.top > -1 && (box.top < 25 || (docBottom - viewHeight) < 25); 
    }, element); 
}