Javascript 前端集成测试

我正在考虑做一些前端集成测试，在这个问题上有点纠结。 我知道如何进行javascript单元测试，但我并不真正了解前端测试

我想测试的一些场景：

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

---

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

我用于这些目的的两个工具是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绑定（当然）。本页提供了安装所有内容的良好概述：

我还建议您进行e2e测试，以检查您的网站，尤其是javascript的行为是否符合预期。有很多库可以用来在Javascript中进行Webdriver测试。检查此stackoverflow线程：

例如，在中，您可以轻松地链接多个命令以在浏览器中导航，并获取要测试的信息。您的一个场景可能如下所示（使用摩卡）：

---

您将在项目网站上找到许多其他命令和示例。您可以在Chrome、Firefox甚至移动设备等浏览器上运行这些测试。其他流行的库（如或）都是基于承诺的库，其功能大致相同。

我强烈建议在前端集成测试中使用。相应的实用程序使用MochaChai测试套件以非常简单和直接的方式在网页上创建和评估测试用例。此外，您可以从显示视频的命令行或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或Jasmine适用于这些场景。@Kyo，谢谢，现在查看Jasmine！谢谢，这让我朝着正确的方向前进了一大步，不过我更喜欢Selenium而不是PhantomJS，因为它向我展示了其他用户将看到的内容。回到这里，如果#overlay上有动画，我应该暂停一下吗？还是有办法解决这个问题？我最后写了一些方法，比如“wait_for u visibility”，并在点击modals时使用这些方法。但是你的

wait_for u visibility

仍然需要包含一个停顿？

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')
    })
})
}