Cypress.io Thailand

บทความแนะนำการเขียน Component Testing บน Next.js 13 ด้วย Cypress

Level up your testing game with Component Testing!

Learn best practices for structuring your app and customizing your testing experience, plus check out the new changes in Next.js version 13.

https://www.cypress.io/blog/2023/02/16/component-testing-next-js-with-cypress/?utm_medium=blog&utm_source=social_media&utm_term=linkedin&utm_content=blog_component_testing_nextjs

New Year New Look!
เว็บไซต์อย่างเป็นทางการของ Cypress กับ UI Design ใหม่สีสันสวยงาม อย่าลืมเข้าไปเยี่ยมชมกันนะครับ https://www.cypress.io

อัพเดตใหม่ใน Cypress 12.1.0 🫰

- เพิ่ม 2 commands ใหม่
👉 cy.getAllCookies(); ใช้ในการดึง cookies ทั้งหมดใน browser เพื่อใช้สำหรับ verify cookies ต่างๆ ได้ง่ายๆ
👉 cy.clearAllCookies(); โดยปกติแล้ว Cypress จะ clear all cookies ระหว่างการรันเทสแต่ละข้ออยู่แล้ว ดังนั้นจริงๆ แล้ว command นี้ไม่จำเป็นต้องเรียกใช้ ยกเว้นว่าเราอยากจะ clear cookies ใน step ของการรันเทสในข้อนั้นๆ หรือในกรณีที่มีการ disable "testIsolation" flag ไว้

- ปรับ behavior ของ "experimentalRunAllSpecs" flag ให้ทำการรันเทสทุกๆ spec files ใน new tab ของ browser แทนที่จะต้องปิดและเปิด browser ใหม่ ซึ่งจะมีผลทำให้การเทสของเราใช้เวลาน้อยลงด้วย

Cypress 12.0.0 มาแล้ว!

- เวอร์ชันนี้มาพร้อมกับการประกาศรองรับการทำ Multiple Origin Testing อย่างเต็มรูปแบบด้วยการใช้ cy.origin() เพื่อใช้เทส Web Application ข้าม Domain กันได้แล้ว ซึ่งจะทำให้เราสามารถเขียน Automated Test เพื่อทำการ Login ผ่าน Authentication System ข้าม Domain เช่น Google, Facebook Login ด้วย Cypress ได้อย่างเต็มที่แล้ว!

- โดยเราสามารถที่จะเลือกให้มีการ Cache, Restore Cookies, localStorage และ sessionStorage ได้อีกด้วย ซึ่งจะทำให้เทสของเราไม่ต้องทำ step login ซ้ำๆ กันในการรันเทสแต่ละข้ออีกต่อไป ซึ่งจะช่วยให้ใช้เวลาในการรันเทสน้อยลงอย่างมีนัยสำคัญ

- เพิ่ม config option "testIsolation" เข้าไปใน Test Suite ได้แล้วเพื่อทำให้เราสามารถ clean up test sate ต่างๆ ได้เช่น aliases, clock mocks, intercepts, routes, spies, stubes, viewport changes เป็นต้น ซึ่งเป็นหนึ่งใน "Best Practices" ที่ Cypress อยากแนะนำให้คุณเขียนเทสแบบ independent test เพื่อให้เกิด reliable tests ในระยะยาว

- Drop Support Node.js 12, 15 และ 17 เนื่องจากเป็นเวอร์ชันที่เข้าสู่สถานะ end-of-life แล้ว ทำให้ตอนนี้การ Install Cypress ในเครื่องของคุณจะต้องใช้ Node.js 14, 16 หรือ 18 ขึ้นไปแล้วนะ!

Cypress 11.0 มาแล้ว!
มาพร้อมกับการประกาศให้ Feature Component Testing บน Cypress เป็น GA (General Availability) แล้ว หลังจากอยู่ในสถานะ Beta มานาน ซึ่งจะทำให้ทุกๆ ความสามารถใน Component Testing จะถูก maintain และไม่มี breaking changes ไปจนกว่าจะมี major release ใหม่ในอนาคต
โดยปัจจุบัน Component Testing ใน Cypress รองรับการเขียนเทสบน Web Framework ชื่อดังมากมาย ไม่ว่าจะเป็น React, Vue, Next.js และ Angular แบบ ​GA support และ Svelte, Nuxt อยู่ใน Alpha support เช่นเดิม (และมีแพลนที่จะอัพเดตเป็น GA support ในอนาคต)
นอกจากนี้ Cypress ยังปรับปรุง Startup Performance ของแอพให้โหลดได้เร็วขึ้นกว่าเวอร์ชันก่อนๆ มากกว่า 85% เลย เมื่อคุณได้อัพเกรดแล้วจะเห็นความแตกต่างขึ้นอย่างแน่นอน
สามารถติดตามอ่านข้อมูลการอัพเกรดครั้งนี้อย่างละเอียดได้ที่ Official Blog ของ Cypress ที่ลิ้งค์นี้ได้เลย https://www.cypress.io/blog/2022/11/08/announcing-cypress-11

🎉10.10 แล้วอย่ามัวช็อปออนไลน์กันเพลิน เพราะ Cypress ออกเวอร์ชัน 10.10 เช่นกัน มีอะไรใหม่บ้างมาดูกัน
1. Force ให้การเรียกใช้ cy.origin() ใน url parameter ให้กำหนดค่าตาม origin url ของ auth เช่น จากเดิมที่ใช้เป็น https://foobar.com ได้ ตอนนี้จะต้องระบุเป็น https://www.foobar.com แล้วนะ
2. Fix การ Watch Files เมื่อมีการสั่งรัน Cypress Component Testing แบบ Run Mode แล้ว (จะ Watch Files ก็ต่อเมื่อรันด้วย Cypress open --component เท่านั้น)
3. ปรับปรุงเรื่อง Network Connection เมื่อรันเทสร่วมกับ Firefox v105 ให้ใช้งานได้ตามปกติแล้ว
ติดตามรายละเอียด Changes ทั้งหมดได้ที่ https://docs.cypress.io/guides/references/changelog #10-10-0

Cypress 10.9.0 ออกแล้ว! 🎉 มีอะไรใหม่บ้าง มาดูกัน

1. รองรับการ reuse cache session ข้าม spec files ได้แล้ว! โดยการเพิ่ม parameter "cacheAcrossSpecs" เข้าไปใน cy.session() ก็จะทำให้เราสามารถทำ login เพียงครั้งเดียวและ reuse ใช้ session เดิมในหลายๆ spec files พร้อมกันได้ เหมาะกับการนำไปรันแบบ parallel tests มากๆ

2. รองรับการ import Node.js dependencies ต่างๆ ใน cy.origin() แล้ว โดยปกติเราจะไม่สามารถเรียกใช้ node.js library ต่างๆ ใน callback function scope ของ cy.origin() ได้ ตอนนี้ทำได้โดยการเรียกผ่าน Cypress.require() ได้เลย

3. รองรับการ navigate cross-origin url ใน cy.origin() callback function แล้ว ซึ่งจะช่วยให้เราสามารถนำไปประยุกต์ใช้กับการทำ login ที่ต้องมีการทำ url redirect ข้าม origin กันได้แล้ว ปลดล็อคการเทสไปอีกขั้นเลย

ยังมีการอัพเดต feature และ bug fixes อื่นๆ เพิ่มเติมอีก สามารถไปดูได้ที่ https://docs.cypress.io/guides/references/changelog #10-9-0 เลยนะครับ

Cypress 10.8.0 ออกแล้ว! มีอะไรใหม่บ้างมาดูกัน 🎉

Cypress 10.7.0 ออกแล้ว มีอะไรใหม่ๆ บ้าง มาดูกัน

มาเริ่มต้นเขียน Angular Component Testing ด้วย Cypress แบบ Step by Step โดย Jordan Powell, DX Engineer ของ Cypress มาแนะนำด้วยตัวเองเลย

https://www.youtube.com/watch?v=weWTHGWe6uU

Getting Started with Angular Component Testing We are excited to announce that in Cypress version 10.5 we’ve added support for Component Testing in Angular! Cypress Component Testing provides a testable c...

Cypress 10.5.0 มาแล้ว Feature ใหม่ๆ เจ๋งๆ เพียบบ
🎉 รองรับการทำ Component Testing บน Angularjs แล้ว http://disq.us/t/49yoifk
🤓 แสดงผล Flaky Test Indicator ให้ใน Spec Explorer แล้ว
😘 เพิ่ม Scaffold การสร้าง React 18 Component Testing อย่างเต็มรูปแบบ
🫰เพิ่ม feature ในการ Scaffold Vue.js Component Testing ผ่าน Vue Component ได้โดยตรงเลย

อัพเดตได้ได้เลยวันนี้! มาเขียน Component Testing ด้วย Cypress กันเถอะ

Release v10.5.0 · cypress-io/cypress Changelog: https://docs.cypress.io/guides/references/changelog #10-5-0

Cypress 10.4.0 มาแล้ว! เพิ่มความสามารถใหม่ๆ บน Component Testing มากขึ้นอีก มีอะไรใหม่บ้างมาดูกัน
https://docs.cypress.io/guides/references/changelog #10-4-0

แนะนำการทำ Component Testing ด้วย Cypress
บทความโดยคุณ Sun Cerberus
https://life.wongnai.com/introducing-component-testing-cypress-9afa9f068f1

แนะนำ Component Testing — Cypress รีวิวการใช้ Component Testing + React

Cypress 10.0 มาแล้ว! 🎉

ถือเป็น Release ครั้งใหญ่ที่สุดของ Cypress เลยก็ว่าได้ ซึ่งในเวอร์ชัน 10 นี้มีการปรับปรุง features หลายอย่างเช่น
- Component Testing Beta มีการ Redesign Component Testing ใหม่ทั้งหมด ปรับสถานะจาก Alpha เป็น Beta แล้ว เพื่อให้นักพัฒนาทุกท่านสามารถเข้าถึงการเริ่มต้นเขียน Component Testing ให้กับ Web App ของตัวเองได้ง่ายขึ้น ดีขึ้น
- ปรับปรุงหน้าตา UI ของ Cypress Test Runner (Cypress App) ใหม่ให้ดูทันสมัยขึ้น โดยรวมเอาทั้ง e2e test และ component test มาใช้ UI Runner ตัวเดียวกันแล้ว
- เพิ่ม Helper ตัวช่วยที่จะช่วยให้คุณสามารถ Migrate มาใช้ Cypress 10.0 ได้อย่างง่ายๆ ผ่าน Cypress App

สามารถอ่านรายละเอียดการอัพเดตทั้งหมดแบบเต็มๆ ได้ที่ https://www.cypress.io/blog/2022/06/01/cypress-10-release/

หรือรับชมวิดีโอแนะนำ features ต่างๆ บน Cypress 10.0 ได้ที่ https://www.youtube.com/watch?v=lUuuQvOcNtI

Announcing Cypress 10 with Component Testing Beta! Hello, friends! Today, we have an exciting announcement to share. The title up above might have given it away, but in case you missed it, Cypress 10 is here 🎉! Cypress 10 is our most exciting release yet, and we have a lot to unpack, so let's dive in and look

Cypress ได้ถูกกล่าวถึงในงาน Google I/O 2022 กับเค้าด้วยย!
หนึ่งใน feature ล่าสุดของ Chrome DevTools ที่หลายคนอาจจะเคยใช้งานก็คือ Recorder Panel ซึ่งล่าสุดเราสามารถใช้ Recorder Panel ในการบันทึก Steps การใช้งาน Web App ของเราและทำการ Export ออกมาเป็น Test Case ที่เขียนด้วย Cypress ได้แล้ว!
ติดตามทั้งหมดนี้ได้ใน Session: "DevTools: State of the Union 2022" จากงาน Google I/O 2022
https://www.youtube.com/watch?v=YqWEqYa-evk

ใครอยากได้เสื้อ Cypress สวยๆ แบบนี้ยกมือ!
Cypress เพิ่งจะ release feature ใหม่นั่นคือ Cross-Origin testing with test isolation cy.origin() จึงอยากขอรับ feedback จากผู้ใช้งานจริงเพียงแค่ทำ 5 minute survey ก็มีสิทธิ์ลุ้นรับเสื้อยืด Cypress เท่ห์ๆ แบบนี้ไปใส่แล้วว
สามารถเข้าไปทำ Survey ได้ที่ https://bit.ly/3Mky45S

Cypress 9.6.1 มาแล้ว! มีอะไรใหม่บ้างมาดูกัน

บทความใหม่! ปลดล็อกการเทสที่ต้อง Login ผ่าน 3rd Party App ด้วย cy.origin() พร้อมตัวอย่างแบบจัดเต็มแถมการ optimize การทำ login แบบที่อ่านแล้วนำไปใช้ได้เลย
https://link.medium.com/aJ1raKCnFpb

ปลดล็อกการทำเทส 3rd Party Login ด้วย cy.origin() API พร้อมตัวอย่างจัดเต็ม ผมเชื่อว่าปัญหาที่หลายๆ คนมักจะเจอเมื่อเริ่มต้นเขียนเทสด้วย Cypress ก็คือเรื่องของการจัดการ Login หรือ ​Authentication Workflows...

Cypress 9.6.0 มาแล้ว!
มาพร้อมกับ feature ใหม่ที่หลายคนน่าจะรอคอยกันอยู่ นั่นคือ cy.origin() ที่รองรับการเขียนเทสแบบ Multiple-Domain Workflows แล้ว
นั่นคือเราสามารถทำให้ Test ที่เขียนด้วย Cypress สามารถเข้าถึงเว็บไซต์แบบข้าม Domain กันได้แล้ว
โดยเราสามารถนำไปประยุกต์ใช้งานกับการเทสระบบ Authentication System ต่างๆ เช่นทำ Auth0 Login เป็นต้น
สามารถอ่านบทความแนะนำการใช้งาน cy.origin() แบบเต็มๆ ได้ที่ https://www.cypress.io/blog/2022/04/25/cypress-9-6-0-easily-test-multi-domain-workflows-with-cy-origin/
นอกจากนี้ทีมงาน Cypress ยังได้ทำ Video แนะนำการใช้งาน API นี้อย่างละเอียด ติดตามชมได้ที่ https://www.youtube.com/watch?v=Fohrq5GZSD8

Cypress 9.5.4 มาแล้ว! มีอะไรใหม่บ้าง มาดูกัน

บทความใหม่! มาเขียนเทส QR Code และ Barcode ด้วย Cypress กัน
มีหลายคนสอบถามกันเข้ามามากว่า อยากได้ไอเดียการเขียนเทสเว็บที่มี QR Code ต่างๆ ควรจะเทสยังไงดี บทความนี้จะพาทุกคนไปดูวิธีการเขียนเทส QR Code/Barcode แบบง่ายๆ ด้วย Cypress โค้ดแค่ไม่กี่บรรทัดก็ได้แล้ว
อ่านบทความเต็มๆ ได้ที่ https://link.medium.com/lNthpAygdpb

มาเขียนเทสอ่านค่า QR Code และ Barcode ด้วย Cypress กัน ผมเชื่อว่าในปัจจุบัน หลายๆ Web Application โดยเฉพาะแอพที่ต้องมีการทำระบบชำระเงินต่างๆ (Payment) ก็มักจะมีการนำ QR Code และ Barcode.....

มาแล้ว! 2 Features ใหม่บน Cypress Dashboard ด้วยความสามารถทำงานร่วมกับ 2 Source Control ใหญ่
1. GitHub Enterprise
2. Gitlab Self-managed source control
ทั้ง 2 คือ Source Control ที่หลายๆ บริษัทน่าจะใช้งานกันอยู่แล้ว ซึ่งการทำ Integration ร่วมกับทั้ง 2 ค่ายจะช่วยทำให้คุณสามารถ Track ผลเทสของ Cypress ตาม Commit ID ของโค้ดของคุณได้อัตโนมัติ อีกทั้งยังมีความสามารถอื่นๆ ที่น่าสนใจ เช่น การแสดงผลเทสด้วย Cypress บน PR ของคุณแบบสวยๆ ทำให้คุณสามารถ Track การแก้โค้ดที่ส่งผลให้เทส Failed ได้อย่างแม่นยำ ซึ่งมีประโยชน์โดยตรงกับระบบ CI Pipeline ของคุณเอง!
2 Features นี้สามารถใช้งานได้กับลูกค้ากลุ่ม Business และ Enterprise Plans นะครับ
อย่างไรก็ตาม คุณสามารถทดลองใช้งาน Cypress Dashboard ได้ฟรี! สามารถอ่านรายละเอียดเพิ่มเติมได้ที่ https://www.cypress.io/blog/2022/04/06/new-for-dashboard-github-gitlab-enterprise-integrations

New for Cypress Dashboard: Enterprise Integrations for GitHub and GitLab 🎉

Our new integrations automatically track and expose Cypress test results with every code commit to GitHub Enterprise and GitLab Self-managed source control, providing test results within developers' preferred source control solution.

https://www.cypress.io/blog/2022/04/06/new-for-dashboard-github-gitlab-enterprise-integrations/

Cypress 9.5.3 มาแล้ว! มีอะไรใหม่ๆ บ้าง มาดูกัน

https://docs.cypress.io/guides/references/changelog #9-5-3

เปิดตัว "Real World Testing with Cypress" Official Learning Portal ใหม่จาก Cypress พร้อม 4 Free Online Courses ที่จะช่วยสอนทุกอย่างที่คุณต้องรู้เกี่ยวกับการเขียน Test ด้วย Cypress ตั้งแต่ระดับ Basic ไปจนถึงขั้น Advanced
สำหรับใครที่ยังไม่เคยเขียน Test ด้วย Cypress มาก่อน หรืออาจจะเคยลองใช้งานแล้วอาจจะยังไม่ค่อยเข้าใจหลักการทำงานของ Cypress วันนี้ Cypress ได้สร้าง Learning Portal ใหม่เพื่อให้นักพัฒนาหรือ QA ทุกคนได้เข้าไปเรียนรู้การใช้งาน Cypress ด้วยตัวเองได้ฟรี แบบที่หาที่ไหนดีกว่านี้ไม่ได้แล้ว
ซึ่งภายในเว็บไซต์จะประกอบไปด้วย 4 Free Online Courses ที่จะสอนการเขียน Test ที่ดีให้กับคุณเริ่มต้นจาก

1. Testing Your First Application: เริ่มต้นการเขียนเทสให้กับ Web Application ด้วย Simple ToDo MVC App แบบง่ายๆ โดยใช้ Cypress

2. Testing Foundations: หลักการพื้นฐานสำคัญที่คุณควรรู้ก่อนเริ่มเขียน Test เรียนรู้วิธีการเขียนเทสที่ดีเป็นอย่างไร "Testing Mindset" ที่จะช่วยให้คุณรู้ว่าควรจะต้องเทสอะไร รวมถึงความแตกต่างระหว่าง Manual Testing กับ Automation Testing และ Test Level ต่างๆ ตั้งแต่ Unit Test, Integration Test และ End-to-End Test ว่ามันต่างกันอย่างไร

3. Cypress Fundamentals พื้นฐานการใช้งาน Cypress เบื้องต้น การใช้งาน Cypress API ต่างๆ รวมถึงการเข้าใจหลักการทำงานของ Cypress เช่น Asynchronous Nature of Cypress, วิธีการ Debug Failed Tests ต่างๆ

4. Advanced Cypress Concepts ก้าวไปอีกขั้นถึงการใช้ Advanced Technique ในการเขียนเทสด้วย Cypress เช่นการทำ Network Interception, Build CI Pipeline, Integration API Tests เป็นต้น
ขอย้ำว่า ทั้งหมดนี้คุณสามารถเข้าไปเรียนรู้ด้วยตัวเองได้ฟรี! และถึงแม้ว่าคุณจะเคยใช้หรือใช้งาน Cypress อยู่เป็นประจำอยู่แล้ว ก็ขอแนะนำให้เข้าไป refresh ความรู้ของตัวเองได้เช่นกัน เพราะอาจจะมี updates ใหม่ๆ ที่คุณอาจไม่เคยรู้มาก่อนก็ได้
สามารถเข้าไปเริ่มเรียนได้แล้วตั้งแต่วันนี้ที่ https://learn.cypress.io/

Have fun and Happy Testing!

ข่าวสั้นทันใจ! Recorder Panel ใน ChromeDevTools เตรียมใช้ data-testid เป็น default selectors หลักในการ ทำ record & replay web user flow
หากใครที่ติดตาม feature ใหม่ๆ บน Chrome Developer Tools ก็คงจะเคยได้ยิน feature "Recorder Panel" ที่ Chrome ใส่มาให้ใช้งานได้ตั้งแต่ Chrome v97
ซึ่งล่าสุดใน Chrome v100 ที่กำลังจะมาถึงนี้ ทาง ChromeDevTools ได้มีการปรับ selector ในการเข้าถึง Element ต่างๆ เวลาที่มีการเรียกใช้งาน "Recorder Panel" ใหม่ โดยให้ priority กับ "Custom Data Attribute" เช่น
- data-testid
- data-test
- data-qa
- data-cy(press)

และอีกหลายตัวเป็น priority สูงสุดในการเลือกใช้เป็น selector ที่ปกติ Developers หรือ QA จะใช้สำหรับนำไปเขียน Test Automation ต่างๆ อยู่แล้วก็จะถูกนำมาใช้กับการทำ Record & Replay Web User Flow ใน Chrome เช่นกัน
โดยถ้าตัว Recorder สามารถ detect เจอ "Custom Data Attribute" ใน Web Element ได้ก่อน มันก็จะใช้ selector เป็น custom data attribute ทันที แต่ถ้าไม่เจอก็จะใช้ selector เป็นค่าอื่นๆ ตามที่จะใช้ได้แทน
ซึ่งการปรับปรุงครั้งนี้จะช่วยให้ Chrome Recorder Panel สามารถทำงานได้อย่าง “แม่นยำ” มากขึ้น ลดภาระของผู้ใช้ที่จะต้องคอยมาตามแก้ Selector เองทีหลังได้
ยังไงก็เตรียมรอใช้การปรับปรุง Recorder Panel นี้ได้ตั้งแต่ Chrome v100 เป็นต้นไป หรือถ้าใครอยากลองใช้ก่อนก็ลองไปดาวน์โหลด Chrome Canary version มาลองก่อนได้ แอดมินลองเล่นแล้ว แจ่มว้าวมากๆ ครับ

https://developer.chrome.com/blog/new-in-devtools-100/

Cypress 9.5.2 มาแล้ว! มีอะไรใหม่ๆ บ้างมาดูกัน


https://docs.cypress.io/guides/references/changelog

New Blog Post!
ปัญหาที่ QA หรือ Automated Testers หลายคนน่าจะเจอกันบ่อยๆ ก็คือการที่เราเขียนเทสแล้ว "หา Element ไม่เจอ" ซึ่งเป็นปัญหา Classic ที่แก้ไม่ตกกันเสียที
บทความนี้จะขอแนะนำวิธีการเลือกใช้ Selectors ให้เหมาะสมกับการเขียน Automated Test และรวมถึงการแก้ไขปัญหาเรื่อง "หา Element ไม่เจอ" ด้วย Practice ที่จะทำให้คุณไม่ต้องเจอปัญหาแบบเดิมๆ อีกต่อไป
ติดตามทั้งหมดได้ในบทความนี้ครับ
หมดปัญหาการหา Element ไม่เจอเวลาเขียน Web Automated Test โดยใช้ Eslint Plugin https://link.medium.com/QjNSuVosaob

หมดปัญหาการหา Element ไม่เจอเวลาเขียน Web Automated Test โดยใช้ Eslint Plugin สวัสดีครับ ปัญหาที่ Automation Testers หลายๆ คนมักเคยเจอกันเมื่อเริ่มต้นเขียน Automated Test ให้กับ Web Application ของตัวเองก็คือ พอใส่…