我正在考虑做一些前端集成测试并且稍微坚持下去 . 我知道如何进行javascript单元测试,但我并没有真正了解前端测试 .
我想测试的一些场景:
页面加载后,我可以检查特定div是否填充了内容
点击一个按钮后,会出现一个弹出窗口,这是否可以测试
div是否应用了特定的HTML?
什么是最好的工具?我将如何继续这项工作?
我还建议使用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这样的其他流行的库是基于承诺的,并且或多或少都是一样的 .
我用于这些目的的两个工具是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绑定(当然) . 此页面提供了安装Everyhing的概述:https://code.google.com/p/selenium/wiki/WebDriverJs
2 回答
我还建议使用e2e测试来检查你的网站,特别是你的javascript是否像你期望的那样 . 您可以使用一堆库在Javascript中进行Webdriver测试 . 看看这个stackoverflow线程:Headless Browser and scraping - solutions .
例如,在WebdriverJS中,您可以轻松链接多个命令以在浏览器中导航并获取要测试的信息 . 您的一个场景可能如下所示(使用Mocha):
您将在项目网站上找到许多其他命令和示例 . 您可以在Chrome,Firefox甚至移动设备等多种浏览器上运行这些测试 . 像Wd.js或Selenium-Webdriver这样的其他流行的库是基于承诺的,并且或多或少都是一样的 .
我用于这些目的的两个工具是PhantomJS Mocha或Selenium Webdriver .
如果你想测试实际用户会看到我会使用Webdriver . PhantomJS是一款无头浏览器 . Webdriver实际上驱动了一个真正的浏览器(Chrome,Firefox等) .
一个使用Python的代码示例
我看到现在也有JavaScript绑定(当然) . 此页面提供了安装Everyhing的概述:https://code.google.com/p/selenium/wiki/WebDriverJs