Cypress学习

最新推荐文章于 2024-09-06 19:49:15 发布

千里の行

最新推荐文章于 2024-09-06 19:49:15 发布

阅读量675

点赞数

分类专栏： cypress 文章标签：其他经验分享

本文链接：https://blog.csdn.net/lxzi101410/article/details/122316847

版权

cypress 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

最近在学习Cypress中，记录下学习过程

环境设置

安装nodejs，官网下载默认选择安装即可
新建一个文件夹，打开cmd进入文件夹的位置或者按住shift右击打开powershell，输入安装命令。
```
npm init -y
npm install cypress --save-dev
```
第一个命令初始化，-y是全部默认
第二个命令是安装，默认安装cypress到路径 C:\Users{user}\AppData\Local\Cypress。
后半部分 --save-dev，是在当前文件夹下生成node_modules文件夹，里面包含cypress和其他需要用到的环境
启动cypress，可以生成cypress的结构
1). 编辑项目目录下package.json，加上下面一段，然后在cmd或powershell里输入npm run cyopen。点击UI上js的链接，即可执行对应代码
```
	"scripts":{
	 "cyopen":"cypress open"
	}
```
2). 不配置package.json，也可输入命令 npx cypress open
3). 不配置package.json， powershell上输入 .\node_modules.bin\cypress open

Cypress官方文档
Github: https://github.com/cypress-io/cypress
doc: https://docs.cypress.io/guides/overview/why-cypress?utm_medium=Nav&utm_campaign=Docs&utm_source=Test%20Runner
api: https://docs.cypress.io/api/table-of-contents

默认Cypress结构
在这里插入图片描述

cypress.json
cypress的配置，可以配置一些全局参数，测试用例中调用
package.json , pack-lock.json
各种package信息
cypress文件夹
主要的项目文件夹，参考官方文档。另外测试过程中，可能生成downloads，videos，screenshots文件夹。

参考https://www.cnblogs.com/memebuguoshixingfu/p/11810586.html

Cypress Case的写法
下面是个简单的例子，打开百度，搜索Cypress.io。

脚本的主题结构跟protractor一样，在describe里面多个it，每个it相当于测试的一个step。describe 和 it都有描述。
使用require或者from…import形式调用其他脚本或数据
函数声明可以用function(){}，也可以用()=>{}的形式

const data = require('../fixtures/data.json')
import dataText from '../fixtures/data.json'
var url = data.url;
let text = dataText.searchText;
describe("Test search in Baidu", function(){
    beforeAll(function(){
        //访问url
        cy.visit(url)
    })

    it("Find the search box", function(){
        cy.get("#kw").type(text)
            .should("have.value",text)
        cy.get("#su").click()
    })

    it("Search url", ()=>{
        cy.url()
            .should("have.string",text)
    })

})

Cypress运行
输入npx cypress open或者npm run cyopen之后，打开cypress的UI，其中：
Tests:是case的位置，默认是intergration下面所有的case(js文件)
Runs:需要登录，是Cypress的dashboard，显示测试结果
Settings:是一些设置
右侧可以选中在哪个浏览器上运行，会自动检测当前OS安装的浏览器和electron浏览器，electro是cypress自带的基于Chromium的浏览器。
Cypress UI
直接点击某个js文件，会打开指定浏览器，运行对应的case，效果如下。左侧导航栏可以看到执行过程进度pass fail skip的步骤，右侧显示页面执行效果。
tips: 如果代码中有console.log()，内容会打印到当前inspect的console中。js文件改动内容保存后，脚本会在这里自动重新运行一遍。
run cypress case
经常用到的方法

访问某个网址，cy.visit 或者 cy.request。当在cypress.json里面定义baseUrl后，访问时可去掉url

cy.visit('https://www.baidu.com')
//cypress中配置baseUrl为 https://www.baidu.com时，下面两个等价
cy.visit("/") 
cy.visit("https://www.baidu.com/")

cy.visit('http://localhost:8080/app')
cy.request('users/1.json') //  URL is http://localhost:8080/users/1.json

元素定位cy.get

//用class属性定位
cy.get('.dropdown-menu').click()
//用id属性定位
cy.get('#foo').click()
//ul下的第一个li
cy.get('ul li:first').should('have.class', 'active')
//根据特定属性或加上标签定位元素
cy.get('[data-test-id="test-example"]').should('have.length', 5)
cy.get('a[href*="questions"]').click()
cy.get('[id^=local-][id$=-remote]') //以local-开头，-remote结尾的id来定位元素
//特殊字符 . : 转义
cy.get('#id\\.\\.\\.1234')

拦截验证request请求，使用cy.intecept，测试network request。

cy.intercept(
  {
    method: 'GET', // Route all GET requests
    url: '/users/*', // that have a URL that matches '/users/*'
  },
  [] // and force the response to be: []
).as('getUsers') // and assign an alias