Cypress Automate Testing (E2E) 101

Sharing is caring!

ความเดิมครั้งแต่เก่าก่อน

การทำ automate testing เป็นเรื่องที่ดูเหมือนจะไม่ค่อยได้รับความสนใจสักเท่าไหร่ในช่วงแรก ๆ ของการ build project เพราะด้วยเวลาที่มีอย่างจำกัดและประกอบกับ requirement ที่ยังไม่แน่นอนทำให้ feature ของ application ปรับเปลี่ยนอยู่ตลอดเวลา ทำให้การเขียนเทสเพิ่มความยุ่งยากในการเขียน test ยุ่งยากเข้าเพิ่มไปอีก

เป็นงานที่น่าเบื่อ ควรต้องมองหาตัวช่วยได้แล้ว

เมื่อ application ของเรา launch ออกไปได้สักระยะนึง เมื่อจำเป็นจะต้องเพิ่มเติม feature ของ application ขึ้นมาใหม่ในส่วนใดส่วนหนึ่งของระบบ ทำให้ต้องมีการ regression test ระบบ ( การ test เพื่อตรวจสอบ side effect ที่เกิดจากการ Change ) ถือเป็นงานที่ตจำเป็นต้องทำ automate test แล้วแหละ เพราะคุณจะรู้สึกเบื่อกับการต้องมานั่ง manual test แบบเดิมซ้ำ ๆ โดยมีความคิดอยู่ในหัว “งานแบบนี้ มันเพิ่มทักษะอะไรให้กับเรา มันคืองาน routine ที่น่าเบื่อ ดี ๆ นี่เอง”

https://medium.com/@jatinvsharma/how-can-manual-testers-survive-automation-ceaa9642fdf0

เมื่อจะเริ่มทำ automate test ต้องหาเครื่องมือที่ตอบโจทย์ของเราได้ใน ทุก ๆ สถานะการ

แต่ก่อนที่จะมีการกำเนิด cypress ที่กำลังจะกล่าวถึงในบทความนี้ ก็มี automate test tools ที่เกิดขึ้นมาแล้วอย่างมากมาย โดยมี robot framework (selenium framework) ซึ่งผม ก็เคยใช้มาก่อน และก็พบกับปัญหา ต่าง ๆ ขอยกตัวอย่างมาสักหน่อยก็แล้วกัน
1. Test Library dependencies management ทำได้ไม่ค่อยดี ไม่มี dependency management tool ช่วย ทำได้เต็มที่คือสร้าง requirements.txt เก็บ list ของ library เอาไว้ทำ pip install เอา (แต่ก็ไม่ 100% อยู่ดี)
2. Test Library บางตัวเขียนด้วยภาษา C (C Python) ทำให้การเอาไปรันบน ​OS ที่แตกต่างกันมักจะมีปัญหา หรือ install ได้ยากมากๆ เช่น cx_Oracle, SSHLibrary
3. การ install ค่อนข้างยาก เพราะมี dependency สูง เช่น python version มี support ทั้ง 2.x และ 3.x แต่ test library หลายตัวยังเขียน support บน 2.x อยู่เลย
เหล่านี้เป็นส่วนหนึ่งในปัญหาใหญ่ ๆ ที่คนเคยเขียน robot framework ต้องเคยเจอ ทำให้ความตั้งใจในการเขียน automate test ล้มเลิกไปเพราะ ความยุ่งยากและข้อจำกัดต่าง ๆ เหล่านี้

การมาของ Cypress Automate Testing (E2E Testing) ถือกำเนิดเกิดขึ้นมาเพื่อช่วย solve ปัญหาการประบวนการของ automate testing tools ที่ถูกสร้างขึ้นมาก่อนหน้าที่ cypress จะถือดำเนิดเกิดขึ้น cypress ถือเป็นการนำข้อเสีย (ข้อจำกัด) ของเหล่า automate tools ทั้งหลายมาถูกแก้ไข และก็มีข้อดีที่ถูกพัฒนาด้วย javascript จึงถือเป็น tools ที่น่าจับตามองในปี 2020 นี้

Cypress คือ

Cypress เป็น Test Framework ที่ถูก Design ขึ้นมาในปี 2014 (ถูกสร้างขึ้นหลัง Selenium 10 ปีเอง) โดยตัว Cypress จะถูกรันขึ้นมาอยู่ใน Run Loop Process เดียวกับ Web Application ของเรา ซึ่งเบื้องหลังการทำงานของมันคือ NodeJS Server

ติดตั้ง Cypress และ Hello world

Cypress ถูกพัฒนาบน NodeJS ฉะนั้นย่อมต้องมีที่ NPM (Node package manager) ไปติดตั้งกันเลย

mkdir cypress101
cd cypress101
npm init -y
npm install cypress@latest --save--dev

จบการติดตั้ง ต่อไปมาถึงขั้นตอน สั่ง cypress ให้เริ่มทำงาน

./node_modules/cypress/bin/cypress open

แก้ไข เพิ่ม npm run script เพิ่ม “cypress:open” : “cypress open”

{
  "name": "cypress101",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "cypress:open" : "cypress open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^4.2.0"
  }
}

รันคำสั่งถัดไป เพื่อ start cypress

npm run cypress:open

ทำการสร้างไฟล์ test spec ของเราที่ cypress\integration\hello\hello.spec.js

describe('first testcase', () => {
  it('hello world on google searching', () => {
      cy.visit('https://www.google.co.th/')
      .get('[aria-label="ค้นหา"]').type('hello world')      
      .get('[action="/search"]').submit()
  });
});

จากนั้นกลับมาที่หน้าจอ

click ที่ไฟล์ hello.spec.js

บทความนี้ก็ขอจบไว้เท่านี้ก่อน บทความหน้าจะเอาเรื่องการเขียน cypress step ถัดไป ขอบคุณที่ติดตามครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *