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

清疚 2023-06-28 11:19 49阅读 0赞

单元测试：

> 个人理解是代码模拟用户进行用例测试，案件精灵与此类似

# ** 安装** #

**首先我们创创建一个项目然后进入该项目：**

cd nightwatch-guide

接着初始化项目的package.json

npm init -y

然后安装依赖：

npm install nightwatch

由于它是基于Selenium Server的，所以还得装这个：

npm install selenium-server

我们希望chrome-driver来测试，所以再装一下谷歌的驱动，当然，你也可以选择火狐或者其他的驱动

npm install chromedriver

再装一个driver

npm install geckodriver

**提示**

1.  以上的如果安装不成功，请使用`cnpm`替代
2.  官网的介绍，说要安装jdk，我没有试过不用jdk行不行，我一开始电脑上就有jdk环境，所以也没有卸载掉试试。如果你安装中报了类似java有关的错误，比如什么包什么模块找不到，请安装jdk后再安装依赖。
3.  这部分官网有介绍：[http://nightwatchjs.org/gettingstarted\#selenium-server-setup][http_nightwatchjs.org_gettingstarted_selenium-server-setup]

*  ## 配置 ##
 *  在项目的根目录下新建一个`nightwatch.conf.js`文件，然后将以下的代码拷贝进去
 *      module.exports = {
          src_folders: ['examples'],
          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
              }
            }
          }
        }
    
    ## 第一个测试用例 ##

###      编码测试代码 ###

我们先不用配置上的`src_folders`的目录作为测试目录。

在项目的根目录下新建一个examples的文件夹，用于存放我们的测试脚本。接着新建一个js文件作为测试文件。  
如图：

examples
      |---01-hello-nightwatch.js

接着写入我们的测试脚本：

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

上面的用例，模拟了用户在百度搜索nightwatch关键字的过程。

运行用例测试

我们在package.json的scripts中加入运行脚本：

"e2e": "nightwatch --env chrome"

接着运行

npm run e2e

感谢[https://blog.csdn.net/weixin\_42941619/article/details/103541140][https_blog.csdn.net_weixin_42941619_article_details_103541140]  带来的启发

感谢[https://blog.csdn.net/qq\_25324335/article/details/81990022][https_blog.csdn.net_qq_25324335_article_details_81990022] 带来的教程

[http_nightwatchjs.org_gettingstarted_selenium-server-setup]: http://nightwatchjs.org/gettingstarted#selenium-server-setup
[https_blog.csdn.net_weixin_42941619_article_details_103541140]: https://blog.csdn.net/weixin_42941619/article/details/103541140
[https_blog.csdn.net_qq_25324335_article_details_81990022]: https://blog.csdn.net/qq_25324335/article/details/81990022