iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

Angular 深入淺出三十天:表單與測試系列 第 18

Angular 深入淺出三十天:表單與測試 Day18 - 與 Cypress 的初次見面(上)

Day18

昨天跟大家分享了 Cypress 有多厲害之後,大家有沒有很期待呢?

這兩天就讓我來跟大家介紹 Cypress 到底有多厲害吧!

由於 Cypress 的功能非常地豐富且強大,所以我打算分成兩篇來介紹它,希望可以讓大家感受到它的魅力。

安裝 Cypress

要開始使用它之前,當然要先安裝它囉!

首先,我們新增一個空的資料夾,然後在終端機中輸入以下指令以進入該資料夾:

$ cd /your/project/path

接著輸入以下指令以完成初始化:

$ npm init

大家也可以選擇現有的專案,只要有 package.json 這個檔案即可。

然後輸入以下指令以安裝

$ npm install cypress --save-dev

安裝完成之後,你會發現你的專案除了 package.json 有變動之外,就沒有其他變動了。

別擔心!這不是因為你做錯了什麼,純粹就是 Cypress 剛安裝完就是這樣,接著我們可以先打開 package.json ,並且在 scripts 的區段加上這個指令:

{
  "scripts": {
    "cy:open": "cypress open"
  }
}

大家不一定要像我一樣叫 cy:open ,可以自己取自己想要的名字,只要後面的 cypress open 不變即可。

修改好並儲存後,我們就可以在終端機裡以下指令以啟動 Cypress :

$ npm run cy:open

或者是

$ yarn cy:open

初次執行時,Cypress 會知道你這個專案第一次執行它:

Terminal capture

然後幫你產生出 cypress.json 與名為 cypress 的資料夾,並幫你開啟一個長這樣的小視窗:

Cypress window

這就表示我們順利完成 Cypress 的安裝囉!是不是超簡單的呢?!

資料夾結構介紹

接下來我們先來看看 Cypress 到底幫我們產生了些什麼檔案。

cypress.json

當大家點開它的時候應該會嚇一跳,因為剛開始時,它裡面就只有這樣:

{}

第一次使用 Cypress 的朋友應該會多少覺得有點錯愕,不知道這個檔案到底要用來幹嘛。

其實這個檔案是 Cypress 的設置檔,有關 Cypress 全局的配置都會在這裡設定。

那到底有哪些設定可以配置呢?

關於這點大家其實可以看官方的 Configuration 文件,裡面寫得非常清楚,我就不再贅述。

而且裡面的設定非常地多,雖然不一定都會用到,但也由此可見 Cypress 的功能是多麼地強大。

接下來,點開 cypress 資料夾後你會發現裡面還有四個名為 fixturesintegrationpluginssupports 的資料夾。

fixtures

這個資料夾主要是用來放一些在撰寫測試案例時,可能會常用到或共用的資料。例如:固定會輸入的帳密、固定會驗證的使用者資訊等等,並以 JSON 的形式存在。

後續使用時,大多會在 .spec.js 裡用像這樣子的方式直接引用:

const requiredExample = require('../../fixtures/example');

integration

這個資料夾是我們用來擺放 .spec.js 的地方。

比較值得一提的是,由於 Cypress 可以平行地執行多個不同的 .spec.js,所以我們在寫測試案例時可以善加利用此點,將不同系統或不會有依賴的測試分成不同的 .spec.js 來撰寫。

不過要反向思考的是,不同的測試檔之間就更不可以有依賴關係了。

plugins

這個資料夾裡有一個 index.js ,當我們需要用到一些外掛模組的時候,就會需要到這裡面來設定,例如我們可能會需要在驗證重設密碼這個功能時,要到信箱裡去確認是否有收到信、點開重設密碼的連結等等。

這點如果真的要仔細介紹起來可能會需要花一到兩篇的篇幅,所以如果大家有興趣的話,可以直接看官網的 Write a Plugin 來學習怎麼樣撰寫與使用 Plugin。

此外,官方也有列出它們精選的 Plugin 供大家參考與使用。

support

在 Cypress 裡,我們都是使用 cy.xxx 的方式來操作 Cypress 提供的 API ,而這些 API 在 Cypress 我們叫做 Command

雖然 Cypress 有提供許多的 Command 讓我們使用,不過我們其實也可以自定我們想要的 Command ,令我們在寫測試時更加地方便與輕鬆。

而這個資料夾就是用來擺放這些我們自定 Command 的地方。

打開資料夾後我們會看到裡面有兩個檔案 ─ index.jscommands.js ,其中的 commands.js 裡就是我們自定 Command 的地方。

index.js 則是用來 import 我們自定 Command 的檔案,執行時 Cypress 會自己從這裡去找到測試案例所需要用到的 Command ,不用特別在測試案例裡 import 。

在檔案命名上,當然也不一定要叫 commands.js ,你可以自己取你想要的檔名,只要記得在 index.js 裡 import 即可。

除了自定 Command 外,其實我們還可以覆寫既有的 Command ,語法大家可以參考官方的 Custom Commands 文件,後續我也會再分享給大家。

介紹完 Cypress 的資料夾結構後,我們回頭來看看 Cypress 打開的小視窗是什麼玩意兒吧!

Cypress Test Runner

Cypress Test Runner Window

這個小視窗其實是 Cypress Test Runner 所開啟的一個小視窗,一般開發時我們會使用 cypress open 的指令來啟動這個 Test Runner 的小視窗以便開發。

現在大家看到畫面中會有許多檔案,而這些檔案其實都是位於 /cypress/integration 之中, Test Runner 啟動時會幫我們把它們抓出來並顯示在上圖的列表中。

當我們想要測試某一個檔案裡的測試案例時,就只要點擊該檔案的名稱即可。

大家可以先點點看、玩玩看,點擊之後會做的事情我會在明天將它們更仔細地介紹給大家。

而這個 Test Runner 的小視窗其實有滿多滿強大的功能,例如在小視窗的右上角有個下拉選單可以選擇想要測試的瀏覽器:

Cypress Test Runner Window

這些瀏覽器是 Cypress 自動從你的作業系統中抓取的,只要你的作業系統有安裝 Cypress 所支援的瀏覽器,它就會成為這個下拉選單的選項。

想知道更多更詳細的資訊可以參考官方的 Launching Browsers 文件。

此外, 小視窗的上方有三個頁籤: TestsRunsSettings ,當前的畫面所顯示的是 Tests 的頁籤,我們點擊 Settings 的頁籤之後會看到以下畫面:

Cypress Test Runner Window

這邊比較重要且常用的會是 Configuration 的區塊,我們一樣點開它之後會看到許多設定:

Cypress Test Runner Window

我覺得這個功能非常地方便,因為這邊所顯示的設定是我們可以在 cypress.json 或者是 cypress.env.json 裡配置的所有設定。

有了這個之後,不用再為了找有哪些設定可以使用去看官網文件,甚至也透過不同顏色來得知當前的配置是來自於哪裡,非常地貼心!

至於 Configuration 後面的區塊, Node.js Version 是可以顯示目前所執行的 node 的版本:

Cypress Test Runner Window

細節可參考官方的 Configuration - Node Version 文件。

Proxy Settings 則是顯示目前的 Proxy 相關設定:

Cypress Test Runner Window

想知道如何設定 Proxy 可參考官方的 Proxy Configuration 文件。

File Opener Preference 則是可以設定你想要用什麼軟體來開啟測試檔(因為在測試中可以透過點擊檔名來開啟該檔案):

Cypress Test Runner Window

詳細請參考官方的 IDE Integration - File Opener Preference 文件。

最後 Experiments 則是顯示目前尚在實驗階段的設定:

Cypress Test Runner Window

詳細請參考官方的 Experiments 文件。

Runs 是做什麼用的呢?

Cypress Test Runner Window

這邊是如果你有使用它們家的 Dashboard 服務的話,可以直接在這邊看到歷史的執行結果。

Dashboard 服務?這又是什麼東西?

Cypress Dashboard

Cypress Dashboard 是 Cypress 它們家所提供的服務,主要是方便我們在使用 Cypress 來執行完自動化的 E2E 的測試後,把結果上傳到這裡來,已供後續觀測與整合第三方工具所用。

這又是一個很強大的工具,如果要介紹它又得花一整篇的文章,不過由於官網其實有非常詳盡的說明與影片,而且大家其實可以自己登入進去玩玩看,連結在這裡:https://dashboard.cypress.io/login

至於這個服務的收費方式,大家可以看這邊:https://dashboard.cypress.io/organizations/48db8376-6414-489b-b988-92233f50e335/pricing

想知道更詳細的資訊可以看官方的 Dashboard Introduction 文件。

不過值得一提的是,其實有個開源的工具叫做 Sorry Cypress ,它可以說是免費版的 Cypress Dashboard ,主要的核心功能如平行執行測試儲存歷史執行結果等都有,不過在介面的設計上比較陽春一些些、最重要的是需要自己架設、自己設定。

我覺得這就像我們自己架設 Jenkins 與使用別人所提供的 CI 工具如 Circle CI 的概念很像,就看我們的需求來決定要選擇哪一種工具囉!

本日小結

今天主要是跟大家介紹 Cypress 的基礎功能面,我想讓大家在對它有個基本的了解之後,接下來我們在使用時會比較知道它在幹嘛、有哪些功能,不會忽然講到一個功能之後要忽然中斷原本的進度來解釋它。

而明天的文章會著重在 Cypress 的 Test Runner 上(今天只有介紹到一小部分的功能),敬請期待!!

如果你有任何的問題或是回饋,還請麻煩留言給我讓我知道,感謝大家!


上一篇
Angular 深入淺出三十天:表單與測試 Day17 - E2E 自動化測試工具簡介
下一篇
Angular 深入淺出三十天:表單與測試 Day19 - 與 Cypress 的初次見面(下)
系列文
Angular 深入淺出三十天:表單與測試30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言