# 20241222 LearnWeb Taiwan - Cypress

[LearnWeb Taiwan Meetup #21 透過三法五絕學自動化測試 Cypress 實戰 Workshop](https://learnweb-taiwan.kktix.cc/events/learnweb-meetup-21)
主題：透過三法五絕學自動化測試 Cypress 實戰 Workshop
講者：Eason
日期：2024/12/22 (周日) 14:00
地點：言文字 Emoji Cafe & Bar 3F /台北市中正區開封街一段6號3樓

(筆記開始)

---

## 測試金字塔


## 自動化測試除了測試以外，還可以

- 搶貨
- 搶票
- ~~線上幫你打卡~~

## 自動化工具有哪些

- Selenium
- 歷史悠久，Python
- **Playwright**
- Microsoft 富爸爸
- **Cypress.io**
- 前端友善，Vue 首推

## Cypress 特色

- JS 前端友善
- 時光旅行（可以往前看）
- 即時重載
- 自動等待
- 不用寫 await，也不會進入頁面後直接執行
- 截圖/錄影
- 還可以出報表

## 自動測試 - 心法

- 想想出去玩流程
- 下車
- check-in
- 放東西？洗澡？...

- 三法：**在哪、找誰、做什麼**

- 五絕(API)：**Visit, Get, Click, Type, Expect(Should)**
- 這五個基本 API 可以涵括最基礎的測試

## 實戰 Workshop

前置作業


### 任務一

在 e2e 資料夾下新增一個 test.cy.js 檔案，貼上這段

/// <reference types="cypress" />

describe('template spec', () => {
  it('passes', () => {
      cy.visit('https://example.cypress.io')
  })
})

<span style='color: blue'>💡 tip: 使用抓取工具找 class</span>


<span style='color: blue'>💡 tip: 若只想要跑一個測試，使用 it.only</span>

/// <reference types="cypress" />

describe('template spec', () => {
  it('passes', () => {
      cy.visit('https://example.cypress.io')
  })
  
  // 只執行它
  it.only('', ()=> {})
})

### 小任務與程式碼

/// <reference types="cypress" />

describe('template spec', () => {
  it('passes', () => {
      // 去哪
      cy.visit('https://example.cypress.io')
      // 找誰
      cy.get('.navbar-brand')
      // 做什麼
      .contains('cypress.io')
  })

  // 2. 進入yahoo頁面，登入按鈕，應該有登入的文字
  it('yahoo login button', () => {
    cy.visit('https://tw.yahoo.com/?p=us')
    cy.get('#header-signin-link')
    .contains('登入')
  })

  // 3. 進入 Netflix，開始按鈕，應該有開始的文字
  it('Netflix home page', () => {
    cy.visit('https://www.netflix.com/tw/')
    cy.get('.default-ltr-cache-10yz6af > .default-ltr-cache-inkrn > .default-ltr-cache-1u8qly9 > .default-ltr-cache-1jbflut > .e1ax5wel2')
    .contains('開始使用')
  })

  // 4. 進入 Netflix, 進入登入頁, 點擊登入按鈕, dialog 應該有登入的文字
  it('Netflix login page', () => {
    cy.visit('https://www.netflix.com/tw/')
    cy.get('.default-ltr-cache-p3zdvd-StyledContainer > :nth-child(2) > .e1ax5wel2').click()
    cy.get('.default-ltr-cache-1osrymp')
    .contains('登入')
  })

  // 5. 到 地標網通 網站，搜尋輸入 iphone 16，點擊搜尋 icon，搜尋結果應有 iphone 16 的文字
  it('地標網通 網站', () => {
    cy.visit('https://www.landtop.com.tw/')
    // cy.get('.search-input').type('iphone 16')
    // cy.get('.search-icon').click()
    // cy.get('.search-result')
    // .contains('iphone 16')
  })


  // 6. 到 linetv, 輸入搜尋劇名，按下 enter，搜尋結果應有劇名
  // ('https://www.linetv.tw/')
  it.only('linetv', () => {
    cy.visit('https://www.linetv.tw/')
    cy.get('.z-20 > .min-w-0').type('回到20')
    cy.get('.z-20 > .min-w-0').type('{enter}')
    cy.get('.z-10 > .container')
    .contains('回到20歲')
  })


})

## 產出報表

1. 安裝

    npm i cypress-mochawesome-reporter

2. 在 e2e.js 裏面 import 套件

    import 'cypress-mochawesome-reporter/register';

3. 在 cypress.config.js 加入

    const { defineConfig } = require("cypress");

    module.exports = defineConfig({
        reporter: 'cypress-mochawesome-reporter',
        video: true,
        e2e: {
            setupNodeEvents(on, config) {
                // implement node event listeners here
                require('cypress-mochawesome-reporter/plugin')(on);
            },
        },
    });

4. 下指令

    npx cypress run  

5. 去 reports/html 下面找 index.html

<專案資料夾>/cypress/reports/html/index.html）

按進去看會有影片回放！


## Ｑ＆Ａ

1. 若公司沒有，怎麼導入？

⇒ 剛有別的會眾詢問，要不要把 Figma 案例都寫出來？我建議專案剛開始導入時，先寫最基本、最重要的測試案例就好。

2. user 說有狀況難以複現，要請他錄影嗎？怎麼處理？

⇒ 讓客戶操作錄影有點難度，建議 RD 測完開 issue 再列入

3. CSS selector 寫法(沒聽清楚)

⇒ 剛剛練習這個寫法比較不建議，建議 RD 在 component 上面加 attribute（例如 qa-xxx)

4. 測試時發生 flaky

⇒ flaky test 是指思是今天測沒問題，隔天測也沒問題，但突然某一天壞掉了。如果遇到測試有時候對有時候錯，那代表測試不穩定，要下架再重新上。

5. 什麼時機點開始做(e2e)比較好？

⇒ 標準流程是還沒上架 prod 前，local 端就要寫。上到 dev 時，剛好上架在 pipeline 監測。接著到 UAT，也跟著上。

實際上可能都很忙，如果無法照著標準流程，最差情況是上到 production 時自動化測試就要上去。

## 其他

- [講者補充資訊](https://github.com/goldbergyoni/javascript-testing-best-practices)