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的區域，用於展示測試用例運行成功、失敗的數量、運行時間、禁用自動滾動和重新運行按鈕等

2.運行命令日誌

在上圖標識爲2的區域，用於記錄每個執行的命令。鼠標單擊，可以在應用程序預覽（標識爲5的區域）中查看其對應的元素及其執行詳細信息。

3.元素定位輔助器

在上圖標識爲3的區域，通過該功能可以快速定位元素。如下所示：

4.URL預覽欄

在上圖標識爲4的區域，通過URL預覽欄，可以查看被測試程序運行進所對應的URL地址。

5.應用程序預覽

在上圖標識爲5的區域，通過應用程序預覽窗口，可以展示應用程序在測試運行中的實時狀態

6.視窗大小窗口

在上圖標識爲6的區域，通過視窗大小可以瞭解當前應用程序運行時的視窗大小。如下所示：

原文地址：https://www.jianshu.com/p/203049b059f4

本文同步在微信訂閱號上發佈，如各位小夥伴們喜歡我的文章，也可以關注我的微信訂閱號：woaitest，或掃描下面的二維碼添加關注：

WEB自動化-04-Cypress 測試用例編寫和組織

4 測試用例編寫和組織

4.1 用例結構

4.2 Hook

4.2.1 before()/after()

4.2.2 beforeEach()/afterEach()

4.3 包含/排隊用例

4.3.1 包含測試集/測試用例

4.3.2 排除測試集/測試用例

4.4 動態執行測試用例

4.5 動態生成測試用例

4.6 斷言風格

4.7 運行測試用例

4.7.1 運行單個用例

4.7.2 運行所有用例

4.7.3 運行部分用例

4.8 測試運行狀態

4.8.1 Passed

4.8.2 Failed

4.8.3 Pending

4.8.4 Skipped

4.9 Test Runner簡介

自學編程兩個月，現在我月入 4 萬元

Google Chrome驅動程序 124.0.6367.62（正式版本）去哪下載？

Jenkins實踐指南-11-Jenkins 其他功能

Jenkins實踐指南-10-Jenkins 插件

Jenkins實踐指南-09-pipeline 擴展

Jenkins實踐指南-08-Jenkins 憑證管理

Jenkins實踐指南-07-pipeline 內置基礎步驟

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結