# 一起玩 Cypress(3) - Cucumber Report
###### tags: `Test` `Cypress`

## 目錄
[TOC]

# 一、前言
當一個測試完成不論結果成功或是失敗如果能拿出當下測試結果那專業程度又不同了，這邊就要來快速產生Cucumber的測試報告(.html)以便查看當前測試情形。

# 二、實作步驟

報告的產生一樣是藉由`cypress-cucumber-preprocessor`插件來進行，只需要設定相關參數即可執行，參考文件在最下方參考來源處

## 環境設定

我們在專案上建立一個文件命名`.cypress-cucumber-preprocessorrc.json`，並且將填入以下內容
內容主要設定
1. 關閉messages格式報告輸出
2. 啟用html報告書出
3. .feature執行腳本路徑對應

{
    "messages":{
        "enabled": false
    },
    "html": {
        "enabled": true,
        "output": "cypress/cucumber-report/cucumber-report.html"
    },
    "stepDefinitions": [
        "cypress/e2e/[filepath]/**/*.{js,ts}",
        "cypress/e2e/[filepath].{js,ts}",
        "cypress/support/step_definitions/**/*.{js,ts}"
    ]
}

:::info
:bulb: 設定檔文件也是跟隨[cosmiconfig](https://github.com/davidtheclark/cosmiconfig)規則，所以想要寫在package.json也行
:::

能使用的參數如下：

| JSON path | Environment key | Example(s) |
|:----------------:|:---------------:|:--------------------------------:|
| stepDefinitions | stepDefinitions | [filepath].{js,ts} |
| messages.enabled | messagesEnabled | true, false |
| messages.output | messagesOutput | cucumber-messages.ndjson |
| json.enabled | jsonEnabled | true, false |
| json.formatter | jsonFormatter | /usr/bin/cucumber-json-formatter |
| json.args | jsonArgs | ["custom-json-formatter.js"] |
| json.output | jsonOutput | cucumber-report.json |
| html.enabled | htmlEnabled | true, false |
| html.output | htmlOutput | cucumber-report.html |
| filterSpecs | filterSpecs | true, false |
| omitFiltered | omitFiltered | true, false |

大多參數都較好理解，不過有一些特殊(也較少使用)的參數在這邊就先紀錄一下使用情境：
* stepDefinitions：`.feature`檔案與測試檔案對應的路徑規則
* json.formatter：指向cucumber-json-formatter套件的位子
* filterSpecs：影響使用`tags`執行測試的時候
* omitFiltered：影響操作`it.skip`時使用

:::info
:bulb: 想要產生.json的報告目前這個版本比較麻煩，需要而外下載[cucumber-json-formatter](https://github.com/cucumber/json-formatter)才可以執行，有需要的人可以參考官方文件[[Link]](https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/json-report.md)。
執行流程會是產出**cucumber-messages.ndjson**再透過套件產出Json。
:::

## 執行測試

在測試之前先來說明一下目前專案資料架構和預期產出的文件


區塊1：我寫了兩份測試文件之後產出的測試報告需要包含這兩份的結果
區塊2：這邊我使用npm管理執行(差別在於指令執行)
區塊3：我希望產出的檔案放在指令路徑下

知道目前的專案情況後我們就開始執行指令，這邊只要直接執行`Cypress`的測試指令即可(不需要再啟動UI)

cypress run

:::info
:bulb: 如果跟範例一樣需要透過npm執行唷!!!

npm run cy:run

:::

執行完成後可以看到指定的位子已經有產出html的檔案報告

此外也可以在`console`裡面看到測試狀況

我們直接打開html檔案後就可以看到一份漂亮的報告了

最後附上測試錯誤時的報告畫面

## 擴充內容

這邊有一個小插曲，因為`Cypress`會捕捉網頁上面的exception並回報錯誤，但是因為不是`Cypress`驗證時所產生的錯誤，所以該結果不會顯示在報告中(該項測試直接消失)，如果想要忽略其錯誤需要加上攔截的代碼，至於撰寫位子我是放在`cypress\support\e2e.js`此檔案內

> 這邊附上官方參考[Uncaught Exceptions](https://docs.cypress.io/api/events/catalog-of-events#Uncaught-Exceptions)

Cypress.on('uncaught:exception', (err, runnable) => {
    // returning false here prevents Cypress from
    // failing the test
    return false'
});

# 結論
在撰寫這一篇文章時發現產出報告的方法又更新了，新版的用法變得更加容易產出報告文件，只需一些設定即可產報告的難度幾乎為零，不過json格式的報告產出反而變需要多安裝其它套件(雖然多了.ndjson)，但整體來還算不錯說對於有需求的人還是可以玩玩看。

<br/>

---

相關參考來源：
[cypress-cucumber-preprocessor docs](https://github.com/badeball/cypress-cucumber-preprocessor/tree/master/docs)
[cypress-configuration](https://docs.cypress.io/guides/references/configuration#Configuration-File)

<style>
.red{ color: red;}
</style>