PlusMagi's Blog By Pitt Phunsanit Automated Testing,devops,JavaScript,Node.js,Testing,Web E2E Testing with Cypress: การเขียน E2E Test สไตล์ Cypress, การใช้ Fixtures และ Custom Commands

E2E Testing with Cypress: การเขียน E2E Test สไตล์ Cypress, การใช้ Fixtures และ Custom Commands

ในโลกของการพัฒนาซอฟต์แวร์ที่ความเร็วคือสิ่งสำคัญที่สุด การปล่อยโค้ดใหม่ๆ ออกสู่ Production อย่างต่อเนื่อง (Continuous Deployment) ได้กลายเป็นมาตรฐาน แต่เบื้องหลังความรวดเร็วนั้น คือความท้าทายด้านคุณภาพที่ไม่อาจมองข้ามได้ หากระบบมีความซับซ้อนมากขึ้น ความเสี่ยงที่บั๊กจะหลุดรอดไปถึงมือผู้ใช้งานก็สูงขึ้นตามไปด้วย การทดสอบจึงไม่ใช่แค่ขั้นตอนเสริม แต่คือกลไกสำคัญที่ช่วยรับประกันว่าประสบการณ์ของผู้ใช้ (User Experience) จะราบรื่นและเชื่อถือได้ในทุกสถานการณ์


เจาะลึกรายละเอียดและประเด็นสำคัญ

การทดสอบ End-to-End (E2E) คือการจำลองพฤติกรรมของผู้ใช้จริงตั้งแต่ต้นจนจบกระบวนการบนแอปพลิเคชัน การเลือกเครื่องมือที่เหมาะสมจึงเป็นสิ่งสำคัญ และ Cypress ได้รับความนิยมอย่างสูงเนื่องจากสถาปัตยกรรมที่ทำงานในระดับ Browser ทำให้สามารถเข้าถึง DOM, Network, และ Local Storage ได้โดยตรง ซึ่งแตกต่างจากการทดสอบแบบเก่าๆ ที่อาจมีปัญหาเรื่อง Timing หรือการแยกส่วนของโค้ด

หัวใจของการเขียน E2E Test สไตล์ Cypress คือการใช้คำสั่งที่อ่านง่าย (Fluent API) และการจัดการข้อมูลที่ซับซ้อนผ่าน Fixtures และ Custom Commands การเรียนรู้ที่จะแยก Logic ออกจาก Test Case จะช่วยให้โค้ดของเรามีความสะอาด (Clean Code), สามารถนำกลับมาใช้ใหม่ได้ (Reusable), และทำให้ทีมพัฒนาสามารถบำรุงรักษาชุดทดสอบขนาดใหญ่ได้อย่างมีประสิทธิภาพ

// 1. การใช้ Fixture สำหรับข้อมูลจำลอง (Test Data)
import userData from './fixtures/user_data.json';

it('should successfully log in using fixture data', () => {
  cy.visit('/login');
  cy.get('#username').type(userData.username);
  cy.get('#password').type(userData.password);
  cy.get('button[type="submit"]').click();
});

// 2. การสร้าง Custom Command เพื่อลดความซ้ำซ้อน (Custom Commands)
Cypress.Commands.add('loginUser', (username, password) => {
  cy.visit('/login');
  cy.get('#username').type(username);
  cy.get('#password').type(password);
  cy.get('button[type="submit"]').click();
});

it('should log in using custom command', () => {
  cy.loginUser('testuser', 'securepass'); // ใช้คำสั่งที่กำหนดเอง
  cy.url().should('include', '/dashboard');
});


การนำไปประยุกต์ใช้ในชีวิตและการทำงานยุคใหม่

  • การสร้าง Test Suite ที่เป็นระบบ (Systematic Testing): การใช้ Fixtures ทำให้เราสามารถแยกข้อมูลที่เปลี่ยนแปลงได้ออกจากโค้ดทดสอบหลัก เมื่อมีการอัปเดตข้อมูลผู้ใช้งานหรือสถานะต่างๆ เราเพียงแค่แก้ไขไฟล์ JSON แทนที่จะต้องแก้ Logic ใน Test File ทั้งหมด ซึ่งช่วยลดโอกาสเกิด Human Error ได้อย่างมาก
  • การยกระดับทีมให้เป็น Developer-Centric Testing: การสร้าง Custom Commands เป็นการบังคับให้เราคิดถึง “Action” ที่เกิดขึ้นซ้ำๆ ในแอปพลิเคชัน (เช่น `cy.loginUser()`, `cy.selectProduct()`) และห่อมันไว้ในฟังก์ชันเดียว ทำให้ทุกคนในทีมสามารถเข้าใจและนำไปใช้ได้ทันที ไม่ว่าจะเป็น QA หรือ Developer ก็สามารถเขียน Test Case ได้อย่างรวดเร็ว

การเชี่ยวชาญ Cypress ในระดับที่ลึกซึ้งนี้ไม่ได้เป็นเพียงแค่ทักษะทางเทคนิค แต่คือการยกระดับมาตรฐานคุณภาพของผลิตภัณฑ์ทั้งหมด การลงทุนเวลาในการเรียนรู้แนวคิดเหล่านี้จะช่วยให้ทีมของคุณสามารถส่งมอบ Product ที่มีความเสถียรสูง (High Stability) และพร้อมรองรับการเติบโตในอนาคตได้อย่างมั่นใจ


อ่านเพิ่มเติม

Exit mobile version