自动化测试框架[Cypress持续集成之Circle CI]__前端自动化测试框架cypress

D:\mkdir CypressCIDemo
在执行测试前，首先要确保被测的服务是正确启动的，否则可能导致服务还未启动成功，测试已经开始执行了，Cypress提供了一个包可以确保测试在服务启动后执行，执行如下命令安装 
D:\CypressCIDemo>npm install --save-dev start-server-and-test
配置并运行项目 
安装好依赖后，更新package.json文件 
//start部分的命令用于启动我们的服务
//test部分的命令确保服务启动后，再去执行cy:run命令
"scripts":{
	"cy:run":"yarn cypress run",
	"debug":"yarn cypress open",
	"start":"node server.js",
	"test":"START_SERVER_AND_TEST_INSECURE=1 start-server-and-test start https-get://localhost:3002 cy:run"
本地运行测试 
本地运行测试，验证服务和代码的正确性 
//进入项目根目录，运行测试
D:\CypressCIDemo>yarn test
将CypressCIDemo项目代码上传到Github 
集成Github以及Circle Ci 
首先访问CircleCI网站

 然后使用Github账号登陆，并选择Authorize circleci

 登陆成功后，Select an organization

 然后Github中的项目就会被Loading进来

 然后Set Up Project，会弹出提示窗，生成项目yml格式的配置文件模板，该文件用于对Circle CI的各项配置，当Github中的代码改变触发Circle CI时，Circle CI根据配置文件中的配置对代码进行部署、测试等操作

 
修改yml配置文件 
 将该文件复制下来，根据实际情况进行更改形成适合项目的yml配置文件并将其放入到Github项目中即可，具体步骤为： 
 在项目的根目录下创建.circleci文件夹，并在其下创建名称为config.yml配置文件，根据实际情况编辑config.yml文件,如下样例所示 
jobs:
	build:
		docker:
			#指定要使用的安装了Cypress的Docker镜像
			- image:cypress/base:10
			- image:circleci/node:10
			environment:
				# 配置输出时颜色区分
				TERM:xterm
		working_directory:~/app
		#并行数目，此项的值决定了Circle CI为我们配置的客户机数量
		parallelism:2
		steps:
			- checkout
			- restore_cache:
				keys:
					- v2-deps-{{.Branch}}-{{checksum"package-lock.json"}}
					- v2-deps-{{.Branch}}-
					- v2-deps-
			- run:npm ci
			- save_cache:
				key:v2-deps-{{.Branch}}-{{checksum"package-lock.json"}}
				patchs:
					- ~/.npm
					- ~/.chche
			#安装依赖包
			- run:
				name:install dependency
				command:yarn
			#运行测试，command里定义的命令，对应package.json里相应部分
			- run:
				name:Running e2e tests
				command:yarn test
			#测试结果
			- store_test_results
				path:junit-results
			#保存视频和截图
			- store_artifacts:
				path:cypress/videos
			- store_artifacts:
				path:cypress/screenshots
关于config.yml文件可以通过circleci的官方说明文档进行更多的配置
 编辑好config.yml文件后,commit并push到Github项目中
 
配置Github Webhooks 
根据实际情况配置哪些操作可以触发Circle CI的CI/CD过程，首先登陆Github账号，在需要配置的项目下单击Settings按钮，页面跳转后找到Webhooks选项


 默认情况下，当代码有Pull requests、Push等操作时，会自动触发Webhooks执行相应任务 
启动Build 

 到此，Circle CI和Github已经集成完毕，更多的Github的使用和Circle CI的使用，仍需通过官方文档深入学习 
Circle CI集成Cypress 
Test Runner中启动 “–record” 
使用Cypress进行并行测试除了指定运行参数--parallel外，还需要设置Cypress以--record方式运行，首先在package.json中的scripts模块中添加"debug":"yarn cypress open" 
  "name": "davieyang",
  "version": "1.0.0",
  "description": "davieyang trainning cypress",
  "main": "index.js",
  "dependencies": {
    "cypress": "^6.2.0"
  "devDependencies": {
    "mocha": "^5.2.0",
    "mocha-junit-reporter": "^2.0.0",
    "mocha-multi-reporters": "^1.5.1"
  "scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run",
	"debug":"yarn cypress open",
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "davieyang",
  "license": "ISC"
然后在命令行运行yarn debug 
D:\Cypress>yarn debug
yarn run v1.22.5
$ yarn cypress open
$ D:\Cypress\node_modules\.bin\cypress open
然后点击Runs

 然后点击Connect to Dashboard==>Log In to Dashboard,弹出浏览器，选择Log in with GitHub

 然后授权即可


 如果从来没在Cypress.io上创建过Organization，则需要新创建一个

 如果已经创建过Organization，则选择合适的选项，点击Setup Project按钮即可

 然后便会得到如下提示

 根据提示修改项目的cypress.json文件 
  "projectId": "gse28o"
然后修改package.json文件，在scripts模块中添加代码 
"scripts":{
	"cy:run":"yarn cypress run",
	"debug":"yarn cypress open",
	"start":"node server.js",
	"test":"START_SERVER_AND_TEST_INSECURE=1 start-server-and-test start https-get://localhost:3002 cy:run"
	"cy:run":"cypress run --record --key cypress run --record --key a5004313-38e2-4b57-b0f6-2f7eda0c2b79"
保存并提交到Github，再次运行测试，运行完成后，通过命令执行yarn debug,再次打开Cypress Test Runner，并登录到Cypress的Dashboard，通过Cypress Dashboard Service便可以查看运行结果了，或者直接访问https://dashboard.cypress.io/test-runner-login

 结果跟在Circle CI中看到的完全一致，但是通过Dashboard Service可以看到更多细节
 
设置Cypress并行运行 
修改.circleci文件夹下的config.yml文件，在working_directory:~/app下增加parallelism:2配置项，同时更改package.json文件，加入--parallel参数 
"scripts":{
	"cy:run":"yarn cypress run",
	"debug":"yarn cypress open",
	"start":"node server.js",
	"test":"START_SERVER_AND_TEST_INSECURE=1 start-server-and-test start https-get://localhost:3002 cy:run"
	"cy:run":"cypress run --record --key cypress run --record --key a5004313-38e2-4b57-b0f6-2f7eda0c2b79 --parallel"
然后提交到Github,再次执行测试，在Dashboard上便可以查看到并行执行的结果
 Cypress还提供了分组功能，通过加标签的形式，多次运行后便可以通过标签在Dashboard中进行分组筛选，语法很简单，在运行中添加参数--group即可 
//将login模块的所有用例分为Login组
cypress run --record --group Login --spec 'cypress/integration/login//*.js'
也可以通过配置文件进行分组设置，修改package.json文件 
"scripts":{
	"ModuleRun":"node moduleRunIndex.js",
	"debug":"yarn cypress open",
	"start":"node server.js",
	"test":"START_SERVER_AND_TEST_INSECURE=1 start-server-and-test start https-get://localhost:3002 cy-run",
	"cy-run":"yarn cy:run1 && yarn cy:run2",
	"cy:run1":"yarn cypress run --record --key a5004313-38e2-4b57-b0f6-2f7eda0c2b79 --group group1 --spec \"cypress/integration/first-spec.js\" --parallel",
	"cy:run2":"yarn cypress run --record --key a5004313-38e2-4b57-b0f6-2f7eda0c2b79 --group group2 --spec \"cypress/integration/third-spec.js\" --parallel",
然后在Dashboard中便是如下结果