本文转载自:众成翻译
译者:iOSDevLog
链接:http://www.zcfy.cc/article/3808
原文:https://www.fullstackreact.com/30-days-of-react/day-26/
今天我们将编写测试来模拟用户如何与我们的应用进行交互,并在现实的浏览器中测试我们的应用的整个流程。
我们已经到了测试入门的最后部分。我们将用集成测试来结束我们的测试部分。作为对集成测试的一个提醒,它是自动化我们的实际用户在使用我们的应用时体验到的体验的过程。
集成测试
当我们正在进行集成测试时,我们需要让我们的应用实际运行,因为我们需要一个浏览器启动并执行我们的应用。我们将使用一个叫做 selenium的自动化服务器,所以我们需要下载它以及一个非常漂亮的节点自动测试框架,称为Nightwatch。
安装
安装 selenium 最简单的方法是通过selenium网站下载http://docs.seleniumhq.org/download/。
如果你在使用一个 mac,你可以使用 Homebrew的
brew
命令:brew install selenium-server-standalone
我们还需要安装nightwatch
命令,我们可以使用npm
包管理器来完成。让我们使用--global
标志在全局范围内安装nightwatch
:
npm install --global nightwatch
此命令使我们可以在终端的任何位置使用nightwatch
命令。我们需要在根目录中添加一个名为nighwatch.json
的配置文件(或nighwatch.conf.js
).我们将使用默认的配置文件在nighwatch.json
让我们在根目录中创建文件:
touch nightwatch.json
现在,在新的nightwatch.json
中添加以下内容:
{ "src_folders" : ["tests"],"output_folder" : "reports","selenium" : { "start_process" : false,"server_path" : "","log_path" : "","host" : "127.0.0.1","port" : 4444,"cli_args" : { "webdriver.chrome.driver" : "","webdriver.ie.driver" : "" } },"test_settings" : { "default" : { "launch_url" : "http://localhost:3000","selenium_port" : 4444,"selenium_host" : "localhost","silent": true,"screenshots" : { "enabled" : false,"path" : "" },"desiredCapabilities": { "browserName": "chrome","javascriptEnabled": true,"acceptSslCerts": true } },"chrome" : { "desiredCapabilities": { "browserName": "chrome","acceptSslCerts": true } } } }
Nightwatch给我们提供了很多配置选项,不过我们不会覆盖所有可能的配置方法。出于我们的目的,我们将只使用上面的基本配置,因为它已经足够让集成测试继续进行。
编写测试
我们将在tests/
目录中编写我们的Nightwatch测试。让我们先编写一个测试来处理认证工作流。让我们在tests/
目录 (与src_folders
匹配) 中编写测试,我们将调用tests/auth-flow.js
。
mkdir tests touch tests/auth-flow.js
Nightwatch测试可以设置为可导出的对象,其中键是对测试的描述,而该值是一个具有对客户端浏览器的引用的函数。例如,我们将为我们的测试/认证流程设置四测试为tests/auth-flow.js
测试。
更新我们的tests/auth-flow.js
文件同以下四测试函数类似:
module.exports = { 'get to login page': (browser) => {},'logging in': (browser) => {},'logging out': (browser) => {},'close': (browser) => {},}
Each of the functions in our object exports will receive a browser
instance which serves as the interface between our test and the selenium webdriver. We have all sorts of available options we can run on this browser
variable.我们的对象输出中的每个函数都将接收一个browser
实例,作为我们测试和selenium webdriver之间的接口。我们有各种可用的选项,我们可以运行在这个browser
变量。
让我们编写第一个测试来演示这个函数。我们将设置Nightwatch,以便它启动页面,并单击导航中的登录链接。我们将采取以下步骤执行此操作:
我们将在路上设置断言。我们忙起来吧!我们将要求browser
加载我们在配置文件中设置的 URL (对于我们来说,它是http://localhost:3000
)
module.exports = { 'get to login page': (browser) => { browser // Load the page at the launch URL .url(browser.launchUrl) // wait for page to load .waitForElementVisible('.navbar',1000) // click on the login link .click('a[href="#/login"]') browser.assert.urlContains('login'); },}
就是这样。在我们走得太远之前,让我们运行这个测试以确保我们的测试设置能够正常工作。我们需要在这里打开3终端窗口。
在第一个终端窗口,让我们启动selenium。如果您下载了 .jar
文件,则可以使用以下命令启动此操作:
java -jar selenium-server-standalone-{VERSION}.jar
如果你通过自制器下载它,你可以使用selenium-server
命令:
selenium-server
在第二个窗口中,我们需要启动我们的应用. 记住,我们将要推出的浏览器将 真正地 命中我们的网站,所以我们需要它运行的实例。我们可以用npm start
启动我们的应用:
npm start
最后,在第三个和最后一个终端窗口中,我们将使用nightwatch
命令运行我们的测试。
nightwatch
当我们运行 nightwatch
命令,我们将看到一个 chrome 窗口打开,访问网站,并自动点击登录链接..。(很酷,对吧?)
我们所有的测试都在这一点上通过。让我们实际告诉浏览器在中记录一个用户。
由于第一步将运行,浏览器将已经在登录页上。在测试的第二个密钥中,我们要执行以下步骤:
在代码中写是直接的。就像我们以前做的那样,让我们用内嵌的注释编写代码:
module.exports = { 'get to login page': (browser) => { browser .url(browser.launchUrl) .waitForElementVisible('.navbar',1000) .click('a[href="#/login"]') browser.assert.urlContains('login'); },'logging in': (browser) => { browser // set the input email to a valid email .setValue('input[type=email]','[[email protected]](https://www.fullstackreact.com/cdn-cgi/l/email-protection)') // submit the form .click('input[type=submit]') // wait for the page to load .waitForElementVisible('.navbar',1000) // Get the text of the h1 tag .getText('.content h1',function(comp) { this.assert.equal(comp.value,'Welcome home!') }) browser.assert.urlContains(browser.launchUrl) },}
再次运行这些测试 (在第三个终端窗口中):
nightwatch
我们可以用浏览器中的 注销
步骤做类似的事情。要让用户注销,我们将:
让我们用内嵌的注释实现此操作:
module.exports = { 'get to login page': (browser) => { browser .url(browser.launchUrl) .waitForElementVisible('.navbar','logging in': (browser) => { browser .setValue('input[type=email]','[[email protected]](https://www.fullstackreact.com/cdn-cgi/l/email-protection)') .click('input[type=submit]') .waitForElementVisible('.navbar',1000) .getText('.content h1','logging out': (browser) => { browser // Find and click on the logout link .click('a[href="#/logout"]') // Wait for the content to load .waitForElementVisible('.content button',1000) // Click on the button to logout .click('button') // We'll wait for the next content to load .waitForElementVisible('h1',1000) // Get the text of the h1 tag .getText('h1',function(res) { this.assert.equal(res.value,'Welcome home!') }) // Make sure the Login button shows now .waitForElementVisible('a[href="#/login"]',1000); },}
到目前为止,您可能已经注意到,当测试完成时,chrome 浏览器还没有关闭。这是因为我们没有告诉selenium,我们希望本次课程完成。我们可以使用browser
对象上的 end()
命令来关闭连接。这就是为什么我们有最后的和最后一步被称为close
。
{ // ... 'close': (browser) => browser.end() }
现在,让我们运行整个套件,并确保它再次通过使用nightwatch
命令:
nightwatch
就是这样!我们已经做到了,并且已经完全覆盖了3种测试,从低级到假冒一个真正的浏览器实例。现在,我们有了确保我们的应用可以完全部署的工具。
但是等一下,我们还没有发现部署,是吗?敬请关注明天的当我们开始将应用部署到云中。