前端集成测试

Question

我正在考虑做一些前端集成测试，并在这方面做了一些工作。我知道如何进行javascript单元测试，但我并不真正了解前端测试的概念。

我想测试一些场景：

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

最好的工具是什么？我该怎么做呢？

Answer 1

我还建议进行e2e测试，以检查您的网站，特别是javascript的行为是否与您所期望的一样。有很多库可以用来在Javascript中进行Webdriver测试。查看这个堆栈溢出线程：无头浏览器和刮取解决方案。

例如，在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或硒网驱动程序，都是基于承诺的，或多或少也是如此。

Answer 2

我强烈建议使用柏树进行前端集成测试。相应的实用工具使用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管道中，并且每次您推送更改时，前端测试也将被评估。

Answer 3

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

如果您想测试实际用户将看到什么，我将使用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绑定了(当然)。本页面提供了一个很好的概览，让您安装了所有的东西：https://code.google.com/p/selenium/wiki/WebDriverJs。