Zombie.js pressButton如何访问post-ajax版本的浏览器？

Question

我使用zombie.js自动测试浏览器操作，在这种情况下，点击按钮提交表单。

在测试之外，在真实浏览器中，单击按钮时，会触发AJAX请求。当AJAX请求完成时，会将两个div.alert元素添加到文档正文中。

下面的测试按下按钮并触发请求，但是当测试随后查询文档以查找预期的div元素时，它无法找到它们。我相信测试是在查询旧的＆＃34; AJAX调用完成之前存在的文档版本。我的问题是：如何在AJAX调用完成之后访问存在的文档版本并添加元素？

context("when visited on the 'new' page", function(){
  before(function(){  return browser.visit('/');  });
  before(function(){  return browser.clickLink('new');  });

  context("when submitted with invalid values", function(){
    before(function(){
      return browser.pressButton("Submit")
    })

    it("flash should include error messages", function(){
      var messages = browser.queryAll(".alert")
      console.log(messages)
      expect(messages.length).toEqual(2)
    })
  })
})

注意：我一直在研究zombie.js测试，并找到async和await的使用，但当我尝试在我的.js文件中使用这些关键字时，它并没有＆＃39认识他们。这可能是一个单独的问题，但如果解决方案需要async / await，我如何启用mocha来识别这些关键字？

Answer 1

您可以更改您的ajax调用，以便在更新屏幕后，他们会针对身体调度一个事件，例如“动作完成的”。然后在测试中，您可以创建一个侦听器函数，该函数返回在收到事件之前无法解析的Promise。

const actionAndWait = ( action, eventName ) => new Promise( resolve => {

    const listener = () => {
        browser.body.removeEventListener( eventName, listener );
        resolve();
    };

    browser.body.addEventListener( eventName, listener );
    action();
    browser.wait();

} );

然后你的'之前'会打电话

return actionAndWait( () => browser.pressButton("Submit"), "action-completed" );