我也会推荐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的，并且或多或少都是这样。

我强烈推荐使用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管道中，每次推送更改时，前端测试也会进行评估。

我为此使用的两个工具是Selenium Webdriver和Selenium JS + Mocha。
如果你想测试实际用户会看到什么，我会使用Webdriver。Webdriver是一个无头浏览器。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绑定（当然）。

这似乎是一种隐藏的知识，但实际上它很简单。
前端的集成测试具有最佳价值。您可以使用UI元素进行交互，拦截对后端的调用，并验证它们是否反映了您所做的工作。您还可以存根服务器响应，以便您可以模拟不同的场景，而无需配置真实的后端服务器。
您可以在E2E模式下使用Cypress进行测试（但不要使用真实的e2e，因为这类测试太脆弱和困难）。
例如：

// Cypress logic is hidden. 
// Tests are in BDD style
// DSL layer is responsible for changing "user actions" into "app actions"
// there are no notion of "buttons", "style" etc in the test case itself
describe('Show User History', () => {
  // usersPage is a page object that sits in DSL layer. Only it interacts with Cypress
  const usersPage = new UsersPage();
  it('Should open users page', () => {
    //Given
    const user1 = UserBuilder().WithName("John", "Smith"); 
    const usersResponse = UsersBuilder()
      .withUser(user1)
      .withUser("Anna", "Smith")
      .build();
    usersPage.respondsWithUsers(usersResponse);
     
    // When
    usersPage.visit();
    // Then
    usersPage.shouldHaveEntriesCount(2);
    usersPage.shouldContain(user1);
  });
});

字符串