Capturing Scroll auf Knopfdruck

Question

Ich habe eine Webseite, wo Scroll passiert mit dem nächsten Abschnitt auf der Webseite auf einen Klick auf eine Schaltfläche. Kann jemand bitte vorschlagen, wie man diese Rolle festhält? Der Code befindet sich im Anker-Tag und href zeigt auf #, um zum nächsten Abschnitt auf der Seite zu blättern. Ich bin mir nicht sicher, wie man überprüft, ob scroll tatsächlich funktioniert hat.

Answer 1

Sie können behaupten/Check paar Dinge in diesem Fall:

• die current URL auf den richtigen # Abschnitt Punkt:

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

• check die scrollTop Position des body Element (unter der Annahme, es ist was gescrollt - oder der andere scrollbare Container):

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

• Kontrolle der current active element (vorausgesetzt, es ist ein Element, sobald die „Anker“ Absatz konzentrierte sich immer aktiv)

• Lösung basierend auf Ihren Vorschlag window.pageYOffset zu verwenden - vergleichen Sie den Wert vor und nach dem Klick:

  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

Sie könnten prüfen, ob der Anker am oberen Rand des Fensters auf das Bildfenster, indem Sie das positon relativ mit getBoundingClientRect() gescrollt wird:

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

Beachten Sie, dass der Anker nicht ganz oben im Fenster liegt, sondern sich irgendwo innerhalb des Fensters befindet, wenn sich der Anker ganz unten im Dokument befindet. für mich

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