最近在改造我们官网的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中。