技術標籤：jshtmlJava學習自動化測試軟體測試單元測試整合測試測試工具

一.下載環境: 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)