ทดลองเล่น Cypress.io Dashboard

ทดลองเล่น Cypress.io Dashboard

ก่อนอื่นบทความนี้จะไม่พูดถึง Cypress ครับ อยากให้ผู้อ่านทุกคนศึกษาได้จากลิงค์ด้านล่างเลยครับ

รู้จัก Cypress: Web Test Framework ที่จะทำให้คุณลืม Selenium ไปได้เลย
สวัสดีครับ หลายๆ คนในที่นี้ที่เป็น Dev/QA ที่ทำงานสาย Web Development ก็น่าจะเคยเขียน Web UI Test Automation…
medium.com

คร่าว ๆ เจ้า Cypress ก็คือ Test framework ที่กำลังมาแรงในตอนนี้ จากที่ผมทดลองใช้งานแล้วมันก็เป็นตัวนึงเลยที่ตอบโจทย์อย่างมาก ทั้งความเร็ว, การที่เป็นมิตรกับเว็บไซต์ที่เขียนด้วย JavaScript แบบขั้นสุด (เคลมเลยว่าสามารถเก็บได้ทุก Level ตั้งแต่ Unit, Integration และ E2E Testing), Step ของการทดสอบที่เราสามารถ Debug ไล่ได้แบบง่าย ๆ และ ผลของการทดสอบที่ออกมาแล้วสามารถดูง่ายมาก และ อีกหลายข้อที่คุ้มค่ามากกับการศึกษาและทดลองใช้กับงานดูครับ

วันนี้ผมจะมาพูดถึงตัว Cypress dashboard เพียงอย่างเดียวครับ ว่ามันคืออะไร? และ ทำอะไรได้บ้าง? และ สุดท้ายเราจะทดลองใช้งานกันแบบรวดเร็ว

Cypress Dashboard แบบรวบรัดเลยก็คือบริการเสริมจากเจ้าของ Cypress.io ที่ใช้ในการนำเอาผลของการทดสอบมาแสดงผลให้สามารถเรียกดูได้แบบง่าย ๆ ซึ่งผลการทดสอบของการรันก็จะออกมาเป็นไฟล์มากมาย อาทิ HTML และ Video บันทึกการทดสอบมาขึ้นยังเว็บไซต์นี้เพื่อให้ทีมสามารถเข้าถึงผลการทดสอบได้ง่ายยิ่งขึ้น เดี๋ยวเรามาลองดูกันว่าง่ายอย่างไรบ้าง

ทำไมผลการทดสอบที่เข้าถึงง่าย และ รวดเร็วมันถึงสำคัญนัก?

หัวใจที่สำคัญของการทำ Continuous Integration (CI) ก็คือการที่ผลลัพธ์ของการทดสอบจะต้องให้ Feedback กลับมาหาทีมพัฒนาได้ว่าสิ่งที่ได้ทำลงไปนั้นส่งผลกระทบอะไรกับระบบอื่น ๆ หรือไม่ได้อยากรวดเร็ว และ ถูกต้องตรงไปตรงมา เพื่อที่ทีมสามารถเข้ามาแก้ไขได้ทันท่วงที เพราะ ยิ่งเวลาผ่านไป Cost ของการแก้ไขบั๊กมันจะเพิ่มขึ้นเรื่อย ๆ เป็นเงาตามตัวครับ ดังนั้นการนำเสนอและการเก็บผลลัพธ์ของการทดสอบในแต่ละครั้งจึงเป็นสิ่งที่เราต้องคำนึงถึงอย่างมาก ผมเคยเจอเหตุการณ์ที่ทีมทราบว่าผลของการทดสอบนั้นไม่ผ่าน แต่สามารถไล่แก้ไขได้ช้าเนื่องจากไม่รู้ว่าจะเริ่มไล่หาที่จุดไหน สาเหตุหลักมาจากการเก็บผลการทดสอบไว้ในที่ที่เข้าถึงยาก ไหนจะเรื่องการสืบค้นที่ยากอีก ดังนั้นผลของการทดสอบมันจึงควรเข้าถึงได้ง่าย และ สืบค้นได้อย่างง่าย นั่นเอง

เมื่อลองมองกลับมาที่ Cypress ซึ่งตัว Test framework เองนั้นถูกสร้างอยู่บน Mocha ดังนั้นเค้าก็เคลมเลยว่าอะไรที่ใช้กับ mocha ได้ ก็สามารถนำมาสร้าง report ได้เช่นเดียวกัน #อ้างอิง

เราจึงสามารถบันทึกตัว Test result ของทาง mocha มาได้ดังตัวอย่างด้านล่าง ที่เก็บผลไว้และมาแสดงบน Circle CI ได้อย่างสวยงาม

cypress-io/cypress-example-docker-circle
Cypress + Docker + CircleCI = ❤️. Contribute to cypress-io/cypress-example-docker-circle development by creating an…
github.com

แต่ถ้าเราไม่อยากต้องมานั่ง config เองให้ยุ่งยากว่าหน้าตา Report ที่ออกมาจะเป็นอย่างไร, Report ที่ได้มาจะเก็บไว้ที่ไหน, ไฟล์วีดีโอ (Cypress มันมีการ record ขั้นตอนในการทดสอบไว้ด้วย ทำให้เราทราบปัญหาได้ง่ายขึ้น) และ อื่น ๆ อีกมากมายที่เราต้องทำในขั้นตอนการ config ตัว CI Server ปัญหานี้จะหมดไปเมื่อคุณได้ใช้งานเจ้า “Cypress dashboard” นั่นเอง…

Cypress dashboard ทำอะไรได้บ้าง?

  • เก็บผลการทดสอบไว้อย่างสวยงาม และ ใช้งานง่าย ด้วยการตั้งค่าเพียงไม่กี่ขั้นตอน

  • ช่วยเราดู Sequence ของการทดสอบได้ว่า เราควรรันแบบ Parallel ตัวไหนบ้าง จะได้ลดเวลาการทดสอบ แต่เดี๋ยวก่อน ของดีแบบนี้ไม่ฟรีน่ะครับ 55+ ลองดูค่าใช้จ่ายกันได้ที่นี่เลย

  • เราใช้งาน Dashboard ได้ฟรี!! แต่เดี๋ยวก่อน… มันฟรีแค่ Project ที่เราเปิดผลการทดสอบเป็น public ครับ (หากใช้แพลนฟรี ถ้าเลือกเป็น Private เราจะเก็บได้แค่ 5000 record เท่านั้น ซึ่งจะเป็นการเคลียร์ในทุกเดือนน่ะเท่าที่อ่านมา คือถึงยอดแล้วจบกันในเดือนนั้น) จึงเหมาะกับ Project ที่ไม่ได้ซีเรียสมากในเรื่องนี้ แต่ถ้าคุณอยากจ่ายตังก์ก็ตามลิงค์ด้านบน

จะเห็นว่าตัว Cypress มันออกแบบมาในรูปแบบของ Freemium นั่นคือการที่เราสามารถใช้งานได้ฟรีไม่อั้น แต่มันจะต้องมีบริการแบบ Top-up ขึ้นมา หากเราต้องการความสะดวกสบายที่เกี่ยวข้องกันกับ Cypress ซึ่งในอนาคตคงมีออกมาเรื่อย ๆ แน่นอนครับ จึงต้องลองดูกันต่อไปว่าจะมีบริการในที่ปล่อยออกมา และ ราคาจะมีการปรับเปลี่ยนเป็นอย่างไรบ้างในอนาคต

มาลองตั้งค่าเพื่อใช้งาน Cypress Dashboard กันดีกว่า!

  1. สร้างโฟลเดอร์ใหม่ขึ้นมาเพื่อเป็น workspace ในการทำงานของเรา

mkdir /your/project/path
cd /your/project/path

2. ทำการสร้าง initial project ก่อน

npm init

3. จัดการติดตั้ง dependency ที่ต้องใช้งาน (Cypress แนะนำว่าให้เราติดตั้งตัวมันผ่าน package.json ด้วย npm / yarn ไม่ควรติดตั้งแบบ global ครับ เหตุผลก็คือความเสี่ยงในการที่เวอร์ชั่นของการทดสอบแต่ละเครื่องจะไม่ตรงกันนั่นเอง)

npm install cypress -D

4. ทดลองสั่ง npx cypress openเพื่อเปิดการใช้งาน cypress แบบ GUI จะได้ดูผลด้วยว่าการติดตั้งของเรามีปัญหาตรงไหนไหม (สำหรับคำสั่ง npx สามารถศึกษาได้จากบทความนี้ครับ)

สามารถกด “Run all specs” เพื่อดูการทดสอบได้เลย

5. เมื่อกดการทดสอบเราจะพบว่ามีไฟล์รูป screen shot ของการทดสอบเกินขึ้นในโปรเจกต์ของเราในโฟลเดอร์ cypress/screenshotsครับ

6. ให้ทำการปิดหน้าจอต่าง ๆ และ command ก่อนหน้าที่รันอยู่ครับ ให้เราลองทดสอบด้วยคำสั่ง npx cypress run เพื่อทำการ Record วีดีโอของการทดสอบครั้งนี้ด้วย เราก็จะพบว่ามีโฟลเดอร์ cypress/vidoes เกิดขึ้นมา และ ภายในก็เต็มไปด้วยไฟล์นามสกุล mp4 หลายไฟล์ที่มีชื่อไฟล์ตาม spec ของเราที่มีมาให้

ไฟล์พวกนี้แหละครับ ที่แต่ละครั้งของการทดสอบจะถูกสร้างขึ้นมาและทำให้เราย้อนกลับมาดูได้แบบง่าย ๆ ว่ามันทดสอบอะไรไปบ้าง มีตรงไหนที่ผ่านหรือไม่ผ่านกัน ซึ่งเราก็อาจจะเลือกที่จะเขียนสคริปต์ให้หลังจากทดสอบเสร็จให้ทำการกวาดเอาไฟล์พวกนี้ไปเก็บไว้ที่ที่นึง ที่ทีมของเราเข้ามาดูผลได้ง่าย ๆ ก็ได้ แต่อย่างที่บอกไปด้านบนว่าเราจะทำให้เรื่องพวกนี้ง่ายขึ้นด้วย Cypress dashboard กันครับ

7. ให้ทำการสั่งคำสั่ง npx cypress open เพื่อเปิดการทำงานแบบ GUI ขึ้นมาอีกครั้งนึง กดไปที่แท๊บ “Runs” ด้านบนของหน้าต่าง จากนั้นทำการกด “Set up project to record” เราก็จะพบหน้าต่างขึ้นมาให้เราลิงค์ account github ของเราเข้ากับระบบ Cypress dashboard

8. เมื่อเข้าสู่ระบบได้สำเร็จ จะพบกับหน้าต่างให้กรอกชื่อ Project ของเราเอง โดย default มันก็จะไปดึงมาจาก project name ใน package.json นั่นเองครับ

9. แนะนำว่าสำหรับการทดสอบเราก็เลือกให้เจ้าของ Project นี้เป็นตัวเราเองก่อนก็ได้ครับ (มันสามารถสร้าง Organization ให้สมาชิกในทีมของเราเข้ามาดูได้)

และ ที่สำคัญให้เลือกเป็น public ไปก่อน สำหรับการทดสอบครับ หากต้องการใช้งานแบบ private ให้ลองศึกษาจากลิงค์ก่อนหน้าน่ะครับ

ขั้นตอนนี้สำคัญ ให้เรากด…. “Set up project”

10. เราก็จะพบหน้าจอแนะนำขั้นตอนการตั้งค่า Project ของเราเองดังนี้

  • ให้ทำเพิ่ม projectId ลงใน cypress.json ของเรา
  • เวลารันเพื่อให้ผลการทดสอบมันถูกเก็บลงใน Cypress dashboard ก็สั่งด้วยคำสั่งที่พ่วงไปด้วย key (key นี้เป็น secret ครับ มันควรเก็บหรือรันผ่าน ENV Variable น่ะครับ ไม่ควรอยู่ใน source code ของเราเอง)

ทดลองบันทึกผลการทดสอบด้วยคำสั่งด้านล่างเลยครับ

npx cypress run --record --key {{YOUR KEY}}

โปรดอ่านก่อนน่ะครับ… คำสั่งนี้เป็นการสั่งทดสอบและอัพโหลดผลการทดสอบขึ้นไปยังระบบเท่านั้น ไม่มีการอัพโหลด source code ของเราครับ ดังนั้นไม่ต้องห่วงว่าจะหลุดขึ้นไป แต่หากเราเปิดผลการทดสอบไว้เป็น public แล้วละก็อาจจะมีความเสี่ยงได้ นั่นคืออาจจะมีบางค่าที่มัน sensitive เช่น username หรือ password อยู่ในผลของการทดสอบ หรือ อาจจะทำให้คนอื่นได้เห็นหน้าตาของระบบที่เราไม่ต้องการเปิดเผย

11. เราก็จะสามารถเข้าไปดูผลการทดสอบได้ที่ https://dashboard.cypress.io ได้ จะพบว่าผลการทดสอบของเรานั้นมันถูกเก็บไว้อย่างสวยงามแล้ว ~~

ตอนนี้พวกเรากำลังใช้งาน Cypress ในการทดสอบอยู่ครับ ไว้ถ้าพวกเรามีเทคนิคเด็ด ๆ ที่พวกเราทดลองและใช้งานก็จะมาแชร์กันอีกน่ะครับผม

การทดสอบไม่ใช่การมัวเสียเวลาเครื่องมือที่ดีที่สุดเพียงตัวเดียว

คุณต้องตอบให้ได้ก่อนว่า ทดสอบทำไม ?ทดสอบอะไรบ้าง?ทดสอบอย่างไร?