vue-cli 脚手架基于Nightwatch的端到端测试环境的过程

下面我将详细讲解Vue CLI脚手架基于Nightwatch的端到端测试环境的过程。

简介

Vue CLI是Vue.js官方提供的一个标准工具，用于快速构建基于Vue.js的单页应用和组件库。而Nightwatch是一个基于Node.js和Webdriver API的可扩展自动化测试框架，它可以实现端到端的自动化测试。Vue CLI利用Nightwatch提供了一个默认的端到端测试环境，可以很方便的进行自动化测试。

环境搭建

1. 安装Vue CLI

Vue CLI是一个npm包，因此，我们可以使用npm安装它。在命令行中输入：

npm install -g @vue/cli

这样就可以全局安装Vue CLI了。

1. 创建Vue项目

使用Vue CLI创建一个新的Vue项目。在命令行中输入：

vue create my-project

需要注意的是，在后面的选项中，务必选择“Manually select features”并勾选“E2E测试”，这样就可以安装Nightwatch了。

1. 修改Nightwatch配置

在创建好的Vue项目中，可以看到一个目录名为tests/e2e，其中就是Nightwatch的测试用例文件。Vue CLI已经为我们生成了一个默认的Nightwatch配置，但这个配置并不是完整的。我们需要在tests/e2e/nightwatch.conf.js文件中添加以下代码：

const path = require('path')
const webpackConfig = require('@vue/cli-service/webpack.config.js')

module.exports = {
  src_folders: ['./tests/e2e/specs'],
  page_objects_path: './tests/e2e/page-objects',
  webdriver: {
    start_process: true,
    server_path: require('chromedriver').path,
    cli_args: [
      // --verbose
    ],
  },
  test_settings: {
    default: {
      webdriver: {
        port: 9515,
        default_path_prefix: '',
        desiredCapabilities: {
          browserName: 'chrome',
          chromeOptions: {
            // Here is where you can specify additional chrome options
            // for more information see https://sites.google.com/a/chromium.org/chromedriver/capabilities
            //args: ["--no-sandbox"]
          },
        },
      },
      request_timeout_options: {
        timeout: 60000,
        retry_attempts: 3,
      },
      screenshots: {
        enabled: true,
        on_failure: true,
        on_error: false,
        path: path.join(__dirname, 'screenshots'),
      },
      globals: {
        waitForConditionTimeout: 5000, // sometimes internet is slow so wait.
      },
    },
    chrome: {
      desiredCapabilities: {
        browserName: 'chrome',
      },
    },
    firefox: {
      desiredCapabilities: {
        browserName: 'firefox',
      },
    },
  },
}

这里需要注意的是，我们需要将Nightwatch的配置文件中的webdriver.server_path修改为ChromeDriver的路径。此外，我们还需要通过globas.waitForConditionTimeout属性设置每个测试用例的最长等待时间。

1. 编写测试用例

在tests/e2e/specs目录下创建一个测试用例文件test.js，并编写测试用例代码。例如，我们可以编写一个测试用例测试Vue的路由功能：

module.exports = {
  'Vue Router Test': function (browser) {
    browser
      .url('http://localhost:8080/')
      .waitForElementVisible('#app', 5000)
      .assert.urlEquals('http://localhost:8080/')

      .click('#about-link')
      .pause(1000)
      .assert.urlEquals('http://localhost:8080/about')
      .assert.containsText('h1', 'About')

      .click('#home-link')
      .pause(1000)
      .assert.urlEquals('http://localhost:8080/')
      .assert.containsText('h1', 'Home')
      .end()
  },
}

1. 运行测试

在命令行中输入以下命令运行测试：

npm run test:e2e

这样Nightwatch就会执行我们编写的测试用例，并输出测试结果。

示例说明

这里有两个示例说明，分别是测试按钮的点击事件和测试表单输入的功能。

测试按钮点击事件

在测试用例中，我们可以使用click方法模拟按钮的点击事件，测试点击按钮后是否触发了正确的事件。

module.exports = {
  'Button Click Test': function (browser) {
    browser
      .url('http://localhost:8080/')
      .waitForElementVisible('#app', 5000)
      .click('#btn-click')
      .pause(1000)
      .assert.containsText('#result', 'button clicked!')
      .end()
  },
}

这个测试用例会先访问Vue应用的首页，找到一个id为#btn-click的按钮，并模拟点击事件。然后，它会等待1秒钟，再断言在页面上有一个id为#result的元素，并且它的文本内容是“button clicked!”。

测试表单输入

另一个很重要的测试功能是测试表单输入。在测试用例中，我们可以使用setValue方法模拟表单输入，测试是否正确地将输入的值保存在了Vue组件实例的数据中。

module.exports = {
  'Form Input Test': function (browser) {
    browser
      .url('http://localhost:8080/')
      .waitForElementVisible('#app', 5000)
      .setValue('#input-field', 'test value')
      .pause(1000)
      .assert.value('#input-field', 'test value')
      .assert.containsText('#result', 'test value')
      .end()
  },
}

这个测试用例会先访问Vue应用的首页，找到一个id为#input-field的输入框，并模拟输入“test value”的文本。然后，它会等待1秒钟，再断言输入框中的值是“test value”，并且在页面上有一个id为#result的元素，它的文本内容也是“test value”。