Cypress

By 增廣建文

Agenda

  • Setup
  • Quick Demo
  • Combine with CI

Setup & Quick Demo

Part 01

What's Cypress?

  • 可以幫我們模擬在瀏覽器中的操作來達到end to end的testing
  • 總共有分成兩個版本
    • Cypress app是開源免費版
    • Cypress Dashboard是由cypress.io維護的付費Saas版

Setup

  1. 要先打開已經有設定好package.json的專案
  2. 安裝方式可以直接使用npm來裝npm install cypress
  3. 裝好後可以用npx cypress open來打開Cypress介面
    要省事的話可以把它寫進package.json的script中
{
  "scripts": {
    "cypress:open": "npx cypress open"
  }
}

Cypress UI

Cypress會以一個獨立的軟體來呈現

E2E Testing

End to End Testing比較注重的部分是完整的使用流程

Cypress會透過多個檔案像是cypress.config.js等去做專案的設定

Support Browser

目前可以在三種情況下去做測試(是額外設定的不影響原本系統上的)

Test Case UI

First Simple Test Case 1/2

可以直接透過Cypress App來產生簡易的範例

First Simple Test Case 2/2

簡單修改一下產生的spec來讓測試的情況更符合現實

describe('first spec', () => {
  it('main page', () => {
    cy.visit('http://localhost:3000')
  })
})

Run Test

實際跑測試前要記得把react的專案跑起來

Check Items on Screen

describe('empty spec', () => {
  it('passes', () => {
    cy.visit('http://localhost:3000')
  })
  it('post 1', () => {
    cy.contains('post')
  })
  it('click button', () => {
    cy.contains('Delete').click()
  })
})

Test Result

More Syntax

it('Perform login', () ⇒ {
  // Visit ExecuteAutomation Website     
  cy.visit('http://eaapp.somee.com/')
  // 點 navigation 的 Login
  cy.contains('Login').click()
  // url 要有 'Login 這個字'，確定進入 login page
  cy.url().should('include', 'Login')
  // 輸入使用者名稱 "admin"   
  cy.get('#UserName').type("admin")
  // 輸入密碼 "password"
  cy.get("#Password").type('password')
  // 按下送出按鈕
  cy.get('.btn').click() 
}

Snapshot

可以回到特定test case下的狀況

Debug

透過明確的錯誤訊息以及debug工具可以協助我們更快找到出錯原因

Debug - Print to Console

可以在瀏覽器的console看到更多狀態資訊

Debug Syntax 1/3

可以透過call pause來暫停目前狀況，並call debug來得到更進一步的資訊

it('post 1', () => {
cy.pause()
cy.get('Button').debug()
cy.contains('post').debug()
})

Debug Syntax 2/3

結果一樣會在console中呈現

Debug Syntax 3/3

在Source的tab也會顯示目前正停在哪

Run Tests in CI Pipeline

Part 02

Docker Image

在開始設定CI前會要把前後端打包成單一的docker image

實際上會需要注意的只有要將react build好的檔案給放進image內

FROM node:16-alpine

WORKDIR /app
COPY . /app
COPY ../frontend/build /app/build

# ...

由於在Azure Devops上要跑Keycloak會過於困難，建議在打包時將相關的code給註解

Update YAML File

要跑cypress的話只要在pipeline中新增一個task即可

Support for Other CI Pipeline

Generate Report

Show Reports in Azure Devops

Setup Keycloak with Node.js

Keyclaok理論上可以用npm套件或是POST的方式去新增client與user

CI Pipeline Docker Compose Task

想要正確啟用目前的專案還會需要Keycloak Server

所以在Pipeline設定新的Docker compose task，才能一起啟動多個container

steps:
- task: DockerCompose@0
  displayName: Container registry login

Command & Assertion

Component Testing (beta)

Component Testing主要是針對部分component去測試他有沒有正常運作

Reference