4 測驗用例撰寫和組織
4.1 用例結構
? ? Cypress是建立在Mocha和Chai之上,因此同時支持Chai的BDD和TDD兩種風格,如果你熟悉JavaScript風格的代碼,那么在Cypress中寫測驗用例是很容易上手的,
Mocha是一款適用于Node.js和瀏覽器的測驗框架,可使用異步測驗變得簡單靈活,
? ? Cypress的測驗風格繼承于Mocha,提供了describe()、context()、it()、specify()四個關鍵字,對于一條可執行的測驗而言,必須包含以下兩個組成部分:
- describe()和context()等效,均表示一個測驗套件或測驗集
- it()和specify()等效,均表示一個測驗用例
? ? 示例如下所示:
describe('我是一個測驗集', () => {
it('測驗用例-1', () => {
expect(1+2).to.eq(3)
});
it('測驗用例-2', () => {
expect(3-2).to.eq(1)
});
it('測驗用例-3', () => {
expect(3*2).to.eq(5)
});
});
? ? 最終的運行結果如下所示:

4.2 Hook
? ? Hook中文常翻譯為鉤子函式,Cypress也提供了Hook(從Mocha繼承而來),這些Hook函式能夠在運行每個測驗用例或測驗集之前,做一些準備操作,也可以每個測驗用例或測驗集運行完成之后執行一些操作,示例如下所示:
/// <reference types="cypress" />
before(()=>{
// 全域Hook
// 所有用例運行行前執行,但僅執行一次
cy.log("我是全域before Hook,所有測驗用例運行前執行我,但僅執行一次")
});
beforeEach(()=>{
// 全域Hook
// 每個測驗用例運行前執行
cy.log("我是全域beforeEach Hook,每個測驗用例運行前執行我")
});
afterEach(()=>{
// 全域Hook
// 每個測驗用例運行完成后執行
cy.log("我是全域afterEach Hook,每個測驗用例運行完成后執行我")
});
after(()=>{
// 全域Hook
// 所有測驗用例運行完成后執行,但僅執行一次
cy.log("我是全域after Hook,所有測驗用例運行完成后執行,但僅執行一次")
});
describe('Test Hooks in TestSuite', () => {
before(()=>{
// 當前測驗集Hook
// 當前測驗集中,所有測驗用例運行前執行,但僅執行一次
cy.log("我是當前測驗集before Hook,所有測驗用例運行前執行我,但僅執行一次")
});
beforeEach(()=>{
// 當前測驗集Hook
// 當前測驗集中,每個測驗用例運行前執行
cy.log("我是當前測驗集beforeEach Hook,每個測驗用例運行前執行我")
});
afterEach(()=>{
// 當前測驗集Hook
// 當前測驗集中,每個測驗用例運行完成后執行
cy.log("我是當前測驗集afterEach Hook,每個測驗用例運行完成后執行我")
});
after(()=>{
// 當前測驗集Hook
// 當前測驗集中,所有測驗用例運行完成后執行,但僅執行一次
cy.log("我是當前測驗集after Hook,所有測驗用例運行完成后執行,但僅執行一次")
});
it('Test Hook in case-1', () => {
cy.log("我是測驗用例-1");
cy.visit("https://www.baidu.com/",{timeout:10000});
});
it('Test Hook in case-2', () => {
cy.log("我是測驗用例-2");
cy.visit("https://www.baidu.com/",{timeout:10000});
});
});
? ? 最終的運行結果如下所示:

? ? 從以上示例代碼可以總結出來運行順序如下所示:
- 僅在測驗開始時運行before且僅運行一次
- 任何一個用例運行前都要運行beforeEach
- 運行測驗用例
- 任何一個用例結束時都要運行afterEach
- 僅在測驗結束時運行after且僅運行一次
4.2.1 before()/after()
? ? before()是所有測驗用例的統一前置動作,而before()在一個describe()內只會執行一次,其執行順序在所有測驗用例it()之前,after()是所有測驗用例的統一后置動作,而after()在一個describe()內只會執行一次,其執行順序在所有測驗用例it()之后,示例代碼如下所示:
/// <reference types="cypress" />
describe('', () => {
let baseUrl="https://example.cypress.io/todo";
before(()=>{
cy.log("所有用例運行前執行before,僅執行一次");
});
it('測驗用例-1', () => {
cy.visit(baseUrl,{timeout:10000});
cy.get(".header input").should("have.class","new-todo");
});
it('測驗用例-2', () => {
cy.visit(baseUrl,{timeout:10000});
cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
cy.get('.todo-list li').should('have.length', 4);
});
after(()=>{
cy.log("所有用例運行完成后執行after,僅執行一次");
});
});
? ? 最終的運行結果如下所示:

4.2.2 beforeEach()/afterEach()
? ? beforeEach()是每個測驗用例執行前的前置操作,即每個用例執行前都會執行一次,一個describe()有幾個用例it()就會執行幾次,afterEach()是每個測驗用例執行后的后置操作,即每個用例執行完成后都會執行一次,一個describe()有幾個用例it()就會執行幾次,示例代碼如下所示:
/// <reference types="cypress" />
describe('', () => {
let baseUrl="https://example.cypress.io/todo";
before(()=>{
cy.log("所有用例運行前執行before,僅執行一次");
});
beforeEach(()=>{
cy.log("每個用例執行前,均會執行一次beforeEach");
cy.visit(baseUrl,{timeout:10000});
});
it('測驗用例-1', () => {
cy.get(".header input").should("have.class","new-todo");
});
it('測驗用例-2', () => {
cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
cy.get('.todo-list li').should('have.length', 4);
});
afterEach(()=>{
cy.log("每個用例執行完成后,均會執行afterEach");
});
after(()=>{
cy.log("所有用例運行完成后執行after,僅執行一次");
});
});
? ? 最終的運行結果如下所示:

4.3 包含/排隊用例
? ? 通過學習Hook,我們可以把測驗的前置和后置條件進行剝離,更好的撰寫和組織測驗用例,在實際專案中,我們也需要僅運行指定的測驗用例或跳過某些用例等,Cypress也提供相應的功能,一起來看看吧,
4.3.1 包含測驗集/測驗用例
? ? 在Cypress提供該功能的是.only(),當使用.only()指定某個測驗集/測驗用例后,僅當指定了的測驗集/測驗用例才會運行,其他未指定的測驗集/測驗用例則不會運行,示例如下所示:
- 1.僅運行指定測驗集
/// <reference types="cypress" />
describe.only('包含only', () => {
let baseUrl="https://example.cypress.io/todo";
before(()=>{
cy.log("所有用例運行前執行before,僅執行一次");
});
beforeEach(()=>{
cy.log("每個用例執行前,均會執行一次beforeEach");
cy.visit(baseUrl,{timeout:20000});
});
it('測驗用例-1', () => {
cy.get(".header input").should("have.class","new-todo");
});
it('測驗用例-2', () => {
cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
cy.get('.todo-list li').should('have.length', 4);
});
afterEach(()=>{
cy.log("每個用例執行完成后,均會執行afterEach");
});
after(()=>{
cy.log("所有用例運行完成后執行after,僅執行一次");
});
});
describe('不包含only', () => {
let tempUrl="https://www.baidu.com";
beforeEach(()=>{
cy.visit(tempUrl);
});
it('不包含only測驗用例-1', () => {
cy.get("#kw").type("Surpass{Enter}");
// cy.get("#kw").type("Surpass");
// cy.get("#su").click();
});
afterEach(()=>{
cy.log("每個用例執行完成后,均會執行afterEach");
});
});
? ? 最終的運行結果如下所示:

- 2.僅運行指定測驗用例
describe.only('包含only', () => {
let baseUrl="https://example.cypress.io/todo";
before(()=>{
cy.log("所有用例運行前執行before,僅執行一次");
});
beforeEach(()=>{
cy.log("每個用例執行前,均會執行一次beforeEach");
cy.visit(baseUrl,{timeout:20000});
});
it('測驗用例-1', () => {
cy.get(".header input").should("have.class","new-todo");
});
it.only('測驗用例-2', () => {
cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
cy.get('.todo-list li').should('have.length', 4);
});
afterEach(()=>{
cy.log("每個用例執行完成后,均會執行afterEach");
});
after(()=>{
cy.log("所有用例運行完成后執行after,僅執行一次");
});
});
? ? 最終的運行結果如下所示:

4.3.2 排除測驗集/測驗用例
? ? 在Cypress提供該功能的是.skip(),當使用.skip()指定某個測驗集/測驗用例后,則不會運行該測驗集/測驗用例,其他未指定的測驗集/測驗用例則會運行,示例如下所示:
- 1.排除指定測驗集
/// <reference types="cypress" />
describe('包含only', () => {
let baseUrl="https://example.cypress.io/todo";
before(()=>{
cy.log("所有用例運行前執行before,僅執行一次");
});
beforeEach(()=>{
cy.log("每個用例執行前,均會執行一次beforeEach");
cy.visit(baseUrl,{timeout:20000});
});
it('測驗用例-1', () => {
cy.get(".header input").should("have.class","new-todo");
});
it.only('測驗用例-2', () => {
cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
cy.get('.todo-list li').should('have.length', 4);
});
afterEach(()=>{
cy.log("每個用例執行完成后,均會執行afterEach");
});
after(()=>{
cy.log("所有用例運行完成后執行after,僅執行一次");
});
});
describe.skip('不包含only', () => {
let tempUrl="https://www.baidu.com";
beforeEach(()=>{
cy.visit(tempUrl);
});
it('不包含only測驗用例-1', () => {
cy.get("#kw").type("Surpass{Enter}");
// cy.get("#kw").type("Surpass");
// cy.get("#su").click();
});
afterEach(()=>{
cy.log("每個用例執行完成后,均會執行afterEach");
});
});
? ? 最終的運行結果如下所示:

- 2.排除指定測驗用例
describe('頂層測驗集', () => {
let baseUrl="https://example.cypress.io/todo";
before(()=>{
cy.log("所有用例運行前執行before,僅執行一次");
});
beforeEach(()=>{
cy.log("每個用例執行前,均會執行一次beforeEach");
cy.visit(baseUrl,{timeout:20000});
});
it('測驗用例-1', () => {
cy.get(".header input").should("have.class","new-todo");
});
it.skip('測驗用例-2', () => {
cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
cy.get('.todo-list li').should('have.length', 4);
});
describe.skip('嵌套測驗集', () => {
it('嵌套測驗集用例-1', () => {
cy.log("測驗嵌套用例集");
});
});
afterEach(()=>{
cy.log("每個用例執行完成后,均會執行afterEach");
});
after(()=>{
cy.log("所有用例運行完成后執行after,僅執行一次");
});
});
? ? 最終的運行結果如下所示:

從上面示例中可以看出,標記為被排除的測驗集后,則該測驗集所有測驗用例均不被執行
? ? 在實際專案中,only()和skip()通常是結合著使用,這時我們要先看標記describe的是skip()還是only(),其規則如下所示:
- 如果先標記describe的是skip(),則整個測驗用例集都將被排除,不執行
- 如果先標記describe的是only(),若該用例集下,沒有任何標記skip的用例,則所有用例都將運行
- 如果先標記describe的是only(),若該用例集下,如果有標記only的用例,則將僅運行標記了only的用例
- 如果describe和it均沒有skip/only,則默認運行所有測驗集或用例
4.4 動態執行測驗用例
? ? 前面學習如何排除和執行指定測驗集/測驗用例,但在一些實際專案中,在執行用例的時候,會根據某一個條件來動態執行測驗用例,為了解決這個問題,Cyrpess也提供相應的功能,通過更改相應的測驗配置來支持,其語法格式如下所示:
describe(name, config, fn)
context(name, config, fn)
it(name, config, fn)
specify(name, config, fn)
部分配置引數為只讀,不支持修改,可參考官網:https://docs.cypress.io/guides/references/configuration##Test-Configuration
- 1.測驗用例集配置
? ? 示例代碼如下所示:
/// <reference types="cypress" />
describe('When not in Chrome',{browser:"!chrome"}, () => {
let baseUrl="https://example.cypress.io/todo";
it.only('Show warnings', () => {
cy.visit(baseUrl,{timeout:20000});
cy.get(".header input").should("have.class","new-todo");
});
it.only('測驗用例-2', () => {
cy.visit(baseUrl,{timeout:20000});
cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
cy.get('.todo-list li').should('have.length', 4);
});
});
? ? 在Chrome中運行時其結果如下所示:

? ? 下面的示例,將僅運行在指定的瀏覽器中,且指定的解析度和環境變數將覆寫默認的值,如下所示:
/// <reference types="cypress" />
describe('When in Chrome',
{
browser:"chrome",
viewportWidth: 800,
viewportHeight: 600,
env: {
flag: true,
url: "https://www.surpassme.com",
},
},
() => {
let baseUrl="https://example.cypress.io/todo";
it.only('Show warnings', () => {
cy.visit(baseUrl,{timeout:20000});
cy.get(".header input").should("have.class","new-todo");
});
it.only('測驗用例-2', () => {
cy.visit(baseUrl,{timeout:20000});
cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
cy.get('.todo-list li').should('have.length', 4);
});
});
? ? 運行時其結果如下所示:

- 2.單個測驗用例配置
? ? 示例代碼如下所示:
/// <reference types="cypress" />
describe('When in Chrome', () => {
let baseUrl="https://example.cypress.io/todo";
it.only('Show warnings',
{
retries: {
runMode: 3,
openMode: 2
}
},
() => {
cy.visit(baseUrl,{timeout:20000});
cy.get(".header input").should("have.class","new-todo");
});
it.only('測驗用例-2', () => {
cy.visit(baseUrl,{timeout:20000});
cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
cy.get('.todo-list li').should('have.length', 4);
});
});
4.5 動態生成測驗用例
? ? 在實際專案中,會遇到一種情況,就是多個用例的操作步驟、斷言均一樣,僅是輸入和輸出不一樣,如果我還是一條資料寫一個用例,則效率會非常低,此時,我們可以利用Cypress動態生成測驗用例來高效完成,我們以登錄為例,如下所示:
- 1.創建一個postdata.json格式的資料檔案
[
{
"title": "測驗資料-1",
"customerName": "Surpass",
"telephone": "18812345678",
"email":"[email protected]"
},
{
"title": "測驗資料-2",
"customerName": "kevin",
"telephone": "17808231169",
"email":"[email protected]"
}
]
- 2.創建測驗用例
/// <reference types="cypress" />
import data from "./postdata.json"
describe("測驗發送資料", () => {
let baseUrl="http://httpbin.org/forms/post";
beforeEach(()=>{
cy.visit(baseUrl)
});
data.forEach( item => {
it(item.title, () => {
cy.log(item.title,item.customerName,item.telephone)
cy.get(":nth-child(1) > label > input").type(item.customerName).should("contain.value",item.customerName);
cy.get("form > :nth-child(2) > label > input").type(item.telephone).should("contain.value",item.telephone);
cy.get("form > :nth-child(3) > label > input").type(item.email).should("contain.value",item.email);
});
})
})
? ? 運行時其結果如下所示:

如果大家對資料驅動比較了解的話,從上面的示例可以看到,是不是非常像?其最大價值為測驗資料更改時,不影響測驗代碼,
4.6 斷言風格
? ? Cypress支持兩種風格的斷言BDD (expect/should) 和TDD (assert),以下列舉常見的斷言:
- 1、針對長度(Length)的斷言
cy.get('.todo-list li').should('have.length', 4);
- 2、針對類(Class)的斷言
cy.get("form").find("input").should("not.have.class","surpass");
- 3、針對值(Value)的斷言
cy.get("form > :nth-child(3) > label > input").should("contain.value","Surpass");
- 4、針對文本內容(Text)的斷言
cy.get("button").should("contain.text","Submit order");
// 或
cy.get("button").should("not.contain","Surpass");
- 5、針對元素是否可見(Visible)的斷言
cy.get("button").should("be.visible");
- 6、判斷元素是否存在的斷言
cy.get("button").should("not.exist");
- 7、判斷元素狀態(State)的斷言
cy.get(":nth-child(4) > :nth-child(2) > label > input").click().should("be.checked");
- 8、針對CSS的斷言
cy.get(".surpass").should("have.css","line-surpass");
4.7 運行測驗用例
4.7.1 運行單個用例
? ? 運行單個測驗用例,可以獲得到更好的性能,在Test Runner界面,點擊單個JS檔案即可,其操作方法如下所示:

4.7.2 運行所有用例
? ? 運行所有測驗用例,可以在Test Runner中單擊運行Run x integration specs

4.7.3 運行部分用例
? ? 可以通過篩選從而僅運行符合篩選條件的用例,

篩選條件中忽略大小寫
4.8 測驗運行狀態
? ? 在Cypress中,測驗用例的運行狀態可以分為4種狀態:通過(Passed)、失敗(Failed)、等待(Pending)、跳過(Skipped),
4.8.1 Passed
? ? Passed表示測驗用例的運行狀態為通過,沒有出現斷言失敗的情況,如下所示:

4.8.2 Failed
? ? Failed表示測驗用例的運行狀態為失敗,有出現斷言失敗的情況,如下所示:

4.8.3 Pending
? ? 當一個測驗用例沒有想好怎么寫時,我們可以寫一些占位性質的用例,雖然Cypress不會運行,但卻會讓后續的用例狀態處于Pending狀態,如下所示:
/// <reference types="cypress" />
describe('測驗Pending場景', () => {
it('未完成的測驗用例')
it.skip('已經完成的用例', () => {
let url="http://httpbin.org/forms/post";
let customerName="Surpass",telephone="18812345678",email="[email protected]",textMsg="I Love Surpass",buttonText="Submit order";
cy.visit(url,{timeout:10000});
cy.get(":nth-child(1) > label > input").type(customerName).should("contain.value",customerName);
cy.get("form > :nth-child(2) > label > input").type(telephone).should("contain.value",telephone);
cy.get("form > :nth-child(3) > label > input").type(email).should("contain.value",email);
cy.get("textarea").type(textMsg).should("contain.value",textMsg);
cy.get("button").should("contain.text",buttonText)
});
xit("另一種測驗用例",()=>{
expect(false).to.true;
});
});
? ? 運行時其結果如下所示:

? ? 以上三種情況的用例均會標識為Pending狀態
如果用例撰寫人員故意使用以上三種方式中的其中一種方式來跳過執行用例,則Cypress將視為Pending Test
4.8.4 Skipped
? ? 當一個測驗用例本來要執行,但卻因為某些原因而未能運行,則Cypress會將該用例的運行狀態視為Skipped,我們在一個測驗集里面添加beforeEach(),示例代碼如下所示:
/// <reference types="cypress" />
describe('測驗用例狀態為Skipped場景', () => {
let baseUrl="https://example.cypress.io/todo";
beforeEach(()=>{
cy.visit(baseUrl);
});
it('hides footer initially', () => {
cy.get('.filters').should('be.exist');
});
it('adds 2 todos', () => {
cy.get('.new-todo').type('learn testing{enter}').type('be cool{enter}');
cy.get('.todo-list li').should('have.length', 4);
})
});
? ? 以上這種情況,所有測驗用例能順利執行并通過,如下所示:

? ? 我們修改以上代碼,讓beforeEach()訪問的地址不存在,再來看看,如下所示:
/// <reference types="cypress" />
describe('測驗用例狀態為Skipped場景', () => {
let baseUrl="https://example.cypress.io/todo";
beforeEach(()=>{
cy.visit(baseUrl+"/does-not-exist");
});
it('hides footer initially', () => {
cy.get('.filters').should('be.exist');
});
it('adds 2 todos', () => {
cy.get('.new-todo').type('learn testing{enter}').type('be cool{enter}');
cy.get('.todo-list li').should('have.length', 4);
})
});
? ? 運行結果如下所示:

在上述示例代碼中,用例adds 2 todos本來想運行,但卻因為beforeEach出現問題,而未能運行,最終被標識為Skipped,
4.9 Test Runner簡介
? ? 我們先來看看Test Runner的截圖如下所示:

? ? Cypress自帶的Test Runner功能非常強大,允許在測驗運行期間查看測驗命令的執行情況,并監控在命令執行時,被測驗程式所處的狀態,其組成部分如下所示:
- 1.測驗狀態目錄
? ? 在上圖標識為1的區域,用于展示測驗用例運行成功、失敗的數量、運行時間、禁用自動滾動和重新運行按鈕等
- 2.運行命令日志
? ? 在上圖標識為2的區域,用于記錄每個執行的命令,滑鼠單擊,可以在應用程式預覽(標識為5的區域)中查看其對應的元素及其執行詳細資訊,
- 3.元素定位輔助器
? ? 在上圖標識為3的區域,通過該功能可以快速定位元素,如下所示:

- 4.URL預覽欄
? ? 在上圖標識為4的區域,通過URL預覽欄,可以查看被測驗程式運行進所對應的URL地址,
- 5.應用程式預覽
? ? 在上圖標識為5的區域,通過應用程式預覽視窗,可以展示應用程式在測驗運行中的實時狀態
- 6.視窗大小視窗
? ? 在上圖標識為6的區域,通過視窗大小可以了解當前應用程式運行時的視窗大小,如下所示:

原文地址:https://www.jianshu.com/p/203049b059f4
本文同步在微信訂閱號上發布,如各位小伙伴們喜歡我的文章,也可以關注我的微信訂閱號:woaitest,或掃描下面的二維碼添加關注:

作者: Surpassme
來源: http://www.jianshu.com/u/28161b7c9995/
http://www.cnblogs.com/surpassme/
宣告:本文著作權歸作者所有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出 原文鏈接 ,否則保留追究法律責任的權利,如有問題,可發送郵件 聯系,讓我們尊重原創者著作權,共同營造良好的IT朋友圈,
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/505963.html
標籤:其他
