轉(zhuǎn)眼之間，你不知道的Cypress系列已經(jīng)到第12篇了。在Cypress中國群內(nèi)、在公眾號iTesting里，我每天都能看到大量關(guān)于Cypress的使用討論和私下問詢。這讓我感到無比榮幸（買了書的同學們，公眾號回復(fù)你的微信號，拉你到Cypress中國群）。

今天是你不知道的Cypress系列（12） -- 測試報告Allure。

測試報告應(yīng)該包括哪些內(nèi)容

測試報告至少需要包括項目總覽和執(zhí)行情況分析這兩方面的信息。

1. 項目總覽

• 本次測試執(zhí)行了多長時間？

• 總共執(zhí)行了多少測試用例？

• 有多少測試用例執(zhí)行成功？

• 有多少測試用例執(zhí)行失??？

• 有多少測試用例是非正常失敗的？

• 每條測試用例執(zhí)行了多長時間？

• 本次測試在哪個環(huán)境運行？是開發(fā)環(huán)境、集成測試環(huán)境還是生產(chǎn)環(huán)境？

• 本次測試運行在哪個操作系統(tǒng)上？

2. 執(zhí)行情況分析

針對每一次測試運行，測試報告應(yīng)該提供最基本的測試分析，包括：

• 按照測試失敗劃分的測試分析圖

• 按模塊劃分的測試分析圖

• 按照測試用例重要程度、優(yōu)先級劃分的測試分析圖

• 按照測試執(zhí)行時間劃分的測試分析圖

這些不同維度的分析圖，可用從各個層面來反映軟件的質(zhì)量情況。

Cypress支持哪些測試報告

Cypress支持多種類型的測試報告，主要包括如下幾類：

1. 內(nèi)置的測試報告

   內(nèi)置的測試報告包括Txt格式、Spec格式、JSON、Junit格式，比較簡單。
   

2. 自定義的測試報告

   結(jié)合Mochawecome, Cypress支持自定義測試報告。在《前端自動化測試框架 -- Cypress從入門到精通》一書中，我也通過ModuleAPI的方式給出個一個簡潔的測試報告，雖然簡潔，但可滿足絕大多數(shù)測試報告場景

   
   

3. 插件型測試報告

   像很多測試框架都支持插件型測試報告一樣，Cypress也支持外部測試報告。Allure就是最典型的一種插件測試報告。

Allure測試報告概述

1. Allure 報告生成的原理

Allure 報告是基于標準的 xUnit 結(jié)果輸出，再添加補充數(shù)據(jù)而生成的，其報告的生成基于如下兩個步驟。

• 在測試執(zhí)行期間，一個名為 Adapter 的小型 library 被連接到測試框架中，并將所有測試執(zhí)行的信息保存到 XML 文件中。對于大多數(shù)編程語言下的流行測試框架（例如 python 語言中的 pytest，Java 中的 jUnit 等），Allure 都默認為其提供了 Adapter。

• 獲取 XML 文件后，Allure 會將這些 XML 文件轉(zhuǎn)換為 HTML 報告。這一步驟可以通過持續(xù)集成系統(tǒng)的 Allure 插件，或者命令行命令實現(xiàn)。

2. Allure 報告特點

Allure 報告之所以受到開發(fā)、測試，甚至管理人員的推崇，是因為它有如下明顯的特點。

• 從開發(fā)/質(zhì)量保證的角度看，Allure 報告可以縮短常見缺陷的生命周期。

可以將測試失敗劃分為 bug 和損壞的（Broken）測試，還可以配置日志、步驟、固定裝置、附件、時間、歷史記錄，以及與 TMS 的集成和 Bug 跟蹤系統(tǒng)，方便將 Task 與負責 Task 開發(fā)人員和測試人員綁定，從而使開發(fā)和測試人員第一時間掌握所有信息。

• 從管理者的角度看，Allure 提供了一個清晰的“全局”視野。

包括本次測試涵蓋了哪些功能，Bug 在哪個 case 用例中被發(fā)現(xiàn)，以及整體測試用例、單條測試用例的執(zhí)行時間等信息。

下圖是一個Allure測試報告的大概預(yù)覽。

Cypress應(yīng)用Allure測試報告

雖然我比較喜歡簡潔的測試報告，甚至一度拒絕使用Allure測試報告（我覺得它更像一個網(wǎng)站而不是一個報告），但是Cypress中國群很多群友都反應(yīng)，他們比較習慣使用Allure，更重要的是，Allure拿來做匯報很合適，好吧，我們都是面向老板肯定編程的打工人。

下面介紹Allure集成至Cypress測試框架的步驟。

1. 安裝

首先，你需要安裝Allure Library。

// Mac 安裝
$ brew install allure
// Windows 安裝
scoop install allure

其次，你要安裝Java 8（用于Allure library）。

https://www.oracle.com/java/technologies/downloads/#java8  

最后，你要在項目根目錄下安裝allure。

// 關(guān)注公眾號iTesting，跟萬人測試團一起成長
yarn add -D @shelex/cypress-allure-plugin

2. 設(shè)置

Allure安裝好后，需要進行設(shè)置：

• 設(shè)置cypress/plugins/index.js。

  //先引用
  const allureWriter = require('@shelex/cypress-allure-plugin/writer');
  //再加載（關(guān)注iTesting）
  module.exports = (on, config) => {
      on('file:preprocessor', webpackPreprocessor);
      allureWriter(on, config);
      return config;
  };
  

  
  

  如果你想啟用autocompletion，在index.js文件中加上如下語句。

  /// <reference types="@shelex/cypress-allure-plugin" />
  

  
  

• 設(shè)置cypress/support/index.js。

  import '@shelex/cypress-allure-plugin';
  

需要注意的是：

如果你使用了typescript，則需更新tsconfig.json如下。

"include": [
   "../node_modules/@shelex/cypress-allure-plugin/reporter",
   "../node_modules/cypress"
 ]```

Allure配置項

與其它語言下的Allure一樣，Allure有很多配置項可以定義：

使用Allure

1. 通過cypress.json來使用

   我們使用《前端自動化測試框架 -- Cypress從入門到精通》一書中的測試框架，假定測試運行在qa環(huán)境，更改cypress.qa.json文件如下：

   // 關(guān)注公眾號iTesting，跟萬人測試團一起成長
   {    "baseUrl": "http://localhost:7079/login",
       "env": {
           "env": "qa",
           "allureResultsPath": "./iTesting/results"
       }
   }
   

   
   

   通過在”env“變量下定義allure的各項參數(shù)即可。

   
   

   運行時，直接采用如下命令即可：

   yarn cypress run --env allure=true
   

2. 直接通過命令行使用

   也可以不定義，直接在命令行輸入Allure支持的參數(shù)。例如：

   yarn cypress run --env allure=true,allureResultsPath=iTesting/results
   

代碼執(zhí)行完畢后，allure會生成一個測試報告文件夾iTesting。

查看Allure測試報告

查看Allure測試報告很簡單，待測試運行完畢后，在項目根目錄下執(zhí)行：

allure serve ./iTesting/results

然后你就會看到一個打開的瀏覽器，以及allure測試報告的內(nèi)容了：

Cypress有很多奇淫巧技， 我已經(jīng)總結(jié)超過百篇

別走開，下一篇更精彩！

往期回看：

                    你不知道的Cypress系列（1） --雞肋的BDD

                    你不知道的Cypress系列（2） -- ”該死"的PO模型！

                    你不知道的Cypress系列（3） -- 是時候重構(gòu)自己的思維了！

                    你不知道的Cypress系列（4） -- “PO”已死，App Action當立？

                    你不知道的Cypress系列（5） -- "眼瞎"的TestRunner

                    你不知道的Cypress系列（6） -- 多Tab的小秘密

                   你不知道的Cypress系列（7） -- 當iFrame遇見彈出框          

                    你不知道的Cypress系列（8） -- “可視化”測試你知多少

                    你不知道的Cypress系列（9） -- 代碼“自動生成”術(shù)

                    你不知道的Cypress系列（10） -- CypressHelper

                   你不知道的Cypress系列（11） -- 使用cy.session()加速鑒權(quán)。              

為了更好的支持我創(chuàng)作，麻煩同學們動動小手，點贊 + 在看 + 轉(zhuǎn)發(fā)一鍵三聯(lián)。再過一個月，給你們的小驚喜可能就來了 ：）

技術(shù)討論

公眾號里直接回復(fù) 666， 帶你入圈