angularjs - 使用 Protractor 测试临时元素的内容

Question

我正在尝试使用 Protractor 测试我网站上的登录页面。

如果您登录不正确，该站点会显示一条“toast”消息，该消息会弹出 5 秒钟，然后消失(使用 $timeout )。

我正在使用以下测试:

  describe('[login]', ()->
    it('should show a toast with an error if the password is wrong', ()->

      username = element(select.model("user.username"))
      password = element(select.model("user.password"))
      loginButton = $('button[type=\'submit\']')
      toast = $('.toaster')

      # Verify that the toast isn't visible yet
      expect(toast.isDisplayed()).toBe(false)

      username.sendKeys("admin")
      password.sendKeys("wrongpassword")
      loginButton.click().then(()->
        # Verify that toast appears and contains an error
        toastMessage = $('.toast-message')
        expect(toast.isDisplayed()).toBe(true)
        expect(toastMessage.getText()).toBe("Invalid password")
      )
    )
  )

相关标记( Jade )如下:

.toaster(ng-show="messages.length")
  .toast-message(ng-repeat="message in messages") {{message.body}}

问题是 toastMessage测试失败(它找不到元素)。它似乎是在等待 toast 消失然后运行测试。

我也试过把 toastMessage then() 之外的测试回调(无论如何我认为这几乎是多余的)，但我得到了完全相同的行为。

我最好的猜测是 Protractor 看到有一个 $timeout运行，并等待它完成，然后再运行下一个测试(引用 protractor control flow)。我将如何解决这个问题并确保测试在超时期间运行？

更新:

根据以下建议，我使用了 browser.wait() 等待 toast 可见，然后在 promise 解决时尝试运行测试。它没有用。

console.log "clicking button"
loginButton.click()

browser.wait((()-> toast.isDisplayed()),20000, "never visible").then(()->
  console.log "looking for message"
  toastMessage = $('.toaster')
  expect(toastMessage.getText()).toBe("Invalid password")
)

console.log 语句让我看看发生了什么。这是一系列事件， []是我在浏览器中看到的。

clicking button
[toast appears]
[5 sec pass]
[toast disappears]
looking for message
[test fails]

为了更清楚地了解 toastr 的情况:我有一个服务，它基本上包含一系列消息。 toast 指令始终在页面上(模板是上面的 Jade )，并监视 toast 服务中的消息。如果有新消息，它将运行以下代码:

scope.messages.push(newMessage)
# set a timeout to remove it afterwards.
$timeout(
()-> 
  scope.messages.splice(0,1) 
, 
  5000
)

这会将消息推送到范围内的消息数组中 5 秒，这就是让 toast 出现的原因(通过 ng-show="messages.length" )。

为什么 Protractor 在等待 toast 的 $timeout在继续测试之前到期？

Answer 1

我使用下面的代码块解决了这个问题。我有一个来自第 3 方节点包 (ng-notifications-bar) 的通知栏，它使用 $timeout 而不是 $interval，但需要期望错误文本是某个值。我使用了一个简短的 sleep() 来允许通知栏动画出现，将 ignoreSynchronization 切换为 true 以便 Protractor 不会等待 $timeout 结束，设置我的 expect()，并将 ignoreSynchronization 切换回 false 以便 Protractor 可以以常规的 AngularJS 节奏继续测试。我知道 sleep 并不理想，但它们很短。

browser.sleep(500);
browser.ignoreSynchronization = true;
expect(page.notification.getText()).toContain('The card was declined.');
browser.sleep(500);
browser.ignoreSynchronization = false;