# 一起玩 Cypress(5) - Report in AWS CI/CD
###### tags: `Test` `Cypress` `AWS`

# 前言
當我們在本地端完成了測試流程，接著想要導入CI/CD的流程當中並且觀看其測試情形，這邊會將測試加入AWS中，如果不熟悉流程可以先觀看[[AWS] CI/CD CodeBuilde (一)](/qCQgFAV5SzCLXfgY6Na44A)系列的文章，直接進入實作環節吧。

:::warning
:bulb: 建議有AWS CodeBuild基礎在查看此文章
:::

## 目錄
[TOC]

# 一、實作步驟

## 測試專案 建立
我們需要可以產出Cucumber Report的Cypress的專案，建立方法可以參考此系列前幾篇文章，或使用已經事先建立好了[Cypress專案](https://github.com/franksu129/AwsCypressReport)。

如果是自己建立的專案，因為AWS的cucumber報告是吃json格式的，所以這邊會需要產出Json格式，實作方法可以參考[一起玩 Cypress(3) - Cucumber Report](/f2GRZt1lQo-q4YPPEmafuQ)文章。

## CodeBuild 建立
建立方式也可以參考[[AWS] CI/CD CodeBuilde (一)](/qCQgFAV5SzCLXfgY6Na44A)文章。

### 來源選擇
此範例的專案在GitHub，在AWS上面我們可以直接使用連動的方式去授權。


:::info
:bulb: 來源的取得有很多方式，可再自行選擇。
:::

### 環境選擇
因為發現此版本多了許多相依套件，故CodeBuild的運行環境我們直接使用Cypress提供的[DockerImage](https://github.com/cypress-io/cypress-docker-images)，在AWS直接調整Image來源即可(如下圖)，可以依據需求選擇Image即可，此時作則是使用`cypress/included:10.6.0`的環境。


:::info
:bulb: 如果想要使用自己的Image，記得參考[相依套件](https://docs.cypress.io/guides/continuous-integration/introduction#Dependencies)。
:::

### 腳本撰寫
這使用的Buildspec的腳本如下(依據個人需求調整)：

version: 0.2
phases:
  pre_build:
    commands:
      - npm ci 
      - pwd
      - ls  
  build:
    commands:
    　#　加入cucumber-json-formatter指令並授權
      - cp cucumber-json-formatter /usr/local/bin/
      - chmod -R 777 /usr/local/bin/cucumber-json-formatter
      # 運行測試
      - npx cypress run
  post_build:
    commands:
      - cat cucumber-messages.ndjson | cucumber-json-formatter > cucumber-report.json
reports:
  cucumber-reports:
    files:
      - "cucumber-report.json"
    file-format: "CUCUMBERJSON"
    discard-paths: yes

這邊我們會使用`cucumber-json-formatter`命令，將產出的`cucumber-messages.ndjson`轉換成`cucumber-report.json`並提供給AWS呈現。

## 測試流程
建立完成後可以直接進行手動測試，目前如果是使用所提供的專案，其測試項目會有一個成功一個失敗。
直接點擊**開始建置**即可


之後的運用就可以透過CodePipeline的服務將其CI/CD加入流程中，可以透過Pipeline的規劃來決定想要在哪一步驟執行，範例圖如下：


:::warning
:bulb: 在運行中有發現[Bug](https://github.com/cypress-io/github-action/issues/564)產生，目前尚無方法處理先做紀錄。
:::

# 二、檢視結果
想要觀看期報告結果可以進入建置細節查看


進入畫面後可以看到分頁中有**報告**選項，進入該頁面點擊所屬報告就可以看到結果了唷


報告呈現如下：


# 結論
算是結束了Cypress整個基礎學習，從建置、撰寫、報告產出一直到導入CI算是可以完成大部分的需求，針對是否導入測試就沒有固定的答案了，因為測試所帶來的好處可能不太是實質上的利益，另一方反而會增加專案成本(需花時間撰寫或維護)，其實測試的導入除了可大大提升交付的品質，也可以在協作開發的過程中避免既有功能無法使用，整體來說很推薦加入提交流程之中。

<br/>

---

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