มาสร้าง Plugin เจ๋งๆ ใช้งานบน Cypress กันเถอะ (แชร์ให้เพื่อนใช้ได้ด้วยนะ)

หนึ่งใน Feature ที่เป็นจุดเด่นมากๆ ของ Cypress ก็คือการที่เราสามารถสร้าง “Plugin” หรือส่วนเสริม (Extension) ที่จะช่วยให้เราสามารถเพิ่มความสามารถให้กับ Cypress ได้ด้วยตัวของเราเอง ซึ่งทำให้เราสามารถต่อยอดไอเดียที่เราอยากให้เกิดขึ้นเวลาที่เราเขียนเทสได้อย่างไม่มีข้อจำกัดนั่นเอง ดีงามมากๆ

ซึ่งในบทความนี้ ผมจะขอพาทุกท่านไปดูวิธีการเขียน Plugin ใช้งานร่วมกับ Cypress อย่างง่ายๆ และคุณยังสามารถที่จะ Publish Plugin ของคุณเพื่อแจกจ่ายให้เพื่อนๆ หรือ Developers/QA ทั่วโลกได้ใช้งานได้อีกด้วย

รู้จัก Cypress Plugin กันก่อน

ถ้าใครที่เคยใช้ Cypress กันมาบ้าง อาจจะเคยสังเกตเห็น folder หนึ่งใน scaffold structure ที่ Cypress สร้างมาให้หลังจากการที่รันคำสั่ง cypress open ครั้งแรก นั่นก็คือ folder “plugins” นั่นเอง

ซึ่งในโฟลเดอร์​ plugins นี้ Cypress จะอนุญาตให้เรา configure plugin ต่างๆ ที่เรานำมาใช้งานได้ และรวมถึงถ้าเราอยากจะสร้าง plugin มาใช้เอง ก็สามารถเขียนไฟล์ plugin มาใช้ภายใต้โฟลเดอร์นี้ได้เช่นกัน

โดย Plugin ที่เราสามารถนำมาต่อยอดความสามารถของ Cypress ได้นั้นสามารถแบ่ง Use Cases ออกเป็น 3 ประเภทหลักๆ ดังนี้

1. Configuration: เราสามารถเข้าถึงและเปลี่ยนแปลงค่า Configuration Parameters ของ Cypress ทั้งหมด (แบบ on-the-fly) ได้ผ่านตัว Plugin ยกตัวอย่างเช่น การทำ Configuration Parameters แยกตาม Test Environment ต่างๆ (Beta, Staging, Production) หรือจะเป็นการอ่านค่า Configuration Parameters ด้วย ​Format ที่เราต้องการเช่น .yml , .env เป็นต้น โดยเราสามารถเข้าไปอ่าน Configuration API ที่ Cypress ได้เตรียมไว้ให้เพื่อที่จะนำไปใช้กับตัว Plugin ที่เราจะสร้างขึ้นได้เลย
2. Event Handling: Cypress อนุญาตให้เราเข้าถึง Event ต่างๆ ที่เกิดขึ้นระหว่างการรันเทสได้มากมาย เพื่อที่จะให้เราสามารถ Hook เพื่อรันโค้ดอะไรบางอย่างในแต่ละ Event ได้ เช่น
   2.1 Preprocessors: คือการ Preprocess test code ต่างๆ ที่เราเขียนขึ้นมา ยกตัวอย่างเช่นสมมติว่าเราต้องการที่จะใช้ Syntax ของ ES2021 ในการเขียนเทสด้วย Cypress ก็ย่อมทำได้ เพียงแค่เรามี transpiler plugin ที่สามารถแปลงโค้ดที่ใช้ syntax ES2021 เป็น ES2015 ที่ Cypress รองรับได้ก็สามารถทำให้การเขียนโค้ดของเราดูดีมากขึ้นได้ง่ายๆ เลย
   2.2 Lifecycle: เราสามารถ Listen to Event ต่างๆ ที่เกิดขึ้นระหว่างรันเทสได้มากมาย ไม่ว่าจะเป็น before:run , after:run , before:spec , after:spec , before:browser:launch , after:browser:launch , after:screenshot เป็นต้น โดยในแต่ละ Event ก็จะมี Event Hook Object ที่แตกต่างกันไป ยกตัวอย่าง Use Case ที่อาจจะเห็นได้ชัดก็คือ การทำ Auto Screenshot Capture ทุกครั้งที่เกิด Test Failed เป็นต้น (อันนี้ Cypress ทำให้โดยอัตโนมัติอยู่แล้ว) หรือจะเป็นการ Enable, Disable Browser Extension ก่อนและหลังจากการเปิด/ปิด Browser ก็ทำได้เช่นกัน
3. Run Node.js Code ผ่าน cy.task(): เราสามารถรัน Node.js โค้ดได้ผ่านการเรียกคำสั่ง cy.task() ได้เลย เช่นการทำ Seed ค่าลง Database เป็นต้น

มาลองเริ่มเขียน Plugin และ Publish ขึ้น NPM Registry กัน

ในบทความนี้ ผมจะมาแนะนำการเขียน Cypress Plugin แบบที่สามารถ Publish ขึ้น NPM Registry เพื่อให้เพื่อนของเราสามารถ Download Plugin ของเราไปใช้งานได้ด้วย

โดย Plugin ที่ผมจะสร้างขึ้นมาในวันนี้จะเป็น Test Reporter ที่สามารถส่งผลเทสของเราเข้าไปที่ LINE ได้ผ่านบริการ “LINE Notify” ได้แบบง่ายๆ ฟรีๆ กัน

สำหรับใครที่ยังไม่รู้ว่า “LINE Notify” คืออะไร ? สามารถเข้าไปอ่านบทความนี้เพิ่มเติมก่อนได้นะครับ

ไม่พลาดทุกการสื่อสารกับผู้ใช้บริการของคุณ ด้วยระบบแจ้งเตือนผ่าน LINE Notify

1. สร้าง Plugin Project กันก่อน

ผมเริ่มต้นด้วยการสร้าง Node.js Project ขึ้นมา​โดยในที่นี้ผมเลือกใช้ yarn เป็น Package Manager นะครับ

sh$ mkdir cypress-linenotify-reporter
sh$ yarn init

เมื่อได้ Project เป็นที่เรียบร้อยแล้ว ผมจะทำการ Install Dependencies ที่ต้องใช้สำหรับส่งข้อความ LINE Notify นั่นก็คือ axios นั่นเอง

sh$ yarn add axios

2. เริ่มสร้าง Plugin

ตัว LINE Notify Reporter Plugin นี้ผมจะใช้การทำ Event Handler (ข้อ 2) เพื่อ Listen to after:run Event เพื่อที่จะนำผลการรันเทสที่ได้ส่งผ่าน LINE Notify โดยการเรียก API ของ LINE Notify นั่นเอง

ผมสร้างไฟล์​ src/index.js เพื่อทำการ Listen to after:run Event ของ Cypress ไว้แบบนี้ครับ

โค้ดตัวอย่างด้านบนคือการรอรับ event after:run โดยที่เมื่อฟังก์ชัน onAfterRun ถูกเรียกด้วย Cypress แล้วนั้นจะมีการส่งค่า results มาให้ด้วย ตาม After Run API ที่ Cypress เขียนไว้ทุกประการครับ และเราก็จะทำการดึงค่าต่างๆ ที่อยู่ใน results ออกมาเพื่อส่งต่อให้กับ LINE Notify อีกทีนั่นเอง เช่น Number of Tests, Number of Passed, Failed Tests, Test Duration เป็นต้น

หลังจากนั้นผมทำการสร้างไฟล์ notify.js เพื่อทำการเรียก LINE Notify API เพื่อที่จะส่งผลเทสเข้าไปผ่าน LINE Notify ได้นั่นเอง

ฟังก์ชัน lineNotify คือการทำ HTTP Post ไปที่ LINE Notify API https://notify-api.line.me นั่นเอง โดยเราจะต้องเข้าไป Generate LINE Notify access token ที่เว็บไซต์ของ LINE Notify ก่อนนะครับ ซึ่งวิธีการก็ง่ายมากๆ ดังนี้

1. ไปที่ https://notify-bot.line.me/my/ ทำการ Login ผ่าน LINE Login ให้เรียบร้อย

2. เลื่อนลงมาด้านล่างสุดจะมีปุ่ม “Generate Token” ให้กดปุ่มนี้และทำการเลือกว่าจะให้ส่งข้อความไปที่ไหน จะเป็น 1:1 Chat กับ LINE Notify ก็ได้ หรือจะส่งเข้าไปใน LINE กลุ่มก็ทำได้เช่นกัน

3. หลังจากนั้นก็กดปุ่ม “Generate token” อีกครั้งเราก็จะได้ค่า ​token มาค่านึง ให้เรา copy เก็บไว้ให้ดีๆ (ห้ามหายนะครับ เพราะ Generate ใหม่ไม่ได้) เพราะเราจะใช้มันทุกครั้งในการส่งข้อความเข้า LINE Notify ครับ

3. Publish Plugin ขึ้น NPM Registry

หลังจากที่เราสร้าง Plugin เสร็จแล้ว ผมได้ทำการ publish plugin ของผมขึ้นบน NPM Registry เป็นที่เรียบร้อย ทุกท่านสามารถ Install Plugin ตัวนี้มาใช้ใน Cypress Project ได้เลยนะครับ

sh$ npm publish

cypress-linenotify-reporter

4. เรียกใช้งาน Cypress LINE Notify Reporter

ผมทดลองสร้าง Cypress Project ขึ้นมาใหม่ แล้วทำการ Install Plugin ตัวนี้เข้าไป

sh$ yarn add -D cypress cypress-linenotify-reporter

เมื่อ Install Plugin ตัวนี้เสร็จแล้ว ให้เราไปที่ cypress/plugins/index.js เพื่อทำการเรียกใช้งาน Plugin ตัวนี้กันครับ

โดยผมได้ทำการส่งค่า on เพื่อใช้ในการ Listen Event ของ Cypress และ config เพื่อทำการอ่านค่า Config ของ Cypress มาใช้งาน

หลังจากนั้นที่ไฟล์ cypress.json ให้ทำการเพิ่ม Configuration Parameter ตัวนึงเข้ามาซึ่งก็คือ lineNotifyToken เพื่อใช้ในการส่ง Test Result ผ่าน LINE Notify นั่นเอง

5. ทดลองรัน Test และเรียกใช้ LINE Notify Reporter Plugin

เราจะลองรันเทสด้วยคำสั่ง cypress:run เพื่อดูว่ามันจะส่งผลเทสผ่าน LINE Notify ได้จริงหรือไม่กันดูครับ

sh$ yarn cypress run

ผลเทสของเราเข้ามาใน LINE แล้ว

เมื่อรันเทสเสร็จแล้ว จะเห็นได้ว่ามีผลเทสส่งตรงเข้า LINE Notify OA เป็นที่เรียบร้อย สวยงามเลยครับ

สรุป

นี่คือวิธีการง่ายๆ ที่คุณสามารถสร้าง Cypress Plugin ด้วยตัวของคุณเองเพื่อต่อยอดความสามารถให้กับ Cypress ได้ และนอกจากนี้คุณยังสามารถแบ่งปัน Plugin เจ๋งๆ ของคุณให้เพื่อนๆ หรือนักพัฒนาทั่วโลกได้ใช้งานได้อีกด้วย

ในปัจจุบันมีผู้พัฒนา Plugins ต่างๆ เพื่อนำไปใช้ร่วมกับ Cypress มากมาย โดยคุณสามารถเข้าไปดู Plugin ยอดนิยมทั้งหมดได้ที่ลิ้งค์ด้านล่างนี้เลยครับ

Plugins | Cypress Documentation

นอกจากนี้ถ้าคุณอยากเข้าไปดูโค้ดเต็มๆ ของ Cypress LINE Notify Reporter Plugin ที่ผมสร้างไว้ สามารถเข้าไปดูได้ที่ลิ้งค์ด้านล่างนี้ได้เช่นกัน ถ้าเกิดลองนำไปใช้งานแล้วเจอปัญหาอะไรก็สามารถสร้าง Issues ไว้ได้เลยนะครับ

GitHub - nottyo/cypress-linenotify-reporter: Test Reporter via LINE Notify

หวังว่าบทความนี้จะเป็นประโยชน์กับทุกท่านที่เขียนเทสด้วย Cypress อยู่และถ้าท่านมีไอเดียอะไรดีๆ ก็อย่าเก็บไว้กับตัวครับ พัฒนามันออกมาเพื่อให้ Cypress ของทุกคนมี Plugin เจ๋งๆ ได้ใช้กันมากขึ้นกว่านี้ Happy Testing!