最近在改造我们官网的UI自动化框架,用的是cypress,一个用js语言编写的轻量级的框架。由于从来没有学过js，刚开始还是踩了很多坑，不过根据官方文档来看，上手还是挺快的，现在来说一说项目搭建的流程吧。先看看我们项目的架构：
下面来说说搭建流程
1.下载NodeJS
NodeJS是一个js包管理工具，后续需要使用npm来安装cypress，官网地址：https://nodejs.org/en/download/
2.新建js工程
在工程目录下执行npm init命令让他生成一个默认的package.json文件。它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件，name和version必填。我们可以在这个文件里配置整个项目需要安装的依赖，由于我们的项目除了需要使用cypress，还涉及到eslint、mochareport等依赖包，所以配置如下：
配好后使用npm install命令，安装后会在项目下生成node_modules文件夹，里面即为我们所安装的依赖包。
3.配置cypress.json文件
这个文件是配置cypress部分参数的文件，如页面超时时间，默认命令超时时间等。如果不配置，默认使用cypress自带的配置，可参见 https://docs.cypress.io/guides/references/configuration.html#Global。这里注意以下几个文件夹的作用:
fixturesFolder---存放测试数据
integrationFolder---存放测试案例
supportFile---存放封装的方法
4.配置plugin文件
由于我们的官网涉及多个, 并且每个官网有多个环境,如果只是根据cypress.json来获取测试数据及测试案例等无法满足我们的要求,所以我们需要配置plugin来改变环境变量配置文件路径,这里可以参考https://docs.cypress.io/api/plugins/configuration-api.html#Usage
我们在项目根目录下创建plugins/index.js文件，填充以下内容：
//自定义一个方法,获取传入的环境及官网相应配置文件路径
function getConfigurationByFile(environment, site) {
const configPath =`projects/${site}/config`; //定义配置文件路径
const pathToConfigFile = path.resolve(".", configPath, `${environment}.json`);
return fs.readJson(pathToConfigFile);
}
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
// workaround for resolving click "covered by another element html"
on("before:browser:launch", (browser = {}, args) => {
const environment = config.env.environment ||"test";//接收传入的environment
const site = config.env.site ||"websiteA";//接收传入的site
return getConfigurationByFile(environment, site);//调用方法getConfigurationByFile,返回此官网相应的配置文件
};
}
添加好后，由于cypress.js文件里默认的pluginsFile路径是cypress/plugins/index.js，所以需要在cypress.js文件里增加"pluginsFile": "plugins/index.js",指定插件文件的路径
现在我们来看下configPath ,我们定义的路径是projects/${site}/config, 假如有个官网B,我们可以在projects下建立个websiteB文件夹,配置config文件,如果传入的环境是prod环境,将走prod.json文件里配置的路径,否则走test.json文件里配置的路径。前面已经说过fixturesFolder，integrationFolder，supportFile文件的含义，不清楚的可以再看看步骤3。
5.编写案例
现在我们可以开始编写案例了，在projects/websiteB/specs下创建一个访问首页的案例，由于visitHomePage(),closeAD()是首页的共用方法,我们可以将它写在support/homePage.js下面,webSiteB独有的方法可以写在projects/websiteB/support/customSteps.js下面,然后在support/index.js文件里
import "../projects/webSiteB/support/customSteps";
import "./homePage";
就行了
projects/websiteB/specs/home_present_spec.js
supprort/index.js
这里可以看到我传入的方法入参并不是写死的,而是去读取websiteB官网element.json文件里dialogNewRegister及dialogClose,这样更加清晰明了。
如果你也想按照这种方式来，可以在projects/websiteB/fixture下创建element.json文件，按照键值对的格式书写，如下图所示，dialogClose为键，.dialog-new-register .dialog-close就是css定位出来的值
{
"dialogClose": ".dialog-new-register .dialog-close",
"dialogNewRegister":".dialog-new-register"
}
然后我们在support文件夹下建立一个element.js文件，引入所有官网元素
import websiteB_ELEMENT from "../projects/websiteB/fixtures/element.json";
import websiteA_ELEMENT from "../projects/websiteA/fixtures/element.json";
export default {
websiteB_ELEMENT,
websiteA_ELEMENT
};
再在support/index.js添加如下代码：
import ELEMENTS from "./elements";
window.ELEMENTS = ELEMENTS;
就可以把所有官网的elements都引入到整个项目中了。
6.运行案例
现在，我们在package.json文件里添加scripts，
"scripts":
{
"run:websiteB:test": "cypress run --env environment=test,site=websiteB",
"open:websiteB:test": "cypress open --env environment=test,site=websiteB"
}
当我们在terminal执行npm run open:websiteB:test时，实际上就是执行cypress open --env environment=test,site=websiteB，打开官网为websiteB，环境为test的案例，接下来可以看到cypress界面已启起来，我们选择一条案例运行
可以看到该案例每个步骤的执行结果
如果执行npm run run:websiteB:test，将会运行官网为websiteB，环境为test的所有案例，最后将结果打印在terminal中。
