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

【问题标题】：Zombie.js pressButton how to access post-ajax version of the browser?Zombie.js pressButton如何访问post-ajax版本的浏览器？
【发布时间】：2016-10-19 10:53:14
【问题描述】：

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

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

下面的测试按下按钮并触发请求，但是当测试随后查询文档以查找预期的 div 元素时，它找不到它们。我相信测试正在查询 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 文件中使用这些关键字时，它无法识别它们。这可能是一个单独的问题，但如果解决方案需要 async/await，我如何让 mocha 能够识别这些关键字？

【问题讨论】：

async/await 是 ES7 特性。您可能会找到一种方法以某种方式将其打开。但是，我看不出这对你有什么帮助。问题是让您的测试等待 DOM 被修改。我根本不使用 Zombie，但我确实使用了 Selenium，它具有执行此操作的功能。如果 Zombie 没有等价物，您可以随时轮询 DOM。
感谢硒推荐
我需要修改我之前的评论：async/await 没有进入 ES7 (=== ES2016)。 ES2016 已经像昨天一样获得批准（我刚刚了解到），但他们已经从中删除了 async/await。它可能是该语言下一个版本的一部分。

标签： javascript ajax node.js mocha.js zombie.js

【解决方案1】：

您可以更改您的 ajax 调用，以便在更新屏幕后，它们会针对名为 e.g. 的主体发送一个事件。 “动作完成”。然后在您的测试中，您可以创建一个侦听器函数，该函数返回一个在收到事件之前不会解析的 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" );

【讨论】：