从0开始学习自动化测试框架cypress总结

Posted 2022-12-01 svygh123

一.下载环境: cypress.zip解压运行examples或npm install cypress

 

二.简单使用

 

1.常用文件夹

 

fixtures: 保存json文件

 

integration: 保存编写的测试用例,一般使用.spec.js为结尾

 

support: 支持添加cy内置函数

         Cypress.Commands.add("funName", () => ... )

         调用: cy.funName()

 

2.常用的命令

cy.request : ajax请求

语法
cy.request(url)
cy.request(url, body)
cy.request(method, url)
cy.request(method, url, body)
cy.request(options)

例子
cy.request('login')
cy.request(
  method: 'POST',
  url: 'login', // baseUrl已经设置
  form: true,   // 默认设置headers=application/x-www-form-urlencoded
  body: 
    username: 'user1',
    password: 'pwd123'
  ,
  encoding: 'base64' // 可设置base64提交
).should((response)=>
  expect(response).property('status').to.equal(200)
  
  // 后台自定义返回
  // var body = JSON.parse(response.body)
  // expect(body).property('code').to.equal(200)
)

cy.visit : 访问页面

语法
cy.visit(url)
cy.visit(url, options)
cy.visit(options)

例子
visit('https://www.baidu.com')

cy.get : 获取页面元素

语法
cy.get(selector)
cy.get(alias)
cy.get(selector, options)
cy.get(alias, options)

例子
cy.get('.list > li')
// 根据别名获取  .as(aliasName): 设置别名
cy.get('ul#todos').as('todos')
cy.get('@todos')

.type : 输入文本或按键

语法
.type(text)
.type(text, options)

例子
cy.get('input[name=username]').type('test')

.click() : 单击

语法
.click()
.click(options)
.click(position)
.click(position, options)
.click(x, y)
.click(x, y, options)

例子
cy.get('input[type=submit]').click()

.dblclick() : 双击

语法
.dblclick()
.dblclick(options)
.dblclick(position)
.dblclick(position, options)
.dblclick(x, y)
.dblclick(x, y, options)

例子
cy.get('input[type=submit]').dblclick()

.contains : 是否包含文本

语法
.contains(content)
.contains(content, options)
.contains(selector, content)
.contains(selector, content, options)

// 或者

cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)

例子
cy.get('form').contains('登陆')
cy.get('form').contains('div', '登陆')
cy.contains('登陆').click()
cy.contains('form', '登陆') // document的form是否包含文本

.wait : 等待

语法
cy.wait(time)
cy.wait(alias)
cy.wait(aliases)
cy.wait(time, options)
cy.wait(alias, options)
cy.wait(aliases, options)

例子
cy.wait(500)
cy.wait('@getProfile')

.skip : 忽略测试用例

例子
it.skip('',()=>...)

.only : 只运行当前测试用例

例子
it.only('',()=>...)

.debug : 调试

语法
.debug()
.debug(options)

// 或者

cy.debug()
cy.debug(options)

例子
cy.get('a').debug().should('have.attr', 'href')

.pause : 暂停,相当于调试

语法
.pause()
.pause(options)

// 或者

cy.pause()
cy.pause(options)

例子
cy.pause()

3.配置文件cypress.json

    "baseUrl": "http://localhost:8080/nocode",
    "env": 
        "login_url": "login.jsp"
    

* baseUrl: 配置前缀路径,如果没有http开头,则自动寻找baseUrl配置的前缀自动加上

cy.visit('login.jsp')
cy.request(
    'url': 'userList'
)

* env: 环境变量  

Cypress.env('login_url')

4.联合测试

 

* 有登陆的地方,建议将登陆放在cy.before里面执行

 

* 每个用例都要登陆时,建议将登陆放在cy.beforeEach里面执行

 

* 相应的钩子函数有after和afterEach,酌情使用即可

 

*****如果上下文需要存储变量,需要做特殊处理,因为每个测试用例都会清除localStorage, 我们要自己保存处理, 代码如下

// 定义一个存储变量,来存储localStorage
let LOCAL_STORAGE_MEMORY = ;

Cypress.Commands.add("saveLocalStorage", () => 
  Object.keys(localStorage).forEach(key => 
    LOCAL_STORAGE_MEMORY[key] = localStorage[key];
  );
);

Cypress.Commands.add("restoreLocalStorage", () => 
  Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => 
    localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
  );
);

在每个测试用例开始前回复localStorage
在每个测试用例结束后保存localStorage

beforeEach(() => 
  cy.restoreLocalStorage();
);

afterEach(() => 
  cy.saveLocalStorage();
);

(本篇就到这)

获取最新资讯,欢迎关注公众号: 软件开发与技术设计(SoftwareDesigner)