這篇會介紹 Cypress 的安裝和使用方法！

version 10.3.1

目錄

安裝

官方文件

% npm install cypress --save-dev

安裝後就能看到 cypress 目錄了

開啟環境

% npx cypress open

• 之後會出現下面的視窗，有 E2E Testing 和 Component Testing 兩種測試方法

  • E2E Testing：模擬使用者使用網站
  • Component Testing：檢查程式碼中元件的問題

• 再點選其中一個瀏覽器就能打開 Cypress 的測試環境了

  

• 進入瀏覽器後可以看到 cypress 中所有的測試檔案

  

• 點選測試檔進去後就會開始執行測試，右邊的畫面可以看到實際測試網頁的過程

  

目錄架構

• support：寫自定義方法，類似函式

  • e2e.js：support 目錄的 root

  • 目前寫好的函式結構：

    • commands.js：Login/Logout
    • formActions.js：對表單會使用到的基本操作
    • baseAction.js：對基本動作(ex:click,type…)加上 {force:true}

  • 操作方法

    //In /support
    
    Cypress.Commands.add('Login', (data) => {
      cy.visit('http://localhost:8080')
      cy.get('input[placeholder="請填入帳號"]')
        .type(data.account)
      cy.get('input[placeholder="請填入密碼"]')
        .type(data.password)
      cy.get('button')
        .contains('Login')
        .click()
    });
    
    //In /e2e
    cy.Login({account:'admin', password:'admin123!'})
    

• fixtures：存放測試資料，json 格式

  和其對應的函式: cy.fixture()

• e2e：存放測試腳本

  檔案格式都是 .cy.js 結尾

腳本主架構

describe('My First Test', ()=>{
    before(()=>{...});
    beforeEach(()=>{...});

    describe('My First Test', ()=>{

    })

    it('Login', ()=>{
        context('', ()=>){
                
        })
    });
    it('', ()=>{...});
    .
    .
    .
    it('', ()=>{...});
    it('', ()=>{...});

    after(()=>{...});
    afterEach(()=>{...});
})

• it(): 撰寫測試內容的地方，會把瀏覽器資料清空

• 測試以外的內容

  比較	before	beforeEach	afterEach	after
  執行順序	1	2	3	4
  執行時間	it()前	it()前	it()後	it()後
  執行次數	一次	it()次數決定跑幾次	it()次數決定跑幾次	一次

• describe()和context() 功能是一樣的，裡面可以包很多小測試檔，可視為一個測試的群組，這兩個要放哪都可以

指令

官方文件 每句指令前面都會加上"cy."

• 每行指令(cy.開頭)抓取的元素都是獨立的，寫到下一行就會重新抓取元素

  // 如果想在 input 中輸入 admin
  
  // Correct
  cy.get('input[placeholder="請填入帳號"]').type("admin")
  
  // Wrong
  cy.get('input[placeholder="請填入帳號"]')
  cy.type("admin")
  

• cy.visit(): 造訪網頁

  cy.visit('http://10.40.192.174:8080')
  

• cy.get(): 抓取DOM元素

  通常是取元素的 ID 或 Class 去取得元素，但如果兩者都沒有，也可以使用只有該元素具有的特徵來抓取

  cy.get('#main')//抓取 ID 為 main 的元素
  cy.get('.btn1')//抓取 Class 為 btn1 的元素
  cy.get('input[placeholder="請填入帳號"]')//抓取 placeholder 為 ‘請填入帳號’ 的 input
  

• cy.contains(): 透過元素呈現在網站上的文字尋找該元素

  cy.contains('Account')//尋找含有'Account'這個字的元素
  

• cy.type(‘要輸入的文字’): 在輸入框中輸入文字

• cy.fixture(''): 引用 /fixtures 中的資料

  fixture() 代表會抓 /fixtures 目錄下的資料，參數是檔名(副檔名可加可不加)

  cy.fixture('data').then((users) => {
      cy.get('.el-textarea__inner').type(users.name)
  })
  

  如果參數放的是 ‘admin’，但 /fixtures 中有很多筆開頭為 admin 的檔案，會對應找到的第一個檔案

• cy.wait()：暫停腳本測試，參數可放需暫停毫秒數

• .as()：做個 alias 給抓到的資料or元素，有點像變數

Cypress 系列

官方文件

• 這種形式的函式會寫在 /support 底下，而且所有測試腳本都會被連結到

  ex:

  • Cypress.Commands.add
  • Cypress.on：Uncaught exception

遇到的問題

• 解決方法： 想要跳過錯誤訊息，可以在 describe() 中加入以下程式碼，這樣就能無視錯誤訊息了 耶

  Cypress.on('uncaught:exception', (err, runnable) => {
      return false
  })