首页 > 其他分享 >cypress安装与使用

cypress安装与使用

时间:2023-05-26 18:56:53浏览次数:48  
标签: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

相关文章

  • 【笔记】macbook m2 芯片中使用 gcc docker 镜像来交叉编译
    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢!cnblogs博客zhihuGithub公众号:一本正经的瞎扯一个c程序,如何在macbookm2芯片的笔记本上,编译成linuxamd64的二进制格式呢?用gcc的docker镜像轻松的解决了这个问题:#下载gcc镜像,并且是linuxamd64......
  • C#异步编程概念和使用
    异步编程要搞懂3个概念async、Task、await;async修饰符指明方法为异步方法;Task是异步方法返回类型;await是运算符,用来等待异步方法完成;当在异步方法中调用异步方法(理解为启动任务),可以在合适的时机等待任务完成,然后再使用返回的结果,这就是异步编程的优势,可以在一个过程中执行多......
  • 源码安装mysql
    前言1.在下面网站找到需要安装的mysql版本https://downloads.mysql.com/archives/community/注意要选择的操作系统为linux-generic2.kafka安装方式链接有空可测试下:https://blog.csdn.net/m0_46192647/article/details/123424090一.mysql部署systemctlstopfirewalld&&s......
  • 使用minio进行文件存储
    一.Docker拉取镜像(确保自己的服务器已经安装Docker)dockerpullminio/minio二.启动一个miniio容器dockerrun--nameminio-p9090:9000-p9999:9999-d\--restart=always-e\"MINIO_ROOT_USER=minio"\-e"MINIO_ROOT_PASSWORD=minio123"\-v/home/minio/......
  • Ubuntu命令终端查看使用过的命令
    使用history命令cyf@ubuntu:~$history但是这样会显示出所有使用过的命令,可以在history后加上lesscyf@ubuntu:~$history|less会显示出类似vim编辑器的形式,再使用类vim中的操作,查找使用过的命令:/sed//查找使用过的sed相关的命令也可以直接使用grep进行过滤cyf@ubuntu......
  • 使用 PostMessage 函数来发送带有 std::vector 作为参数的消息
    使用PostMessage函数来发送带有std::vector作为参数的消息,您可以将std::vector的地址封装进LPARAM类型的指针中,并将其传递给PostMessage函数的lParam参数。在接收方,您需要使用reinterpret_cast将LPARAM转换回std::vector的指针,然后使用它来访问std::vector。下......
  • 使用卷积神经网络实现影评数据的分类
    一、实验目的熟悉循环神经网络在文本分析和分类上的应用 二、实验原理或实验内容从keras的数据集中加载影评数据,注意需要填充(截断)数据,并转成数组的形式。构建一个神经网络模型,要求使用词嵌入和循环层,并使用划分好的训练集数据训练模型,使用划分好的测试集的数据验证模型,训练......
  • docker 安装elasticsearch7.9 和 SkyWalkin
    1、相关地址:官网:https://skywalking.apache.org/下载:https://skywalking.apache.org/downloads/Github:https://github.com/apache/skywalking文档:https://skywalking.apache.org/docs/main/v9.1.0/readme/ 其他版本文档,先进https://skywalking.apache.org/docs/main/,选择版本,查......
  • 总结MySQL 的一些知识点:MySQL 连接的使用
    MySQL连接的使用在前几章节中,我们已经学会了如何在一张表中读取数据,这是相对简单的,但是在真正的应用中经常需要从多个数据表中读取数据。本章节我们将向大家介绍如何使用MySQL的JOIN在两个或多个表中查询数据。你可以在SELECT,UPDATE和DELETE语句中使用Mysql的JOI......
  • 论文解读 | IROS 2022:MV6D:在RGB-D图像上使用深度逐点投票网络进行多视角6D姿态估计
    原创|文BFT机器人01 研究背景在计算机视觉领域,6D姿态估计是一种重要的任务,用于确定物体在3D空间中的位置和方向。它在许多应用领域具有广泛的应用,如机器人操作、虚拟现实、增强现实、物体跟踪等。然而,传统的6D姿态估计方法存在一些限制。这些方法通常只使用单个视角的相机数据......