มาสร้าง Test Report สวยๆ จากการรันเทสด้วย Cypress.io กันดีกว่า

สวัสดีครับ วันนี้ผมจะมาแนะนำวิธีการสร้าง Test Report จากการรันเทสด้วย Cypress.io ไปแสดงผลในรูปแบบ HTML สวยๆ กันครับ ก่อนอื่นต้องบอกก่อนว่า Cypress นั้นได้นำ Mocha ซึ่งเป็น Test Framework ชื่อดังบน Javascript มาเป็นตัวจัดการ Test Case รวมถึงการเก็บผลเทสทั้งหมด ทำให้เราสามารถใช้ Reporter Plugins ทุกตัวที่ทำมาเพื่อ Support บน Mocha เอามาใช้กับ Cypress ได้เลยครับ

ซึ่งปกติแล้ว Mocha นั้นมี Reporters มาให้เราเลือกใช้กว่า 13 แบบด้วยกัน (เยอะมาก) ซึ่งวิธีการ Config ว่าจะเลือกใช้ Report แบบไหนก็ไม่ยากครับ แค่เซตค่าเข้าไปใน Parameter reporter ในไฟล์ cypress.json ก็ใช้ได้แล้วครับ

ผมขอยกตัวอย่าง Mocha Reporters ที่น่าสนใจมาให้ดูซัก 3 อันก่อนแล้วกันนะครับ

1. Spec

Reporter แบบ spec คือ Default Reporter สำหรับ Mocha Tests ครับ (คือถ้าเราไม่ได้ Config ค่าใดๆ มันจะใช้ตัวนี้เป็น Reporter ให้) ซึ่งมันจะแสดงผลออกทาง Standard Output บน Console แบบนี้ครับ

Spec Reporter

2. Dot Matrix

Dot Matrix เป็นรูปแบบการแสดงผลแบบจุด . ตามชื่อเลย โดยถ้ามีข้อไหนที่รันแล้ว ​Failed มันจะทำการแสดงผลและไฮไลท์สัญลักษณ์ ! (exclamation mark) เป็นตัวสีแดง ส่วนถ้ามีข้อไหนที่ Skip มันจะทำการแสดงผลและไฮไลท์สัญลักษณ์ (comma) เป็นตัวสีฟ้าให้ครับ

Dot Matrix Reporter

3. Nyan

สายคิ้วท์ๆ ต้องชอบ Report แบบนี้แน่เลยครับ นั่นคือ nyan เจ้าเหมียวสุดน่ารักที่มันจะมาวิ่งให้เราดูเพลินๆ บน ​Console ขณะที่เทสเรากำลังรันอยู่แบบนี้ครับ

Nyan Reporter

ยังมี Reporters ที่ Mocha แถมมาให้เราเลือกใช้งานอื่นๆ อีกหลายแบบ สามารถเข้าไปดูตัวอย่างได้ที่ https://mochajs.org/#reporters ได้เลยครับ

มาดู Mocha Reporter แบบสวยๆ กันดีกว่า

Mochawesome Reporter

Mochawesome คือ Custom Mocha Reporter ที่สามารถสร้าง Test Report ให้เราในรูปแบบ HTML file สวยๆ ได้ ซึ่งมันสามารถแสดงผล Test Case ให้เราดูเป็น Step-by-Step และแสดง Error Stacktrace เมื่อ Test Failed ให้เราอีกด้วยครับ และที่สำคัญคือมันยังสามารถ Add Custom Content เช่น Screenshot เพิ่มเข้าไปใน Report ได้เองอีกด้วย Awesome สมชื่อเลยครับ

1. Install Mochawesome

sh$ yarn add mocha@5.2.0 mochawesome mochawesome-merge

• mocha ใช้เป็น Dependency Library ที่ใช้สำหรับสร้าง Custom Report ครับ
• mochawesome ใช้สำหรับสร้าง Report ออกมาเป็น HTML สวยๆ ครับ
• mochawesome-merge เนื่องจากตั้งแต่ Cypress เวอร์ชัน 3.0.0 เป็นต้นมา มีปรับวิธีการรันเทสใหม่ โดย spec ไฟล์จะถูกนำมารันแยก (isolate) ขาดออกจากกัน ทำให้ตัว mochawesome จะสร้างผลเทสแยกตาม Spec ไฟล์มาให้เรา ซึ่งทำให้เราจะต้องใช้ mochawesome-merge ในการ merge ผลเทสจากหลายๆ ไฟล์มารวมเป็น Report ไฟล์เดียวครับ

2. Configure Mochawesome as a Reporter

เราสามารถเพิ่ม options สำหรับ Reporter แต่ละตัวได้ด้วยนะครับ ซึ่ง Options parameter ก็จะแตกต่างกันไปใน Reporter แต่ละตัวครับ ซึ่งในกรณีของ mochawesome นี้ผมได้ทำการ Configure เข้าไปใน parameter reporterOptions ในไฟล์ cypress.json ดังนี้ครับ

• reportDir : Directory ที่เราต้องการสร้าง Test Report File อันนี้แล้วแต่เราเลยครับ ที่ไหนก็ได้ ของผมเอาไว้ที่ cypress/report/mochawesome-report
• overwrite: เนื่องจากผมต้องการให้มันสร้าง Report File ไม่ให้ทับกันในแต่ละ spec file ผมเลยจะเซตค่า Parameter นี้เป็น false ครับ
• html: คือจะสร้าง Report ในรูปแบบ HTML file เลยหรือไม่? ซึ่งผมเซตเป็น false เช่นเดียวกัน เพราะผมจะใช้ตัว mochawesome-merge ทำการ merge และสร้าง Test Report ทีเดียวหลังจากเทสรันเสร็จทั้งหมดแล้วครับ
• json: คือให้ mochawesome ทำการสร้าง Report ในรูปแบบของ json ไฟล์ ซึ่งไฟล์นี้เราจะนำมาใช้ในการ merge ผลเทสในขั้นตอนสุดท้าย จึงเซตค่าให้เป็น true ครับ
• timestamp: คือ parameter ที่จะทำให้ชื่อ Report File ไม่ซ้ำกัน ซึ่งโดยปกติแล้วมันจะใช้เป็นเลข Running Number เช่น 001, 002 ต่อท้ายชื่อไฟล์ไปเรื่อยๆ ซึ่งผมให้มันปรับมาใช้เป็นค่า datetime แทนครับ ส่วนตัวชอบแบบนี้มากกว่า

3. สร้าง Cypress Custom Test Runner

โดยปกติแล้ว เราสามารถรัน Cypress ด้วย Command Line cypress run ได้เลย (ถ้ารันผ่าน cypress open แบบ UI Test Runner จะไม่มีการสร้าง Report ให้นะครับ) แต่เนื่องจากว่าเราต้องการที่จะ hook event บางอย่างทั้งก่อนและหลังจากที่รันเทสเสร็จแล้ว ผมจึงเลือกที่จะสร้าง Cypress Custom Test Runner ขึ้นมาเองโดยทำการสั่งให้ Cypress ทำงานผ่าน Cypress Module API อีกทีนึงครับ

Install Dependencies for Custom Test Runner

sh$ yarn add yargs ls rimraf

• yargs ผมใช้สำหรับทำ Argument Parser ที่ Pass ค่ามาจาก package.json อีกทีครับ (อันนี้จะทำหรือไม่ทำก็ได้ แล้วแต่สะดวกเลยครับ)
• ls เอาไว้ list report files ที่มีค้างอยู่ทั้งหมด
• rimraf เอาไว้ delete report files ของเก่าที่ค้างจากการรันครั้งก่อน

Custom Test Runner มันจะทำการ Delete Report Files ที่ค้างจากการรันเทสครั้งก่อนให้ทั้งหมด และหลังจากนั้นก็จะสั่งรันเทสผ่าน Cypress Module API และเมื่อรันเทสเสร็จแล้วก็จะทำการ Merge ผลเทสจากการรันในทุกๆ spec file ผ่านฟังก์ชัน generateReport ออกมาเป็น HTML File ให้เราครับ

sh$ node cypress_runner -b chrome

mochawesome report

ได้มาแล้วครับ Mochawesome HTML Report จะเห็นได้ว่า mochawesome แสดงผลเทสเราอย่างละเอียดเลย บอก Test Execution Time ทั้งหมดรวมถึงสามารถดูแยกตาม Test Case ได้ด้วย รวมถึงสามารถ Filter Tests ได้จากเมนูด้านข้างได้อีกด้วยครับ

4. เพิ่ม Screenshot เข้าไปใน Report เมื่อ Test Failed

อย่างที่ผมบอกไปก่อนหน้านี้ว่าตัว mochawesome นั้นเปิด API ให้เราสามารถ Add Custom Content เข้าไปใน Report ได้ ผมเลยจะลองทำการเพิ่ม Screenshot เข้าไปใน Report แต่จะทำก็ต่อเมื่อ Test Failed เท่านั้นนะครับ ซึ่งโดยปกติแล้ว Cypress จะทำการ Capture Screenshot ให้เราอัตโนมัติเมื่อ Test Failed อยู่แล้ว ดังนั้นเราก็แค่ทำการเพิ่ม Path ของ Screenshot Files เข้าไปใน Report ได้เลย โดยทำผ่านการสร้าง Hook Event เข้าไปใน Cypress Support File ตามนี้ครับ

cypress/support/index.js

addContext คือ Object ที่ mochawesome อนุญาตให้เราสามารถเรียกใช้เพื่อทำการเพิ่ม content ใดๆ เข้าไปใน Report ของเราได้ครับ ซึ่งสามารถอ่านรายละเอียดวิธีใช้งานเพิ่มเติมได้จากลิ้งนี้เลยครับ

หลังจากนั้นทำการ update screenshotsFolder ให้ชี้ไปที่ mochawesome assets folder เพื่อให้ report สามารถ reference หา screenshot files ได้อย่างถูกต้องครับ

ผมทดลองสร้าง Test Case ที่รันแล้วจะ Fail ทุกครั้งดูครับ แล้วลองเปิด Report ที่สร้างโดย mochawesome ขึ้นมาดู ผลที่ได้คือแบบนี้ครับ

จะเห็นได้ว่า Screenshot ของเราได้ถูกเพิ่มเข้าไปใน Report เป็นที่เรียบร้อย สวยงามเลยทีเดียวครับ สามารถดู Mochawesome Report ตัวอย่างเต็มๆ ได้ที่นี่ครับ

เราสามารถนำหลักการนี้ไปใช้รันเทสและสร้าง Test Report ในระบบ Continuous Integration ได้เลยนะครับ เหมาะมากๆ ซึ่งจะช่วยทำให้เรามี Report สวยๆ เอาไว้ดูผลเทสและอ่านเข้าใจได้ง่าย เห็นภาพด้วยครับ สามารถดูตัวอย่าง Source Code ทั้งหมดได้จากลิ้งด้านล่างนี้เลยครับ หวังว่าจะมีประโยชน์กับทุกคนที่เขียนเทสนะครับ Happy Testing!

nottyo/cypress-e2e-code-coverage

Thanks to these cool lib: https://github.com/adamgruber/mochawesome, https://github.com/Antontelesh/mochawesome-merge