Selenium + Nightwatch 自动化测试环境搭建

java

java

npm

开始搭建

1. 创建项目

npm init -y

2. 安装工具

npm install selenium-standalone --save-dev

npm install nightwatch --save-dev

项目配置

{
"src_folders": ["tests"],
"output_folder": "reports",
"custom_commands_path": "",
"custom_assertions_path": "",
"page_objects_path": "",
"globals_path": "",

"selenium": {
"start_process": true,
"server_path": "",
"log_path": "",
"host": "127.0.0.1",
"port": 4444,
"cli_args": {
"webdriver.chrome.driver": ""
}
},

"test_settings": {
"default": {
"launch_url": "http://localhost",
"selenium_port": 4444,
"selenium_host": "localhost",
"silent": true,
"screenshots": {
"enabled": false,
"path": ""
},
"desiredCapabilities": {
"browserName": "firefox",
"javascriptEnabled": true,
"acceptSslCerts": true
}
},

"chrome" : {
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
}
}
}

const path = require('path')

module.exports = (function (settings) {
return settings;
})(require('./nightwatch.json'))

/*
*  Nightwatch 会从 nightwatch.json 中读取配置。
*  不过如果存在 nightwatch.conf.js，将会变为首先从后者中读取配置。
*  nightwatch.conf.js 存在的意义是使用 JavaScript 动态生成配置信息。
*  如果配置信息是不需要代码修改的，直接使用 nightwatch.json 就可以啦。
*/

require('nightwatch/bin/runner.js')

node ./startup

node ./startup

{
...
"scripts": {
"start": "node ./startup.js"
},
...
}

npm start

const process = require('process')

module.exports = {
// Selenium 的版本配置信息。请在下方链接查询最新版本。升级版本只需修改版本号即可。
// https://selenium-release.storage.googleapis.com/index.html selenium: {
version: '2.53.1',
baseURL: 'https://selenium-release.storage.googleapis.com'
},

// Driver 用来启动系统中安装的浏览器，Selenium 默认使用 Firefox，如果不需要使用其他浏览器，则不需要额外安装 Driver。
// 在此我们安装 Chrome 的 driver 以便使用 Chrome 进行测试。
driver: {
chrome: {
// Chrome 浏览器启动 Driver，请在下方链接查询最新版本。
// https://chromedriver.storage.googleapis.com/index.html version: '2.22',
arch: process.arch,
baseURL: 'https://chromedriver.storage.googleapis.com'
}
}
}

const seleniumConfig = require('./build/selenium-conf')
const path = require('path')

module.exports = (function (settings) {

// 告诉 Nightwatch 我的 Selenium 在哪里。
settings.selenium.server_path = `${path.resolve()}/node_modules/selenium-standalone/.selenium/selenium-server/${seleniumConfig.selenium.version}-server.jar`

// 设置 Chrome Driver, 让 Selenium 有打开 Chrome 浏览器的能力。
settings.selenium.cli_args['webdriver.chrome.driver'] = `${path.resolve()}/node_modules/selenium-standalone/.selenium/chromedriver/${seleniumConfig.driver.chrome.version}-${seleniumConfig.driver.chrome.arch}-chromedriver`

return settings;
})(require('./nightwatch.json'))

const selenium = require('selenium-standalone')
const seleniumConfig = require('./selenium-conf.js')

selenium.install({
version: seleniumConfig.selenium.version,
baseURL: seleniumConfig.selenium.baseURL,
drivers: seleniumConfig.driver,
logger: function (message) { console.log(message) },
progressCb: function (totalLength, progressLength, chunkLength) {}
}, function (err) {
if (err) throw new Error(`Selenium 安装错误: ${err}`)
console.log('Selenium 安装完成.')
})

{
...
"scripts": {
"start": "node ./startup.js",
"selenium-setup": "node ./build/selenium-setup.js"
},
...
}

npm run selenium-setup

const selenium = require('selenium-standalone')
const seleniumConfig = require('./selenium-conf.js')

selenium.start({
drivers: seleniumConfig.driver
}, function (err, child) {
if (err) throw new Error(`Selenium 启动失败: ${err}`)
console.log(`Selenium 已手工启动，进程 PID: ${child.pid}`)
console.log('当不再需要运行 Selenium 时可关闭此 PID 进程.')
})

{
...
"scripts": {
"start": "node ./startup.js",
"selenium-setup": "node ./build/selenium-setup.js",
"selenium-start": "node ./build/selenium-start.js"
},
...
}

npm run selenium-start

搭建完了！

>
| -- build
|      | -- selenium-conf.js        # Selenium 版本信息配置。
|      | -- selenium-setup.js       # Selenium 安装命令脚本。
|      | -- selenium-start.js       # Selenium 启动命令脚本。
|
| -- nightwatch.conf.js             # Nightwatch 动态配置文件。
| -- nightwatch.json                # Nightwatch 配置文件。
| -- package.json                   # 项目信息配置文件。
| -- startup.js                     # 测试启动入口文件。

chrome

internet explorer

phantomjs

src_folders

["tests"]

编写一个简单的测试用例

module.exports = {
'Find the answer.': function (client) {
// TODO...
}
}

cilent

client

client.click("CSS Selector")

client.getCookie(function () {...})

module.exports = {
'Find the answer.': function (client) {
// 定义 Bing 页面中的节点.
const searchInput = '#sb_form_q'
const searchBtn = '#sb_form_go'
const question = 'what is microsoft'

// 启动浏览器并打开 bing.com.
client.url('http://bing.com').maximizeWindow()

// 确保 "body" 和输入框可以使用.
client.expect.element('body').to.be.present
client.expect.element(searchInput).to.be.visible
client.pause(2000)  // 稍等两秒.

// 输入 "what is microsoft" 然后搜索.
client.setValue(searchInput, question)
client.click(searchBtn)
client.pause(2000)

// 截一张图然后保存到 "reports/answer.png".
client.expect.element('body').to.be.present
client.saveScreenshot('reports/answers.png')
client.end()
}
}

expect

client.expect.element('body').to.be.present.before(3000)

编写另一个简单的测试用例

// Account setting.
const accountConfig = {
username: 'USERNAME',
password: 'PASSWORD',
uid: '10000'
}

module.exports = {
'Bilibili Live Login Test': function (client) {
client.url('http://live.bilibili.com').maximizeWindow()

// Page Init.
client.expect.element('body').to.be.present.before(3000)
client.expect.element('.top-nav-login-btn.last').to.be.visible

// Login.
client.click('.top-nav-login-btn.last')
client.waitForElementVisible('#bilibili-quick-login', 2000)
client.frame(0)
client.pause(2000)
client.setValue('#login-username', accountConfig.username)
client.setValue('#login-passwd', accountConfig.password)
client.click('#login-submit')

// Wait and check page has been reloaded.
client.frameParent()
client.pause(4000)
client.expect.element('body').to.be.present.before(3000)

// Check cookies to ensure we are signed in.
client.getCookies(function (result) {
result.value.forEach((value, index, array) => {
if (value.name === 'DedeUserID') client.assert.equal(parseInt(value.value, 10), accountConfig.uid)
})
})

// Move to User Avatar.
client.expect.element('.user-avatar-link').to.be.visible
client.moveToElement('.user-avatar-link', 5, 5)
client.pause(800)
client.expect.element('#top-nav-user-panel').to.be.visible

// Logout.
client.click('#top-nav-logout-link')
client.pause(5000)
client.expect.element('body').to.be.present.before(3000)

// Check cookies again to ensure we are off.
client.getCookies(function (result) {
var logout = true
result.value.forEach((value, index, array) => {
if (value.name === 'LIVE_LOGIN_DATA') logout = false
})
client.assert.equal(logout, true)
})

client.pause(1000)
client.end()
}
}

运行测试用例

npm start

需要注意的地方

大功告成！

test/e2e