Cypress 测试：如何使用基于脚手架的自动化测试框架？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，自动化测试是必不可少的环节。Cypress 是一个流行的自动化测试框架，可以帮助我们快速、方便地进行前端自动化测试。本文将介绍如何使用基于脚手架的自动化测试框架，通过实例来探究 Cypress 如何使用，如何提高测试覆盖率。

为什么需要自动化测试？

前端网站或应用的变化飞快，每个人的浏览器、移动设备都有不同的显示效果，所以我们需要测试工程师来测试网页或应用的所有功能和特征。手动测试费时费力，而且容易出错，自动化测试能让测试工作更高效和准确。自动化测试可大大降低代码中的错误和失误，避免在生产环境中被用户发现。此外，它对于检测性能、可靠性，以及行为准确性来说是很重要的。

Cypress 简介

Cypress 是一个用 JavaScript 编写的开源自动化测试框架，为我们提供了一组强大的 API，可以通过它们与网站进行交互。Cypress 还提供了可视化的测试结果展示，使得它的使用变得更加简单、高效。Cypress 包括了：测试框架、运行器、断言库、Chai(Javascript的断言库)、Mocha(Javascript测试框架) 等技术。

如何使用 Cypress

步骤一：安装 Cypress

安装 Cypress 非常方便和易操作，我们可以在终端输入以下命令：

npm install cypress --save-dev

步骤二：快速开始

运行以下命令，Cypress 会创建默认的测试环境和示例测试用例：

npx cypress open

步骤三：创建测试用例

我们可以在 ./tests/ 目录下创建测试用例，例如 ./tests/sample_test.js，以下是一个简单的测试用例：

describe('Sample Test', () => {
  it('Visits the Cypress Homepage', () => {
    cy.visit('https://www.cypress.io/')
    cy.contains('The web has evolved. Finally, testing has too.').should('be.visible')
  })
})

在这个测试用例中，我们使用了 describe() 方法来定义测试集，使用 it() 方法来定义测试用例。cy.visit() 方法用于打开我们要测试的网站，在这里是 'https://www.cypress.io/'。`cy.contains()` 搜索在 DOM 上的文本，并断言它应该存在于页面上，同时使用 .should('be.visible') 来测试可见性。

步骤四：运行测试

运行以下命令，Cypress 将加载我们的测试套件并扫描我们的测试用例：

npx cypress run

Cypress 还提供了一个可视化工具，可以使用以下命令来打开：

npx cypress open

基于脚手架的自动化测试框架

以上是 Cypress 的基础使用方法，但随着项目的发展，我们需要更好的组织我们的测试代码，并建立更好的结构。这时，一个基于脚手架的自动化测试框架就能派上用场了。

步骤一：安装测试框架

假设我们使用的是 Webpack 构建，使用以下命令安装 Cypress：

npm install --save-dev mocha mocha-webpack cypress

步骤二：配置测试框架

在 package.json 文件中添加以下配置：

// javascriptcn.com 代码示例
"scripts": {
  "test": "cypress run",
  "cypress": "cypress open",
  "test:spec": "cypress run --spec 'cypress/integration/**/*.spec.js'",
  "test:watch": "cypress run --spec 'cypress/integration/**/*.spec.js' --watch"
},
"mocha-webpack": {
  "webpackConfig": "./webpack.config.js",
  "ignoreWarnings": [
    "Export 'usages' is not defined.", // 这里是你可能需要忽略的警告内容。
    "Failed to parse source map" // 这里是你可能需要忽略的警告内容。
  ]
},
"eslintConfig": {
  "extends": [
    "plugin:cypress/recommended"
  ]
}

我们在 package.json 中定义了以下几个可用测试命令：

npm run test：运行所有的测试用例。
npm run cypress：启动测试用例窗口以手动执行测试用例。
npm run test:spec：运行所有 .spec.js 扩展名的测试用例。
npm run test:watch：在文件更改时运行测试。

我们可以在 test 模块中使用 mocha-webpack。我们应该采取以下步骤：

webpack 配置应该遵循一定的模式，并暴露出两个变量 mocha 和 document. 我们也需要在 webpack.config.js 中定义好解析规则，以便正确处理 JavaScript 和相关文件。

// javascriptcn.com 代码示例
module.exports = {
  entry: {
    main: './src/index.js',
    vendor: [
      'lodash',
      'jquery'
    ]
  },
  output: {
    filename: '[name].js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.scss', '.less', '.css'],
    modules: [path.resolve(__dirname, './src'), 'node_modules']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader' // 这里是根据你的项目而定
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.html$/,
        use: ['html-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(
      Object.assign(
        {},
        {
          inject: true,
          template: 'public/index.html'
        }
      )
    ),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '<%- webpackConfig.output.publicPath %>vendor.bundle.js',
      minChunks: Infinity,
      alwaysCreate: true
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
      filename: '<%- webpackConfig.output.publicPath %>runtime.bundle.js',
      minChunks: Infinity,
      alwaysCreate: true
    })
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  }
}

我们仍然需要使用 cypress.json 文件配置 Cypress，具体内容如下：

{
  "baseUrl": "http://localhost:8080",
  "integrationFolder": "cypress/integration",
  "supportFile": "cypress/support/index.js",
  "videRecording": false,
  "testFiles": "**/*.spec.js"
}

这里，我们设置了 baseUrl 为我们的本地端口号（默认是 8080），testFiles 为包含我们所有测试的 .spec.js 文件。

步骤三：创建测试用例

在 ./cypress/integration 文件夹中新建一个测试文件，例如 ./cypress/integration/sample_test.spec.js。

// javascriptcn.com 代码示例
describe('Sample Test', () => {
  beforeEach(() => {
    cy.visit('/')
  })

  it('Has a body', () => {
    cy.get('body').should('exist')
  })

  it('Has a header', () => {
    cy.get('.header').should('exist')
  })
})

步骤四：运行测试

我们可以在终端输入以下命令来运行测试：

npx cypress run

或者输入以下命令以开启可视化的测试窗口：

npx cypress open

Cypress 将自动扫描您的 cypress/integration 文件夹，并显示您在 ./cypress/integration/sample_test.spec.js 中定义的测试用例。

总结

在这篇文章中，我们简单介绍了 Cypress 的基本使用，然后深入探讨了如何使用基于脚手架的自动化测试框架。希望这篇文章对你有所帮助，能够更好的组织和管理前端自动化测试框架。如果你和我一样一直在寻找最佳的测试方法，将这些方法找到并结合使用，你将能够轻松地编写和管理测试用例。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fe6d2795b1f8cacdd32f9b