มาเขียนเทสอ่านค่า QR Code และ Barcode ด้วย Cypress กัน
ผมเชื่อว่าในปัจจุบัน หลายๆ Web Application โดยเฉพาะแอพที่ต้องมีการทำระบบชำระเงินต่างๆ (Payment) ก็มักจะมีการนำ QR Code และ Barcode เพิ่มเข้าไปในระบบเพื่อให้เกิด User Experience ในการใช้งานที่ดีขึ้น เช่น การสร้าง QR Code เพื่อให้ User สามารถจ่ายเงินผ่านระบบ Prompt Pay ได้ง่ายๆ หรือว่าจะเป็นการนำ QR Code ไปใช้กับการทำระบบตั๋วต่างๆ เพื่อยืนยันตัวตนว่าเราเป็นเจ้าของตั๋วจริงๆ หรือแม้กระทั่งระบบรับชำระเงินที่มีการสร้าง Barcode ที่สามารถนำไปชำระผ่านจุดรับชำระต่างๆ ได้เป็นต้น
โดยในมุมมองการเทสระบบแล้ว เราก็ควรจะต้อง Test ดูว่า QR Code หรือ Barcode ที่ระบบสร้างขึ้นมานั้นถูกต้องตาม Requirement ที่ควรจะเป็นไหม? บทความนี้จะขอแนะนำวิธีการเขียน Test การอ่านค่า QR Code และ Barcode ด้วย Cypress กัน ซึ่งทำได้ง่ายๆ เพียงโค้ดแค่ไม่กี่บรรทัดเท่านั้นครับ ตามมากันเลย!
หลักการเทส QR Code และ Barcode ที่ดี
ก่อนที่เราจะเริ่มไปเขียนเทสการอ่านค่า QR Code และ Barcode กัน ผมขอแนะนำหลักการเทส QR Code และ Barcode ที่ดีก่อน โดยมากแล้วการเทสที่เกี่ยวข้องกับ QR Code และ Barcode ก็มักจะมีอยู่ 2 แบบหลักๆ คือ
- ระบบสร้าง QR Code/Barcode มาให้แล้วให้ User เปิดกล้องเพื่อ Scan QR Code/Barcode นั้นแล้วนำข้อมูลที่ได้จากการสแกนไปใช้งานต่อ เช่นถ้าเป็นระบบ Payment ก็อาจจะได้ URL ที่สามารถ Link ไปยังระบบ Payment ของแอพธนาคารได้ เป็นต้น
- ระบบสร้าง QR Code/Barcode เฉพาะตัวของ User ขึ้นมาแล้วให้ User เปิดขึ้นมาเพื่อให้ร้านค้าสแกนเพื่อนำข้อมูลของ User ไปใช้งานต่อ ลองนึกภาพการจ่ายเงินด้วย Barcode ใน 7–11 ดูก็ได้ครับ
ซึ่งถ้าเป็นการเทสระบบแบบ Manual Testing เราก็คงจะเปิดกล้องของมือถือที่กำลังรัน Web App ของเราขึ้นมาจริงๆ และก็ลองทำการ Scan QR Code/Barcode จริงๆ ใช่ไหมล่ะครับ
แต่ในมุมมองของการเขียน Automated Test แล้วนั้น วิธีการทำแบบนั้นก็คงจะดูไม่เหมาะซักเท่าไร เพราะนั้นคือเรากำลังเทส Web API ที่ใช้ในการใช้งาน User Media Devices ซะมากกว่า ไม่ได้โฟกัสกับการเทส Web App ของเราจริงๆ
สิ่งที่เราควรทำเมื่อเขียนเทสลักษณะนี้ก็คือ เราแค่เช็คดูว่า QR Code/Barcode ที่ระบบสร้างขึ้นมานั้นถูกต้องตาม Spec หรือไม่? และ Data ที่อ่านมาได้ สามารถส่งต่อให้ระบบของเราหรือระบบอื่นๆ นำไปใช้งานต่อได้ ก็น่าจะเพียงพอแล้วครับ
มาอ่านค่า QR Code/Barcode ด้วย Cypress กัน
ถ้าคุณกำลังใช้ Cypress เขียนเทส Web App ของคุณอยู่แล้วล่ะก็ คุณสามารถทำให้ Test ของคุณอ่านค่า QR Code/Barcode ได้แบบง่ายๆ เลยล่ะครับ
เหตุผลก็เพราะว่าบน Cypress เราเขียนเทสด้วย Javascript/TypeScript ทำให้เราสามารถดึงเอา QR Code/Barcode Reader ตัวใดก็ได้ที่รองรับการรันบน Javascript บน Browser สามารถนำมาใช้งานร่วมกับ Cypress ได้เลย
ซึ่งในบทความนี้ผมจะขอแนะนำ Library ตัวหนึ่งที่รองรับการอ่านค่า QR Code/Barcode ได้หลากหลาย Format มากๆ นั่นก็คือ Library ที่มีชื่อว่า zxing-js นั่นเอง
zxing หรือ “Zebra-Crossing” คือ Library ที่ทำหน้าที่เป็น Multi-format Barcode/QR Code image processing ซึ่งแรกเริ่มเดิมทีถูกพัฒนาออกมาในภาษา Java และถูก port ออกไปในหลายๆ Programming Languages ซึ่งรวมถึง Javascript ด้วยในชื่อ zxing-js
ปัจจุบัน zxing-js รอบรับมาตรฐาน Barcode และรวมถึง QR Code ไว้ดังนี้ครับ
เริ่มต้นเขียนเทส QR Code/Barcode ด้วย Cypress
ในบทความนี้ ผมได้สร้าง Web ตัวอย่างง่ายๆ ที่สร้าง QR Code และ Barcode ออกมาเพื่อให้เราเทสดูว่า ค่าที่อยู่ใน QR Code และ Barcode นั้นเป็นค่าที่ถูกต้องหรือไม่? หน้าตาแบบนี้ครับ
- Install zxing-js library
เริ่มต้นคือ นอกจากเราต้อง install cypress เข้าไปใน Project เราแล้ว เราจะต้อง Install zxing-js library ซึ่งใช้ในการอ่านค่า QR Code/Barcode กันก่อน ซึ่งต้อง Install 2 ตัวคือ @zxing/library และ @zxing/browser เพื่อสามารถใช้งานบน Browser ได้
sh$ npm install cypress @zxing/library @zxing/browser2. เขียนเทสเพื่ออ่านค่า QR Code/Barcode ด้วย Cypress และ zxing-js กัน
ใน zxing-js นั้นจะมี module BrowserMultiFormatReader ที่เราสามารถใช้ในการอ่านค่า Code ในหลากหลายรูปแบบ (บน Browser) ได้ทั้ง QR Code/Barcode เลย โดยจะมี API ให้เราเลือกใช้ในการอ่านค่าได้หลายแบบ ทั้งการอ่านค่าจาก <img> โดยตรง หรือจะเป็นการอ่านค่าผ่าน Image URL ก็ทำได้เหมือนกัน ซึ่งในบทความนี้ผมจะลองให้มันอ่านค่าจากรูปที่ Render ด้วย <img> ใน Web ดูครับ
เทสข้อนี้คือทำการอ่านค่า QR Code ที่กำลังแสดงผลในเว็บโดยใช้ result ที่ได้จากการเรียก cy.get() แล้วนำ element ที่ select ได้มาทำการสร้าง HTMLImageElement แล้วเซตค่า property ต่างๆ เช่น src เข้าไป และหลังจากนั้นก็ใช้ QR Code Reader ของ zxing-js มาทำการอ่านค่า data ที่อยู่ใน QR Code แล้วก็ check ว่าเป็นค่าที่เรา expect ไว้หรือไม่ ซึ่งในตัวอย่างนี้ QR Code นั้นเก็บค่า https://www.cypress.io ไว้นั่นเอง
แต่ถ้าเราลองอ่านโค้ดนี้แล้วก็จะรู้สึกว่าโค้ดมันยาวมาก ต้องทำหลาย step กว่าจะอ่านค่า QR Code ออกมาได้ ดังนั้นเพื่อให้โค้ดอ่านเข้าใจง่ายขึ้น ผมจึงทำการสร้าง Cypress Custom Command ขึ้นมาเพื่อใช้ในการอ่านค่า QR Code/Barcode โดยเฉพาะแบบนี้ครับ
จะเห็นได้ว่าโค้ดสั้นลงเยอะ และเนื่องจากว่า reader.decodeFromImageElement() นั้น return ค่าเป็น Promise อยู่แล้ว ดังนั้นเราจึงสามารถใช้ Cypress Assertions ทำการ Chaining Call เพื่อ Check ค่า Property ที่อยู่ใน Decoded Result ต่อได้เลย ซึ่งก็จะทำให้เทสของเราอ่านแล้วเข้าใจได้ง่ายมากยิ่งขึ้น
ซึ่งในตัวอย่างนี้ก็จะเห็นว่าผมสามารถใช้ Custom Command เดียวกัน .readCode() อ่านค่าได้ทั้ง QR Code และ Barcode ได้ใน Command เดียวเลย ทำให้เราสามารถ Reuse การใช้งานมันกับ Test Cases อื่นๆ ได้อีกครับ
สรุป
ก็หวังว่าบทความนี้จะเป็นประโยชน์กับหลายคนที่อยากจะเทสระบบของตัวเองที่มีการใช้งาน QR Code/Barcode อยู่นะครับ สิ่งที่อยากฝากคือ ก่อนจะเริ่มต้นเขียนเทสขึ้นมาซักข้อหนึ่ง อยากให้นึกถึงว่าเรากำลังต้องการจะเทสอะไร แล้วเทสไปเพื่ออะไร มากกว่าที่จะเขียนเทสเพราะมันต้องเทสแบบที่ User ใช้งานเท่านั้นนะครับ ซึ่งจะช่วยให้เราสามารถโฟกัสกับสิ่งที่จำเป็นต้องเทสจริงๆ ได้ดีมากขึ้นครับ Happy Testing!
References:
