cypress测试脚本_GitHub - zgq346712481/cypress-web-ui: cypress-web-ui自动化测试

CRM-前端web自动化

文档

新建项目目录－－初始化－－安装依赖环境包－－cypress启动－－执行用例－－调试脚本－－查看报告

项目初始化

zgq@zgq-PC:/media/zgq/data/code/github.com/cypress/cypress-crm-web$ npm init

zgq@zgq-PC:/media/zgq/data/code/github.com/cypress/cypress-crm-web$ npm install cypress --save-dev

zgq@zgq-PC:/media/zgq/data/code/github.com/cypress/cypress-crm-web$ ./node_modules/.bin/cypress open

// cypress目录

---- fixtures 测试数据配置文件，可以使用fixture方法读取

---- integration 测试脚本文件

---- plugin 插件文件

---- support 支持文件

cypress.json // cypress全局配置文件

package.json //这个要自己创建

cypress.json　配置

{

"baseUrl": "https://staging.airwallex.com/en-AU/",

"integrationFolder": "cypress/integration",

"testFiles": "*.js",

"video":false,

"defaultCommandTimeout": 10000

"viewportHeight": 768,

"viewportWidth": 1366,

"projectId": "youlu_cypress_test_demo01",

"reporter": "cypress_test_report",

"reporterOptions": {

"reportDir": "cypresse/results",

"overwrite": false,

"html": true,

"json": true

}

package.json　配置

可以将打开cypress的命令写在package.json文件中，以后打开cypress直接运行：npm run cypress:open即可

"scripts": {

"cypress:open": "node_modules/.bin/cypress open"

}

vscode编写用例

///

describe("baidu测试",()=>{

beforeEach(()=>{

cy.visit("http://www.baidu.com")

})

it("输入查询cypress",()=>{

cy.get("#kw")

.type("cypress")

cy.get("#su")

.click()

cy.get('body').should('contain', 'cypress')

})

})

cypress管理页面实时调试(页面reload)

生成测试报告

在项目目录下，执行npm install mocha mochawesome

安装完成就可以在package.json下看到依赖包

打开cypress.json，添加生成报告的命令

{

"reporter": "mochawesome",

"reporterOptions": {

"reportDir": "cypresse/results",

"overwrite": false,

"html": true,

"json": true

}

}

执行cypress run，就可以生成所有测试用例的报告了

api-desc

describe 声明一个测试用例集

beforeEach 测试用例前置操作，相当于setup

it声明了一个测试用例

cy.get 定位元素，用css selector定位选择器

type 输入文本

should 断言，hava.value 是元素的value属性值，判断是否为‘Cypress’

clear 清空文本

should 继续断言，文本框内容为空字符串

在 GitLab CI 中运行基于 Cypress 的 e2e 测试

设计模式　page object

Application actions