在等待 Protractor 与基本量角器测试的页面同步时遇到错误答案

【问题标题】：Running into Error while waiting for Protractor to sync with the page with basic protractor test在等待 Protractor 与基本量角器测试的页面同步时遇到错误
【发布时间】：2018-11-14 17:35:17
【问题描述】：

describe('my homepage', function() {
    var ptor = protractor.getInstance();
    beforeEach(function(){
        // ptor.ignoreSynchronization = true;
        ptor.get('http://localhost/myApp/home.html');
        // ptor.sleep(5000);
    })
    describe('login', function(){

        var email = element.all(protractor.By.id('email'))
            , pass = ptor.findElement(protractor.By.id('password'))
            , loginBtn = ptor.findElement(protractor.By.css('#login button'))
            ;

        it('should input and login', function(){
            // email.then(function(obj){
            //  console.log('email', obj)
            // })
            email.sendKeys('josephine@hotmail.com');
            pass.sendKeys('shakalakabam');
            loginBtn.click();

        })
    })

});

以上代码返回

 Error: Error while waiting for Protractor to sync with the page: {}

我不知道为什么会这样，ptor 正确加载页面，似乎是元素选择失败。

到 SSHMSH：

谢谢，你几乎是对的，并且给了我正确的理念，所以关键是 ptor.sleep(3000) 让每个页面等待直到 ptor 与项目同步。

【问题讨论】：

标签： angularjs-e2e protractor

【解决方案1】：

我收到了同样的错误信息（Angular 1.2.13）。我的测试开始得太早了，而且 Protractor 似乎没有等待 Angular 加载。

看来我错误地配置了量角器配置文件。当 ng-app 指令未在 BODY 元素上定义，但在后代上时，您必须将量角器配置文件中的 rootElement 属性调整为定义角度根元素的选择器，例如：

// protractor-conf.js
rootElement: '.my-app',

当你的 HTML 是：

<div ng-app="myApp" class="my-app">

【讨论】：

换一种说法，只要 Protractor 在页面上找不到 ng-app 指令（给定 rootElement 配置），就会出现此错误。发生这种情况的另一个例子是页面加载失败（例如显示回溯）。
如果在 BODY 元素中定义了 ng-app 指令，但仍然出现此错误，会发生什么情况？

【解决方案2】：

我正在使用 ChromeDriver，第一次测试通常会出现上述错误。我设法像这样绕过它：

ptor.ignoreSynchronization = true;
ptor.get(targetUrl);
ptor.wait(
    function() {
            return ptor.driver.getCurrentUrl().then(
                function(url) {
                    return targetUrl == url;
                });
    }, 2000, 'It\'s taking too long to load ' + targetUrl + '!'
);

本质上，您正在等待浏览器的当前 URL 变为您所要求的，并允许 2s 发生这种情况。您可能想在之后切换ignoreSynchronization = false，可能将其包装在ptor.wait(...) 中。只是想知道，取消注释 ptor.sleep(5000); 没有帮助吗？

编辑：经过 Promise/Deferred 的一些经验后，我意识到 正确的 方法是：

loginBtn.click().then(function () {
    ptor.getCurrentUrl(targetUrl).then(function (newURL){
        expect(newURL).toBe(whatItShouldBe);
    });
});

请注意，如果您要更改 URL（即从当前 AngularJS 激活页面移到另一个页面，这意味着 AngularJS 库需要重新加载和初始化），至少在我的经验，没有办法避免ptor.sleep(...) 电话。只有当您停留在同一个 Angular 页面上，但更改主题标签后的 URL 部分时，上述方法才有效。

【讨论】：

我收到了这条消息，由于某种原因，wait fn 持有测试并且不符合规范。
您介意将element.all(protractor.By.id('email')) 和it(...) 块内的其余分配移动吗？他们可能有点太早了。因此，只是为了确保超时的 URL 确实存在（您可以在浏览器中看到它）。
你应该避免使用 ptor.sleep(...)，它会让你的测试变慢。这是一个已知问题，请参阅 Protractor times out waiting for sync with page when using $resource 和 issue 49 on GitHub。作为一种解决方法，您应该在导致错误的行之前使用ptor.ignoreSynchronization = true。谨慎使用，这可能会产生副作用，请参阅提供的链接！
为什么在第二个代码块中使用“get”而不是“getCurrentUrl”？不应该导航到另一个页面吗？只是好奇，刚刚开始使用量角器。
请注意，最新 (0.18.1) 版本的 Protractor 不再需要这样做。

【解决方案3】：

就我而言，我遇到了以下代码的错误：

describe("application", function() {
  it("should set the title", function() {
    browser.getTitle().then(function(title) {
      expect(title).toEqual("Welcome");
    });
  });
});

通过这样做修复它：

describe("application", function() {
  it("should set the title", function() {
    browser.get("#/home").then(function() {
      return browser.getTitle();
    }).then(function(title) {
      expect(title).toEqual("Welcome");
    });
  });
});

换句话说，我忘记导航到我想测试的页面，所以 Protractor 无法找到 Angular。哦！

【讨论】：

【解决方案4】：

protractor configuration file 中定义的exports.config 对象的rootElement 参数必须与包含ng-app 指令的元素匹配。这不必是唯一标识元素 - 如果指令在 div 中，'div' 就足够了，就像我的例子一样。

来自referenceConf.js：

// Selector for the element housing the angular app - this defaults to
// body, but is necessary if ng-app is on a descendant of <body>  
rootElement: 'div',

我通过观看其他出色的 egghead.io lecture 开始使用 Protractor，他在其中使用了浓缩的 exports.config。由于rootElement 默认为body，因此如果您不从提供的参考配置的副本开始，那么就没有提示您的配置有什么问题，即便如此

等待 Protractor 与页面同步时出错：{}

消息没有提供太多线索。

【讨论】：

只是想评论一下，使用“div”作为值对我不起作用——我需要给我的 div 标签一个 id，然后按照以下解决方案的建议引用该 id：@987654332 @ 然后在量角器配置中：rootElement: '#myAppId'
通过将 rootElement 设置为 div[ng-app]，我设法逃脱了，而没有在我的 div 标签上添加一个 id。

【解决方案5】：

我不得不放弃这样做：

    describe('navigation', function(){

        browser.get('');

        var navbar = element(by.css('#nav'));

        it('should have a link to home in the navbar', function(){
            //validate
        });

        it('should have a link to search in the navbar', function(){
            //validate
        });
    });

这样做：

    describe('navigation', function(){

        beforeEach(function(){
            browser.get('');
        });
        var navbar = element(by.css('#nav'));

        it('should have a link to home in the navbar', function(){
            //validate
        });

        it('should have a link to search in the navbar', function(){
            //validate
        });
    });

关键差异是：

    beforeEach(function(){
        browser.get('');
    });

希望这可以帮助某人。

【讨论】：

【解决方案6】：

我收到了这个错误：

失败：等待 Protractor 与页面同步时出错：“window.angular 未定义。这可能是因为这是一个非 Angular 页面，也可能是因为您的测试涉及客户端导航，这可能会干扰 Protractor 的引导。有关详细信息，请参阅http://git.io/v4gXM"

解决方案是在page.getTitle() 之前调用page.navigateTo()。

之前：

import { AppPage } from './app.po';

describe('App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should have the correct title', () => {
    expect(page.getTitle()).toEqual('...');
  })
});

之后：

import { AppPage } from './app.po';

describe('App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
    page.navigateTo();
  });

  it('should have the correct title', () => {
    expect(page.getTitle()).toEqual('...');
  })
});

【讨论】：

【解决方案7】：

如果你正在使用

browser.restart()

在您的规范中，有时会引发相同的错误。尝试使用

等待 browser.restart()

【讨论】：