สวัสดีครับ ผมเชื่อว่าหลายคนที่พัฒนา Web Application ก็มักจะต้องสร้างระบบ Authentication เพื่อให้ User ทำการ Login เข้าใช้งานระบบกันมาบ้างใช่มั้ยครับ

ซึ่งในยุคนี้ต้องบอกเลยว่าหลายๆ คนก็คงจะไม่มาสร้างระบบ Authentication System กันเองแล้ว เพราะในปัจจุบันมีผู้ให้บริการระบบ Authentication System แบบพร้อมใช้มาให้เราเลือกใช้งานโดยเพียงแค่เรานำ App ของเราไปเชื่อมต่อกับระบบนั้นก็จะสามารถได้ ระบบการทำ Authentication ดีๆ มาใช้แล้ว ซึ่ง Firebase Authentication ก็ถือเป็นหนึ่งในตัวเลือกระดับต้นๆ ที่นักพัฒนามักจะเลือกมาใช้งานกัน เพราะมันใช้งานง่าย มี SDK และ Library ต่างๆ คอยสนับสนุนให้ใช้งานได้อย่างง่ายดาย

สำหรับใครที่ผ่านเข้ามาอ่านบทความนี้แล้วยังไม่รู้จักว่า Firebase Authentication คืออะไร ขอแนะนำให้อ่านบทความด้านล่างนี้ก่อนเลยครับ

ปัญหาอย่างหนึ่งที่เป็นปัญหาคลาสสิกของนักพัฒนาและ Testers หลายๆ ท่านก็คือ เวลาที่เราต้องการจะเทส Web Application ของเราที่มีระบบ Authentication อยู่แล้วนั้นเราจะต้องทำการ Login เข้าสู่ระบบของเราให้เรียบร้อยเสียก่อนถึงจะเริ่มเข้าไปเทส Feature ต่างๆ ภายในแอพได้ ซึ่งหลายคนก็มักจะติดปัญหาตรงนี้และเลิกล้มความตั้งใจในการเขียน Automated Test ให้กับระบบของตัวเองไปในที่สุด…


สวัสดีครับ บทความนี้เป็นบทความสั้นๆ ขอแนะนำ Plugin ตัวหนึ่งบน Cypress ที่น่าสนใจและอยากแชร์ให้หลายๆ คนลองนำไปใช้กัน นั่นคือการทำ Snapshot Testing ด้วย Cypress นั่นเอง

Snapshot Testing คืออะไร?

Snapshot Testing เป็น Testing Technique หนึ่งที่เรามักจะใช้ในการเขียนเทสที่เราสามารถ expect output ที่ได้จากการรันเทสอย่างชัดเจนและไม่มีวันเปลี่ยนแปลง ยกตัวอย่างเช่น เรา render Web Component ขึ้นมาและต้องการดูว่า DOM elements ต่างๆ ที่อยู่ใน component นั้นถูก render ออกมาโดยไม่มีการเปลี่ยนแปลงในแบบที่เราคาดไม่ถึง และจะต้องเรียงลำดับ hierarchy ในแบบที่เรา snapshot เก็บไว้ก่อนหน้านี้เท่านั้น

ซึ่งถ้าใครที่เคยเขียนเทสโดยใช้ Test Runner ชื่อดังอย่าง “Jest” แล้วล่ะก็ น่าจะเคยใช้งาน feature กันมาบ้างใช่มั้ยครับ เพราะเป็น feature ที่ค่อนข้างได้รับความนิยมมากๆ เลยทีเดียว

โดยในวันนี้เราสามารถนำเทคนิคการทำ “Snapshot Testing” มาใช้ในการเขียนเทสด้วย Cypress ได้แล้วโดยสามารถนำไปใช้ได้ทั้งการทำ Component Testing, API Testing หรือ End-to-End Testing เรียกว่านำไปใช้ได้กับการเขียนเทสทุก level เลยก็ว่าได้

ทำ Snapshot Testing สำหรับ Web Testing บน Cypress

การทำ Snapshot Testing บน Cypress นั้นก็ง่ายๆ ครับ เพียงแค่เรา install plugin @cypress/snapshot เข้าไปเพียงเท่านี้ก็สามารถใช้งานได้แล้วครับ…


Hi folks! In this article, I’ll show you how to write Component Testing your Next.js applications with Cypress. This could change your testing experience forever.

What is Component Testing?

Nowadays, web development has evolved. We usually design our website using a design pattern called “Web Components” which we can reuse anywhere on the web. Component Testing is a concept that we test the web component in isolation to see its behavior. With this concept, we can focus on only the specific component under test which is a pretty much different perspective comparing to another testing level like integration or end-to-end testing.


สวัสดีครับ บทความนี้จะขอพานักพัฒนาเว็บทุกท่าน มาเขียน Web Component Testing ให้กับ Next.js App ด้วย Cypress กัน ซึ่งจะทำให้คุณมีประสบการณ์การเขียนเทสที่ดีขึ้นอย่างที่ไม่เคยมีมาก่อนแน่นอน

Component Testing คืออะไร ?

เนื่องจากการพัฒนาเว็บในยุคนี้ส่วนใหญ่เราก็จะใช้การ design เว็บของเราออกมาเป็น Component ย่อยๆ เพื่อให้เราสามารถ reuse การใช้งาน Component นั้นๆ ในแต่ละหน้าในเว็บเราได้ ซึ่งการทำ Component Testing ก็คือการหยิบ Component ที่เราสร้างไว้มารันและเทสดูว่ามี behavior เป็นไปตามที่เราต้องการหรือไม่ โดยจะเป็นการเทสแบบ Isolate แยกกันในแต่ละ Component เพื่อ Scope เฉพาะ functionality ของ Component แต่ละอันแยกกัน ซึ่งจะแตกต่างกับการทำ End-to-End Test ที่เราจะ Deploy ประกอบร่างเว็บของเราทั้งหมดแล้วนำไปเทสกับ Server จริงๆ


เป็นประจำในทุกๆ ปีที่บริษัทเทคโนโลยีใหญ่ๆ ของโลกจะจัดงานสัมนานักพัฒนาประจำปี (Developer Conference) เพื่อรวมเอานักพัฒนาจากทั่วโลกมาร่วมกันแลกเปลี่ยนแชร์ความรู้และเทคโนโลยีต่างๆ เพื่อนำไปปรับใช้ในการทำงานของตัวเอง

แต่เนื่องด้วยสถานการณ์ของโรค COVID-19 ทำให้หลายๆ งานในปีที่แล้วมีอันต้องเลื่อนหรือต้องปรับเปลี่ยนรูปแบบของงานกันไป ซึ่งปีนี้ก็เช่นเดียวกันหลายๆ งานก็ต้องมีการปรับรูปแบบการสัมนากันใหม่ในรูปแบบออนไลน์แทน ซึ่งข้อดีก็คือนักพัฒนาอย่างเราสามารถเลือกเข้าฟังได้อย่างเต็มที่ ไม่ต้องไปลุ้น Lotto เพื่อลงทะเบียนเข้างานเหมือนปีที่ผ่านๆ มา แต่ข้อเสียก็อาจจะทำให้เราไม่ได้ไปสัมผัสบรรยากาศของงานสัมนาแบบได้เจอกันตัวเป็นๆ ได้พูดคุยแลกเปลี่ยนความรู้และทำ Workshop กันในแบบ Face to Face

เรามากางปฏิทินกันดูดีกว่าว่าในต้น-กลางปี 2021 นี้มีงาน Developer Conference อะไรที่น่าสนใจกันบ้าง

1. Google I/O 2021


ถือว่าสมกับการรอคอยจริงๆ สำหรับ Feature ใหม่ของ Cypress 7.0.0 ที่ประกาศรองรับการเขียน Component Testing อย่างเต็มรูปแบบ ผมได้ลองใช้ Feature นี้แล้วต้องบอกว่า “ว้าว” มากครับ วันนี้ผมจะมาแนะนำให้ทุกคนได้รู้จักและได้เริ่มเขียน Component Testing ไปพร้อมกันในบทความนี้เลยครับ

Component Testing คืออะไร?

ปกติแล้วในการพัฒนา Web Application ในยุคนี้แล้วส่วนใหญ่นักพัฒนาก็มักจะนิยมนำแนวคิดของการสร้าง “Web Components” มาใช้ในการพัฒนาเป็นส่วนใหญ่เลย และรวมถึง Web Frameworks ยอดนิยมในยุคนี้ก็นำแนวคิดนี้มาใส่อยู่ใน Framework ของตัวเองกันหมด ไม่ว่าจะเป็น React.js, Vue.js หรือ Angular.js ก็ตาม ด้วยเหตุผลที่ว่าเราจะได้ reuse components ที่เราสร้างไว้ได้ในหลายๆ Page ที่อยู่ใน Web Application ของเรานั่นเอง

ซึ่งปกติแล้วเวลาที่เราจะต้องการเขียนเทส Web Components ของเรานั้น เราก็มักที่จะนำ Component ที่เราสร้างขึ้นมานำมารันอยู่บน Node.js testing framework อย่าง jest หรือ mocha ซึ่ง Component ของเราก็จะถูกรันอยู่บน “Virtual Browser” ที่บางคนอาจจะรู้จัก ซึ่งนั่นก็คือ jsdom นั่นเอง

ส่วนตัวผมเองก็มีประสบการณ์การเขียน Component Testing บน jsdom แล้วก็พบปัญหาบางอย่างเช่น…


สวัสดีครับ วันนี้ผมจะมาแนะนำวิธีการสร้าง LIFF (LINE Frontend Framework) App ด้วย Web Framework ชื่อดังอย่าง Next.js และทำการ Deploy โค้ดของเราขึ้นไปรันบน Vercel Cloud แบบง่ายๆ กัน

Next.js คืออะไร?


สวัสดีครับ ในเดือนมีนาคม 2021 ที่ผ่านมา Google Chrome ได้ออก release เวอร์ชันใหม่ล่าสุด นั่นคือ Chrome 89 ซึ่งเพิ่มความสามารถใหม่ๆ มากมาย หนึ่งในนั้นคือการประกาศ Support Web Share API บน Desktop ที่ Chrome OS และ Windows แล้ว ถือเป็นอีกหนึ่งก้าวสำคัญของวงการ Web Development เลยทีเดียวครับ

Web Share API คืออะไร?

Web Share API คือ Web API ที่อนุญาตให้นักพัฒนาสามารถนำ Content ที่อยู่ในเว็บไซต์ของตัวเองแชร์ออกไปยัง App หรือ Platform ต่างๆ ได้แบบ Native ซึ่งก่อนหน้านี้ถ้าใครที่อยากจะแชร์ Content ของตัวเองออกไปใน App ต่างๆ ก็จะต้องทำเป็นลักษณะ Modal Dialog เพื่อ redirect page ไปยัง Sharer Page ของ App นั้นๆ รวมทั้งสิ่งที่จะแชร์ได้ก็มีเพียงแค่ Text หรือข้อความธรรมดาเท่านั้นด้วย


สวัสดีครับ ช่วงเดือนธันวา 2020 ที่ผ่านมา ผมได้มีโอกาสไปกินโอมากาเสะครั้งที่สองในชีวิต​ (ก่อนหน้านี้เคยไปทานโอมากาเสะที่ประเทศญี่ปุ่นมา 1 ครั้งถ้วน 55) และเป็นครั้งแรกที่ได้ลิ้มรสคอร์สโอมากาเสะในไทยด้วยครับ โดยในครั้งนี้ผมเลือกไปทานที่ Tenyuu Sho ร้านอาหารญี่ปุ่นระดับพรีเมียม ที่ห้าง Emquartier ครับ

การเดินทางมาก็สะดวกมากครับ สามารถนั่งรถไฟฟ้า BTS ลงที่สถานีพร้อมพงษ์​แล้วเดินเข้าห้าง Emquartier แล้วขึ้นลิฟท์มาที่ชั้น 8 โซน Helix เลี้ยวขวาออกมาจากลิฟท์เดินไม่กี่ก้าวก็จะเจอร้าน ​Tenyuu Sho แล้วครับ

โดยการจะมาทานโอมากาเสะที่ร้าน Tenyuu Sho นั้นเราจะต้องทำการโทรจองที่นั่งล่วงหน้าอย่างน้อย 3 วันนะครับ (ร้านจะไม่รับ Walk-in เพราะจะต้องให้เชฟทำการเตรียมวัตถุดิบตามจำนวนลูกค้าล่วงหน้า) และเราจะต้องมีการโอนมัดจำค่าอาหารก่อนด้วยครับ ส่วนค่ามัดจำเท่าไหร่นั้นขึ้นกับจำนวนคนที่เราจะมาทาน ซึ่งทางร้านจะแจ้งเราอีกทีตอนจะจองครับ


สวัสดีครับ จากประสบการณ์ของการเขียนเทสด้วย Cypress ของผมรวมถึงคำถามและปัญหาที่หลายๆ คนใน Cypress Thailand Community สอบถามกันมา ผมขอรวบรวมมาเขียนเป็นบทความแนะนำ 5 Best Practices ในการเขียนเทสด้วย Cypress ที่อยากให้ทุกคนนำไปลองปรับใช้กันดูครับ

1. Do NOT login your web app via UI

Traitanit Huangsri

Founder of Cypress.io Thailand. Lifelong Traveler

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store