单击按钮捕获滚动

Question

我有一个网页，点击按钮会滚动到网页中的下一部分。有人可以建议如何捕获该卷轴吗？代码在锚标记中，href 指向 # 以滚动到页面中的下一部分。我不确定如何验证滚动是否真的有效？

Answer 1

在这种情况下，您可以 assert/check 几件事：

current URL 指向正确的 # 部分：

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

check the scrollTop body 元素的位置（假设它是滚动的 - 或者其他可滚动容器）：

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

检查 current active element（假设在 "anchor" 段落激活后有一个元素被聚焦）

解决方案根据您的建议使用window.pageYOffset - 比较点击前后的值：

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() 检查相对于视口的位置来检查锚点是否在 window 的顶部滚动：

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

请注意，如果锚点位于文档的最底部，则锚点不会位于 window 的顶部，而是位于其中的某个位置。所以你也应该用更通用的解决方案来考虑这种情况：

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

单击按钮捕获滚动

Capturing scroll on click of a button

javascript

testing

end-to-end

protractor