前端集成测试

Question

我正在考虑进行一些前端集成测试，但在这方面遇到了一些困难。我知道如何进行 javascript 单元测试，但我并没有真正了解前端测试的想法。

我想测试的一些场景：

• 页面加载后，我可以检查特定div是否填充了内容
• 单击按钮后，应该会出现一个弹出窗口，是否可以测试
• div 是否应用了特定的 HTML？

最好使用什么工具？我该如何继续呢？

Answer 1

我还建议进行 e2e 测试来检查您的网站，尤其是您的 javascript 的行为是否符合您的预期。您可以使用许多库在 Javascript 中进行 Webdriver 测试。查看此 stackoverflow 线程：无头浏览器和抓取 - 解决方案。

例如，在WebdriverJS中，您可以轻松链接多个命令以在浏览器中导航并获取要测试的信息。您的场景之一可能如下所示（使用 Mocha）：

describe("check if overlay pops up", function() {
  it("opens success overlay when I click on submit", function(done) {
    browser
      // show overlay
      .click(".btn_submit")
      .isVisible("#overlay", function(err,overlayIsOpen) {
        assert(err === null);
        assert(overlayIsOpen === true);
      })
      // hide overlay
      .click(".btn_ok")
      .isVisible("#overlay", function(err,overlayIsOpen) {
        assert(err === null);
        assert(overlayIsOpen === false);
      })
      .call(done)
  });

  // other tests
})

您将在项目网站上找到许多其他命令和示例。您可以在 Chrome、Firefox 等多种浏览器甚至移动设备上运行这些测试。其他流行的库（如Wd.js或Selenium-Webdriver）都是基于 Promise 的，并且做的事情或多或少相同。