昨天跟大家分享了 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 會知道你這個專案第一次執行它：

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

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

資料夾結構介紹

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

cypress.json

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

{}

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

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

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

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

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

接下來，點開 cypress 資料夾後你會發現裡面還有四個名為 fixtures 、 integration 、 plugins 、 supports 的資料夾。

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.js 與 commands.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 所開啟的一個小視窗，一般開發時我們會使用 cypress open 的指令來啟動這個 Test Runner 的小視窗以便開發。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

那 Runs 是做什麼用的呢？

這邊是如果你有使用它們家的 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 上（今天只有介紹到一小部分的功能），敬請期待！！

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