angularjs - 收到错误 : Error while waiting for Protractor to sync with the page: {}

Question

我的 e2e.conf.coffee文件是:

exports.config =
  baseUrl: 'http://localhost:9001'
  specs: [
    'e2e/**/*.coffee'
  ]

  framework: 'jasmine'

我的节点项目在端口 9001 上运行并监听。

我的测试是:

describe 'Happy Path', ->
  it 'should show the login page', ->
    console.log browser

    expect(browser.getLocationAbsUrl()).toMatch("/view1");
  it 'should fail to login', ->
    setTimeout ->
      console.log "FAIL!"
    , 1200

我得到的错误是:

Failures:

  1) Happy Path should show the login page
   Message:
     Error: Error while waiting for Protractor to sync with the page: {}
   Stacktrace:
     Error: Error while waiting for Protractor to sync with the page: {}
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
==== async task ====
WebDriver.executeScript()
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
==== async task ====
Asynchronous test function: it("should show the login page")
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>
    at <anonymous>==== async task ====

我究竟做错了什么？？

Answer 1

(非常)简短的版本:使用 browser.driver.get而不是 browser.get .

更长的版本: Protractor 基本上是 Selenium 及其 Javascript WebDriver 代码的包装器。 Protractor 添加代码以等待 Angular “安定下来”(即，完成其 $digest 循环)，然后再继续执行您的测试代码。但是，如果您的页面上没有 Angular，那么 Protractor 将“永远”等待(实际上只是直到它超时)等待 Angular 解决。
browser Protractor 暴露给您的测试的对象是 Protractor 的一个实例(即，如果您在 Stack Overflow 上看到带有 var ptor = protractor.getInstance(); ptor.doSomething() 的旧答案，那么您可以在这些旧答案中将 ptor 替换为 browser)。 Protractor 还将封装的 Selenium WebDriver API 公开为 browser.driver .因此，如果您调用 browser.get ，您正在使用 Protractor(它会等待 Angular 安定下来)，但如果您调用 browser.driver.get ，您正在使用 Selenium(它不了解 Angular)。

大多数时候，你会测试 Angular 页面，所以你会想要使用 browser.get获得 Protractor 的好处。但是，如果您的登录页面根本不使用 Angular，那么您应该使用 browser.driver.get而不是 browser.get在测试您的登录页面的测试中。请注意，在其余的测试中，您还需要使用 Selenium API 而不是 Protractor API:例如，如果您的页面中有一个 id="username"的 HTML 输入元素，您将需要使用 browser.driver.findElement(by.id('username')) 访问它而不是 element(by.model('username')) .

有关更多示例，请参阅 this example来自 Protractor 测试套件(或尝试 this link 如果前一个曾经消失)。另见 the Protractor docs哪一个州:

Protractor will fail when it cannot find the Angular library on a page. If your test needs to interact with a non-angular page, access the webdriver instance directly with browser.driver.

示例代码 :在上面的登录测试中，您可能想要执行以下操作:

describe 'Logging in', ->
  it 'should show the login page', ->
    browser.driver.get "http://my.site/login.html"
    // Wait for a specific element to appear before moving on
    browser.driver.wait ->
      browser.driver.isElementPresent(by.id("username"))
    , 1200
    expect(browser.driver.getCurrentUrl()).toMatch("/login.html");
  it 'should login', ->
    // We're still on the login page after running the previous test
    browser.driver.findElement(by.id("username")).sendKeys("some_username")
    browser.driver.findElement(by.id("password")).sendKeys("some_password")
    browser.driver.findElement(by.xpath('//input[@type="submit"]')).click()

(注意:我没有做过多少 CoffeeScript，我完全有可能在上面的代码中犯了 CoffeeScript 语法错误。您可能需要在盲目复制和粘贴之前检查它的语法。但是，我有信心逻辑，因为它几乎是从我测试非 Angular 登录页面的 Javascript 代码中逐字复制和粘贴的。)