【Vue-Nightwatch】使用Nightwatch实现Vue项目的单元测试

单元测试：

个人理解是代码模拟用户操作进行用例测试，按键精灵与此类似。

官方文档

参考博客

Nightwatch：

1：所需依赖

1. nightwatch
2. selenium-server（依赖java环境）
3. chromedrever 

2：安装步骤

1. 预装jdk（8.0版本及以上），从而支持selenium-server；
2. npm install nightwatch；
3. npm install selenium-server；
4. npm install chromdriver；

若安装失败，可使用cnpm替代

3：配置

项目根目录下创建nightwatch.conf.js文件：

module.exports = {
    src_folders: [''],
    output_folder: 'output',
    custom_assertions_path: [],
    page_objects_path: '',
    globals_path: '',
    selenium: {
        start_process: true,
        server_path: require('selenium-server').path,
        host: '127.0.0.1',
        port: 5555,
        cli_args: {
            'webdriver.chrome.driver': require('chromedriver').path
        }
    },
    test_settings: {
        default: {
            selenium_port: 5555,
            selenium_host: 'localhost',
            silent: true,
            globals: {
                devServerURL: 'http://localhost:' + (process.env.PORT || 1111)
            }
        },
        chrome: {
            desiredCapabilities: {
                browserName: 'chrome',
                javascriptEnabled: true,
                acceptSslCerts: true
            }
        },
        firefox: {
            desiredCapabilities: {
                browserName: 'firefox',
                javascriptEnabled: true,
                acceptSslCerts: true
            }
        }
    }
}

4：第一个测试用例

根目录下创建e2e文件夹用于存放测试文件；

创建test.js测试文件如下：

module.exports = {
    'search nightwatch on baidu': function (browser) {
        browser
        .url('http://www.baidu.com')
        .waitForElementVisible('body', 10000)
        .setValue('#kw', 'nightwatch')
        .click('#su')
        .pause(3000)
        .waitForElementVisible('#content_left', 3000)
        .end();
    }
}

5：运行（配置npm）

配置中的src_folders来调用测试文件夹：src_folders: ['e2e']

接着在package.json的scripts中加入运行脚本："e2e": "nightwatch --env chrome"

npm run e2e

6：坑

Choromedriver75默认开启了W3C Webdirver协议，会导致某些端点无法实现，关闭即可解决：

desiredCapabilities : {
    browserName : 'chrome',
    chromeOptions: {
        w3c: false
    }
}

解决办法参考Git网址 

==主页传送门==