Question

我有一个网页，当点击按钮时，网页中的下一部分会滚动。有人可以建议如何捕捉滚动？代码在锚标记中，而href指向＃以滚动到页面中的下一部分。我不知道如何验证滚动是否真的有效？

Answer 1

您可以通过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);
}

Answer 2

在这种情况下你可以断言/检查一些事情：

current URL指向正确的#部分：

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

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

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

检查current active element（假设有一个元素集中在＆＃34;锚点＆＃34;段落变为活动状态）

根据您的建议使用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);
    });
});

单击按钮捕获滚动

2 个答案: