我正在考虑做一些前端集成测试，但在这方面有点卡住了。 我知道如何进行 javascript 单元测试，但我并没有真正理解前端测试的概念。
我想测试的一些场景：
最好的工具是什么？我将如何进行？
【问题讨论】：
标签： javascript jquery testing integration-testing frontend
我强烈推荐使用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 管道中，每次推送更改时，前端测试也会被评估。
【讨论】：
我还建议使用 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 是基于 promise 的，并且或多或少是相同的。
【讨论】：
wait_for_visibilty 仍然需要以某种方式包含暂停？
我用于这些目的的两个工具是 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
【讨论】：