[TH] Top 5 Chrome Extensions ที่ยกระดับ Non-Functional Testing บน Web/Web App

ปัจจุบัน Chrome เป็น Browser ที่คนใช้แพร่หลาย เนื่องจากมี UI และ UX ที่ใช้งานง่าย, supportทั้ง windows/mac OS และมีหลายๆ 3rd party tools ที่integrateกับมัน มาให้เลือกใช้

ในหลายๆทีมและองค์กร Chrome ถูกเลือกใช้เป็น main browser ที่ใช้ในการเทสงาน วันนี้เลยจะมาแชร์ Top 5 chrome extensions ทางเลือกของโบ ที่มีประโยชน์ต่อ Non-Functional Testing for web/web app กันค่ะ พร้อมภาพตัวอย่างเบื้องต้น เพื่อประกอบความเข้าใจ

1. WAVE (web accessibility evaluation tool)

Accessibility เป็นหนึ่งหัวข้อใน Non-functional testing ที่สำคัญและละเลยไม่ได้ เนื่องจากมีผลต่อการใช้งานของuserโดยตรง WAVEเป็นเครื่องมือที่ช่วยเทสว่า userสามารถเข้าถึงส่วนต่างๆของเว็บได้ดีแค่ไหนโดยใช้มาตรฐานจาก WCAG guidelines ซึ่งWAVEนั้นจะgenerate accessibility test reportออกมาให้เราทันทีหลังจากกดใช้งาน แถมยังบอกรายละเอียดของผลการเทสที่ไม่ผ่านมาตรฐาน ว่าเว็บของเราสามารถพัฒนาในจุดไหนได้อีกด้วย WAVEถูกยกย่องจากหลายๆที่ว่าให้เป็นเครื่องมือการเทส accessibility อันดับต้นๆเลยทีเดียว

2. LambdaTest

อีกหนึ่งNon-functional Testingที่น่าสนใจ คือcompatibility testing สิ่งที่ขาดไม่ได้เลยของหัวข้อนี้ บนการเทสเว็บนั้น คือcross browser testing, cross device testing และ cross operating system testing

ซึ่งเจ้าLambdaTestนี้ เป็นtoolที่สามารถเปิดurlของเว็บเรา ได้มากถึง25 กลุ่มเทสที่เราเลือก โดยแบ่งออกเป็น3หมวดหมู่หลัก คือ ประเภทbrowser, ประเภทdesktop/mobile view และ ประเภทoperating system โดยเราสามารถmix and matchกลุ่มเทสตามหมวดหมู่นี้ ในเวอร์ชั่นต่างๆได้เลย และเมื่อกดCapture ผลUIจากชนิดเทสที่เราเลือกนั้นจะออกมาให้เราเห็นได้ทันที

3. Lighthouse

Performance Testing กับ Usability Testing นั้นได้รับความสนใจเพิ่มขึ้นมากในยุคนี้ และเป็น 2 หัวข้อ Non-Functional Testingหลัก ที่หลายๆบริษัทโฟกัสที่จะพัฒนาเพราะมีผลกระทบกับ UX ค่อนข้างสูง

โดยLighthouseนั้นเป็นtoolที่สามารถจำลองสถานการณ์ต่างๆ เพื่อเทสเว็บของเราในwork flowsที่แตกต่างกันไป เช่น จำลองการเทสเว็บบนเน็ต3Gที่มีขีดเดียว, จำลองการเทสบสมือถือที่specต่ำหรือรุ่นเก่า, จำลองการเทสบนเน็ตที่ขาดหาย เพื่อเทสการใช้งานของเว็บเรา และเมื่อหลังจากการใช้งานเสร็จ จะมีการgenerate reportเพื่อแจ้งผล พร้อมให้คำแนะนำแนวทางการพัฒนาจุดที่เว็บของเราทำงานได้ยังไม่ดีพอ ตัวผลบนreportนั้นจะมี Performance(speedการโชว์ผลเว็บ), Accessibility, SEO, Best Practices (คะแนนของเว็บเมื่อเทียบกับbest practicesที่ควรทำ) และ Progressive Web App (redirect, response code, splash screen etc.)

Lighthouseยังสามารถนำมาintegrateกับ CI เพื่อให้ทดสอบเว็บของเรา continuously ได้ด้วย ไว้ว่างๆจะลองแชร์ส่วนนี้จริงจังในบทความอื่นเพิ่มเติมนะคะ

4. IE Tab

รู้หรือไม่ว่า ผลการresearchในหลายๆที่ เกี่ยวกับ browserที่คนใช้เยอะที่สุดนั้น พบว่า คนใช้งาน Internet Explorer (IE) นั้นมีมากกว่าFirefoxด้วยซ้ำไป ในขณะที่บางคนอาจไม่ได้สนใจใช้ และลืมมันไปแล้ว หลายๆครั้งการทำงานบน IE จะไม่ค่อยถูกเทส เนื่องจากTester/Devหลายๆคนจะใช้ MacOS ซึ่ง IE จะไม่ supportตรงนี้ ทั้งๆที่IE ดันเป็น main browser ของ target customers ของ software products ที่เรากำลังพัฒนาอยู่

ดังนั้นการเทสด้วย IE จะถูกละไปเลยไม่ได้ ทำให้เกิดการสร้างเจ้า IE Tabนี้ ซึ่งเป็นtoolที่ทำให้เราสามารถเข้าถึงurlที่เราอยากเทส บนIE ด้วยการรันมันผ่าน Chrome และให้เราสามารถเล่นเว็บของเรา ผ่าน IE ได้โดยสมบูรณ์ เป็นtoolที่ช่วยเหลือเรื่อง Cross Browser Testing สำหรับคนใช้MacOs ได้ดีเลยทีเดียว

5. Check My Links

การเทสว่าlinkทุกอันบนเว็บเรานั้นสามารถใช้งานได้จริง เป็นอะไรที่สมควรเทส เนื่องจากหลายๆครั้ง Environment Configuration Management หรือแม้แต่การset linkต่างๆของบางจุดในเว็บเราอาจจะมีการตกหล่น ทำให้linkในจุดนั้นๆเป็นlinkตาย เมื่อผู้ใช้งานกดไปเจอ จะทำให้ User Experience ลดลงได้

แต่การนั่งคลิ๊กทุกlinkบนเว็บนั้น เป็นtaskที่ซ้ำซ้อน เปลืองเวลา และอาจจะไม่ได้เป็นวิธีที่ดีสุดในการเทสในเรื่องนี้ ดังนั้น เราจึงมีเจ้าตัวtoolนี้ขึ้นมา ซึ่งCheck My Linksนั้น จะทำหน้าที่ทดสอบทุกlinkบนเว็บเรา ว่าvalidหรือไม่ โดยจะโชว์reportออกมาให้เราดูเมื่อเรากดใช้งาน หากมันเป็นlinkที่ใช้งานไม่ได้ จะมีการโชว์บอกอย่างชัดเจน เพื่อให้เราสามารถนำไปตรวจสอบต่อไป

แถม.. chrome extension สำหรับการเทส functional 1ตัว

BUG MAGNET

Toolตัวนี้ใช้สำหรับเทสการดักข้อมูลของtext fieldต่างๆ โดยจะช่วยgenerate dataที่เป็น edge cases(เคสขอบ ที่มักจะเจอบั๊คบ่อย จะมีพื้นฐานการสร้างข้อมูลมาจาก boundary value analysis) ให้เราเอามาใส่ช่องข้อมูลของสิ่งที่กำลังเทส มีประโยชน์ในการเทสทั้งในระดับ unit และ integration เลยดีเทียว

และแล้วเราก็มาถึงส่วนสุดท้ายของบทความนี้ จะเห็นได้ว่า Chrome Extensions ด้านบนที่พูดถึงไปนั้นมีประโยชน์ต่อการเทส Non-Functional Attributes และช่วยทุ่นแรงเราไปได้เยอะเลยทีเดียว ที่สำคัญคือเราสามารถติดตั้งมาใช้กันได้เลยฟรีๆอีกด้วย ลองนำไปใช้เทสกันดูค่ะ