前端E2E测试-配置- Vue + Cypress (2)

根据需求配置cypress。

配置文件-cypress.json

{
	"baseUrl": "http://localhost:7070", // 测试域名
	"chromeWebSecurity": false, // 允许跨域
	"requestTimeout": 30000,
	"pageLoadTimeout": 100000,
	"userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1" // 测试移动端web
}

Reference：https://docs.cypress.io/guides/references/configuration.html

修改配置的方法

命令行
需要prefix命令，具体操作参照官网。
https://docs.cypress.io/guides/guides/command-line.html
插件（Plugins）
可参考下面的例子。
环境参数
https://docs.cypress.io/guides/guides/environment-variables.html
Cypress.config()
只生效在使用此语句的测试文件。

需求&配置

1. 指定测试文件路径

有两种方法：
a. 修改配置文件中的配置项integrationFolder，pluginsFile, supportFIle等。
如修改测试文件路径，即在cypress.json中加入配置：“testFiles”: “**/*.cypress.spec.js”
这种情况你会发现，你配置了什么，原本项目中根目录下的cypress文件夹中的相应文件夹就会没有了。
Reference: https://docs.cypress.io/guides/references/configuration.html#Folders-Files
b. 使用插件（Plugins），在配置文件中加入配置： “pluginsFile”: “tests/e2e/plugins/index.js”
并在该index.js 中写入如下逻辑。在运行cypress之前，需要安装插件。

Index.js

const webpack = require('@cypress/webpack-preprocessor')
	module.exports = (on, config) => {
  		on('file:preprocessor', webpack({
    			webpackOptions: require('@vue/cli-service/webpack.config'),
    			watchOptions: {}
    }))
	return Object.assign({}, config, {
	    fixturesFolder: 'tests/e2e/fixtures',
	    integrationFolder: 'tests/e2e/specs',
	    screenshotsFolder: 'tests/e2e/screenshots',
	    videosFolder: 'tests/e2e/videos',
	    supportFile: 'tests/e2e/support/index.js'
	})
}
// 对Cypress框架里的文件进行预处理，指定文件路径。

Reference：
https://docs.cypress.io/api/plugins/preprocessors-api.html#Usage
https://github.com/cypress-io/cypress-webpack-preprocessor

2. 测试移动端web

在项目中，我们根据window.agent判断是否为手机。同样，我们运用cypress进行移动端web测试时，可以进行配置如下：

"userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"

Reference

https://github.com/cypress-io