量角器不滚动到测试元素答案

【问题标题】：Protractor not scrolling to test element量角器不滚动到测试元素
【发布时间】：2014-10-15 16:28:32
【问题描述】：

尝试为 ionic 编写一些量角器测试，实现选择器 element( by.css('.selector')); 不再滚动到元素。当它在浏览器中不可见时，会自动通过测试。

我花了一段时间才弄明白。使用ptor.sleep(2000) 在browser.get('domain'); 之后延迟页面，然后如果我滚动浏览正在测试元素的部分，它们就会通过（如预期的那样）。

我相信这与 ionic 接管滚动事件有关。

以前有没有人遇到过这种情况或对所有元素都有某种 scrollTo 实现？

样品测试

"use strict";

/* Tests */

var ptor = protractor.getInstance();

describe( "Register page", function ()
{
    browser.get( "#/register" );

    ptor.sleep(2000);

    it( "Check SMS Preference", function ()
    {

        var smsLabelConfirm = element( by.css( ".sms-confirm" ) ),
            smsLabelDeny = element( by.css( ".sms-deny" ) ),
            smsInputConfirm = element ( by.id( "sms-confirm" ) ),
            smsInputDeny = element ( by.id( "sms-deny" ) );

            smsLabelConfirm.click();
            expect( smsInputConfirm.getAttribute( "checked" ) ).toBe( "true" );
            expect( smsInputDeny.getAttribute( "checked" ) ).toBe( null );

            smsLabelDeny.click();
            expect( smsInputConfirm.getAttribute( "checked" ) ).toBe( null );
            expect( smsInputDeny.getAttribute( "checked" ) ).toBe( "true" );

    } );
});

【问题讨论】：

我在使用常规 Angular 应用程序时遇到了同样的问题。当元素属性不可见时，我无法读取它。当您对输入执行操作时，它会自动滚动以查找在 chromedriver 中运行的 Angular 应用程序。你用什么浏览器来测试？
@AndresD 使用 Chrome。它在另一个项目上工作，一旦我将它移植到 ionic 中它就停止了。想知道框架是否正在捕获/操作滚动事件。
想知道这是否也可能是 jQlite 问题。
是的，有some sort of scrollTo，但您可能需要添加一个返回元素位置的函数
@nilsK 这很奇怪，因为在我的另一个项目中，它会自动滚动到元素。我会研究一些全局 scrollTo 函数

标签： protractor ionic-framework

【解决方案1】：

最终使用了此处提供的答案的变体：How to set focus on a section of my web page then scroll down

更改了它，因此该函数仅将元素作为可重用性的参数。似乎工作正常。

var ptor = protractor.getInstance();

var scrollIntoView = function (element) {
  arguments[0].scrollIntoView();
};

describe( "Register page", function ()
{
    browser.get( "#/register" );

    ptor.sleep(2000);

    it( "Check SMS Preference", function ()
    {

        var smsLabelConfirm = element( by.css( ".sms-confirm" ) ),
            smsLabelDeny = element( by.css( ".sms-deny" ) ),
            smsInputConfirm = element ( by.id( "sms-confirm" ) ),
            smsInputDeny = element ( by.id( "sms-deny" ) );

            browser.executeScript(scrollIntoView, smsLabelConfirm);

            smsLabelConfirm.click();
            expect( smsInputConfirm.getAttribute( "checked" ) ).toBe( "true" );
            expect( smsInputDeny.getAttribute( "checked" ) ).toBe( null );

            smsLabelDeny.click();
            expect( smsInputConfirm.getAttribute( "checked" ) ).toBe( null );
            expect( smsInputDeny.getAttribute( "checked" ) ).toBe( "true" );

    } );
});

【讨论】：

奇怪，使用 scrollIntoView 给了我一个最大调用堆栈错误。
@AshleyCoolman 我也遇到了这个问题，但我通过将.getWebElement() 添加到我传递给参数的元素上解决了这个问题。这样WebElement 会被传入，而不是它的包装器。
这个答案有错误 - 应该改为element.scrollIntoView();。这对我仍然不起作用，但是当您添加 @Aaron 使用 .getWebElement() 的建议时，一切正常！
它使用：browser.executeScript(function () { arguments[0].scrollIntoView(); }, yourElement.getWebElement());