前端集成测试

Question

我正在考虑做一些前端集成测试，并且在这方面有点卡住。我知道如何做javascript单元测试，但我不太了解前端测试的概念。

我想测试一些场景:

• 页面加载后，我可以检查一个特定的div是否被内容填充
• 点击按钮后，应该显示一个弹出窗口，这是可能的测试
div是否有特定的HTML应用于它?

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

Answer 1

我也会推荐端到端测试来检查你的网站，特别是你的javascript是否像你期望的那样。有很多库可以用来在Javascript中做Webdriver测试。查看这个stackoverflow线程:Headless Browser和抓取-解决方案。

例如，在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 2

我强烈推荐使用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管道中，并且每次您推动更改时，前端测试也将被评估。

Answer 3

我用于这些目的的两个工具是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绑定(当然)。这个页面提供了一个很好的概览安装的一切:https://code.google.com/p/selenium/wiki/WebDriverJs