Question

我正在考虑进行一些前端集成测试，并对此有所了解。我知道如何进行javascript单元测试，但我并没有真正了解前端测试。

我想测试的一些场景：

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

最好的工具是什么？我将如何继续这个？

Answer 1

我用于这些目的的两个工具是PhantomJS + Mocha或Selenium Webdriver。

如果你想测试实际用户会看到我会使用Webdriver。 PhantomJS是一个无头浏览器。 Webdriver实际上驱动了一个真正的浏览器（Chrome，Firefox等）。

使用Python的代码示例

from selenium import webdriver

browser = webdriver.Chrome()
# at this point a chrome window will open
browser.get('http://example.com')

div = browser.find_element_by_css_selector('div.my-class')

assert div.text == 'The content I want to be there'

我看到现在还有JavaScript绑定（当然）。此页面提供了安装Everyhing的概述：https://code.google.com/p/selenium/wiki/WebDriverJs

Answer 2

我还建议使用e2e测试来检查您的网站，尤其是您的javascript是否与您期望的一样。您可以使用一堆库在Javascript中进行Webdriver测试。看看这个stackoverflow线程：Headless Browser and scraping - solutions。

例如在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都是基于承诺的，并且大致相同。

Answer 3

我强烈建议使用cypress进行前端集成测试。相应的实用程序使用mocha-chai测试套件以非常简单直接的方式在网页上创建和评估测试用例。此外，您可以从显示视频的命令行或GUI执行测试，并且还可以记录每个测试。这是一个小样本：

describe('Test myProjects input fields', function () {
beforeEach(() => {
    cy.visit('https://webpage.link/go/alink')
})

it('fills Project form', () => {
    cy.contains('Where is your item located?')

    cy.get('myelement-component-autocomplete[myelement="myProject/Home/hotelName"]').within(() => {
        cy.get('input').type('Hilton')
    })

    cy.get('myelement-component-datetime[myelement="myProject/Home/departureDate"]').within(() => {
        cy.get('input').type('2/4/2019')
    })
})
}

稍后，您可以将其添加到项目CI管道中，并且每次进行更改时，也会对前端测试进行评估。

前端集成测试

3 个答案: