量角器:测试窗口滚动行为

时间:2016-04-14 22:03:56

标签: angularjs unit-testing protractor

我需要测试窗口是否滚动如果overflow:hidden应用于body标签。

不幸的是,即使应用overflow:hidden,scrollTo和任何jQuery等效实际上都会滚动(或设置位置)窗口。

WebDriverJS / Protractor缺少“Window()。scroll”方法。

我的代码有没有办法测试这个?

我发现奇怪的另一件事是window()。getPosition()似乎没有拉同一个浏览器窗口,因为在下面的测试中如果你尝试使用Protractor的getPosition,窗口位置仍然是0,0尽管你已经在浏览器中执行了脚本。

与这两个问题相关:

量角器代码

假设mywebpage下面可以滚动但有溢出:隐藏集

describe('My webpage', function() {
    beforeEach(function() {
        browser.get('https://127.0.0.1/mywebpage');
        browser.driver.manage().window().setSize(1400,800);                  
        browser.driver.manage().window().setPosition(0,0);
    });
  
    it('Scrolling y is disabled', function() {
        var scrollFunction = function() { 
            window.scrollTo(0,55);
        };
        var getOffsetTop = function() { 
            return document.body.scrollTop; 
        };
        browser.executeScript(scrollFunction).then(function (yes) {
            browser.executeScript(getOffsetTop).then(function (newposition) {
                expect(newposition).toBe(0);
            });
        });
    
    });

    it('Scrolling y is disabled looking at Protractor Window', function() {
      var scrollFunction = function() { 
          window.scrollTo(0,55);
      };
      var getOffsetTop = function() { 
          return document.body.scrollTop; 
      };
      browser.executeScript(scrollFunction).then(function (yes) {
          browser.driver.manage().window().getPosition().then(function (newposition) {
              expect(newposition.getY()).toBe(0); // This is falsely true, if your scrolling y is enabled, this still remains position 0 
          });
      });

    });

  });

1 个答案:

答案 0 :(得分:0)

这可能不是你要求的,但是,我们在类似案例中所做的是引入一个可重复使用的自定义茉莉花匹配器检查一个元素是否有滚动

toHaveScroll: function() {
    return {
        compare: function(elm) {
            return {
                pass: protractor.promise.all([
                    elm.getSize(),
                    elm.getAttribute("scrollHeight")
                ]).then(helpers.spread(function (size, scrollHeight) {
                    return scrollHeight >= size.height;
                }))
            };
        }
    };
},

用法:

expect(elm).toHaveScroll();