标签:data cypress json js cy 使用 安装 channel
官方文档:https://docs.cypress.io/guides/getting-started/installing-cypress
结合git代码运行项目
1.cd到指定目录路径,git clone 代码下来(eg我的路径是sy_cypress下)//没有的话忽略gitclone这一步
2.根目录下cmd,输入命令安装cypress:npm install cypress --save-dev
运行
安装路径根目录下输入指令:npx cypress open
选择E2E,等待自动配置
选择浏览器
使用编辑器(pycharm/vscode)打开git项目代码,可编辑修改内容
执行测试用例:spec 标签下点击js文件即可运行
目录层级解析:
│ cypress.config.js #配置文件,可配置基础域名,超时时间等
│ package-lock.json
│ package.json
│ yarn-error.log
│
├─cypress
│ ├─e2e
│ │ │
│ │ └─xmp_fe###########################存放用例,js文件后缀即可
│ │ └─ads_manage
│ │ facebook_edit_budget.cy.js
│ │ facebook_edit_status.cy.js
│ │ facebook_template_create.cy.js
│ │
│ ├─fixtures#############################mock接口返回的内容存放
│ │ example.json
│ │ login.json
│ │ profile.json
│ │ users.json
│ │
│ │
│ ├─support
│ │ commands.js##方法定义,一些步骤封装如登陆,可在用例中用cy.方法名调用
│ │ e2e.js
│ │ index.js
│ │
|
常用示例
//js文件
//这是一个用例集 describe('验证facebook模板创建', function () {
const channel = 'facebook' const username = '[email protected]' const password = '12345678'
context(`验证${channel}模板创建`, function () {
// 在所有用例执行之前登录系统 beforeEach(() => { cy.login_abc(username, password) //login_abc定义在command文件,下同 }) //这是一个用例 it(`${channel}普通应用模板创建`, function () { cy.open_create(channel) cy.read_template(channel,"应用推广+默认选项+自定义创意") }) }) })
|
//command文件,步骤和校验封装定义
//获取页面元素、点击、输入、等待、常用校验should
Cypress.Commands.add('read_template', (channel, template_name) => { cy.log(`读取${channel}模板`) // 点击选择模板 cy.get('[data-test-id=\'button_select_tpl\']').click() // 搜索模板并等待查询结果 cy.get('[data-test-id=\'input_search_tpl\']').type(template_name) cy.wait(2000) // 选中模板并确认 cy.get('[data-test-id=\'ratio_select_tpl\'] .input-box-circle').click() cy.get('[data-test-id=\'button_confirm_tpl\']').click() // 提交预览 cy.wait(5000) //force:true会强制操作命令的发生,避开前面的所有检查,只要页面元素存在即可操作,跟鼠标操作等无关,比如需要hover才出现的元素 cy.get('[data-test-id=\'button_submit_draft\']').click({force:true}) // 验证跳转到预览页 cy.get('.flex-table-body .flex-table-tr .flex-table-row .flex-table-col:nth-child(3) div').should("contain","自动化") cy.wait(2000) cy.url( ).should('include', 'http://www.abc.com/ads_create/facebook/publish') // 点击返回上一步 cy.get('[data-test-id=\'button_return\']').click({force:true}) // 验证回到创建页 cy.url( ).should('include', 'http://www.abc.com/ads_create/facebook/edit') })
|
//command文件,步骤和校验封装定义
//拦截接口校验返回的写法
Cypress.Commands.add('open_create', (channel) => { cy.log(`打开${channel}创建广告页面`) //注册一个想校验的接口,命名 cy.intercept('GET', '/adcreate/draft/read?module=facebook').as('getdraft') let create_url = '/ads_create/' + channel + '/edit' //触发接口调用 cy.visit(create_url) //等待捕捉到符合的接口进行校验 cy.wait('@getdraft').then((interception) => { const today = new Date().toISOString().slice(0, 10) expect(interception.response.statusCode).to.eq(200) expect(interception.response.body.code).to.eq(0) //其他校验写法 assert.isNotEmpty(interception.response.body.data,"data can't be empty") }) //另一种校验写法 //cy.wait('@getdraft').its('response.statusCode').should('eq',200) //cy.wait('@getdraft').its('request.body.data').should('have.property', 'draft_campaign') })
|
//mock接口返回的几种方式 1.该接口会以fixtures目录下的users.json的内容返回 cy.intercept('/users.json', { fixture: 'users.json' }) 2.定义内容作为返回 const staticResponse = {delayMs:2000,延迟20s返回} cy.intercept('/projects', staticResponse) 3.直接修改相应内容 cy.intercept('/projects',(req)=>{ req.reply({code:0})}) as ('sample')
//接口请求前修改参数 cy.intercept('/req-headers', (req) => { req.headers['x-custom-headers'] = 'added by cy.intercept' }).as('headers') 发起请求步骤 cy.wait校验
|
tips:
config文件e2e下加配置:
testIsolation: false
可避免多个用例连续执行时,第一个用例执行后出现空白页面导致获第二个用例获取不到元素,不需每个用例都从登陆开始
标签:data,
cypress,
json,
js,
cy,
使用,
安装,
channel
From: https://www.cnblogs.com/yellowbean/p/17435570.html