用量角器测试临时元素的内容 [英] Testing the contents of a temporary element with protractor

问题描述

我正在尝试使用量角器在我的网站上测试登录页面.

I'm trying to test the login page on my site using protractor.

如果登录不正确，该站点将显示一条吐司"消息，该消息会弹出5秒钟，然后消失(使用$timeout).

If you log in incorrectly, the site displays a "toast" message that pops up for 5 seconds, then disappears (using $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")
      )
    )
  )

相关标记(玉)如下:

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

问题是toastMessage测试失败(找不到元素).它似乎正在等待烤面包消失并然后运行测试.

The problem is the toastMessage test is failing (it can't find the element). It seems to be waiting for the toast to disappear and then running the test.

我也尝试过将toastMessage测试放在then()回调之外(无论如何我都认为这是多余的)，但是我得到的行为却完全相同.

I've also tried putting the toastMessage test outside the then() callback (I think this is pretty much redundant anyway), but I get the exact same behaviour.

我最好的猜测是量角器看到正在运行$timeout，并在运行下一个测试之前等待它完成(请参阅

My best guess is that protractor sees that there's a $timeout running, and waits for it to finish before running the next test (ref protractor control flow). How would I get around this and make sure the test runs during the timeout?

更新:

根据以下建议，我使用了 browser.wait() 举杯可见，然后在诺言解决后尝试进行测试.没用.

Following the suggestion below, I used browser.wait() to wait for the toast to be visible, then tried to run the test when the promise resolved. It didn't work.

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语句使我看到发生了什么.这是一系列事件，[]是我在浏览器中看到的.

The console.log statements let me see what's going on. This is the series of events, the [] are what I see happening in the browser.

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

为进一步了解烤面包机的状况，我提供了一项服务，该服务本质上包含一系列消息. toast指令始终在页面上(模板是上面的玉石)，并在toast服务中监视消息.如果有新消息，它将运行以下代码:

For added clarity on what is going on with the toaster: I have a service which essentially holds an array of messages. The toast directive is always on the page (template is the jade above), and watches the messages in the toast service. If there is a new message, it runs the following code:

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

这会将消息推入示波器上的message数组中5秒钟，这就是使吐司出现的原因(通过ng-show="messages.length").

This pushes the message into the messages array on the scope for 5 seconds, which is what makes the toast appear (via ng-show="messages.length").

为什么量角器要等吐司的$timeout过期才进行测试?

Why is protractor waiting for the toast's $timeout to expire before moving on to the tests?

推荐答案

事实证明这是量角器的已知行为.我认为应该是一个错误，但目前问题已解决.

It turns out that this is known behaviour for protractor. I think it should be a bug, but at the moment the issue is closed.

解决方法是使用$interval而不是$timeout，将第三个参数设置为1，这样它仅被调用一次.

The workaround is to use $interval instead of $timeout, setting the third argument to 1 so it only gets called once.

这篇关于用量角器测试临时元素的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！