[QA] Cypress คืออะไร | ลองใช้ Cypress ฉบับ Beginner

What is Cypress? มาทำความรู้จักกันค่า

ฮัลโหล กลับมาแล้วนะคะทุกคน วันนี้มิ้นจะมาเขียนบทความ เพื่อทำความเข้าใจเกี่ยวกับเจ้าตัว cypress.io เนื่องจากเมื่อวานมิ้นได้เข้าไปงาน Cypress.io Workshop For Beginner ที่บริษัท Appman ได้จัดขึ้นมาค่ะ ซึ่งถ้าพี่ ๆ ผ่านมาเห็น ก็ต้องขอบคุณพี่ ๆ ทุกคนที่ได้มาแบ่งปันความรู้กันด้วยนะคะ

เอาล่ะ มาเข้าเรื่องกันดีกว่าค่ะ ซึ่งมิ้นจะสรุปเรื่องราวหลัก ๆ ที่มิ้นเข้าใจมานะคะ เราไปทำความรู้จักกับเจ้าน้อง Cypress คนนี้กันดีกว่า

What is cypress?

Cypress is a next generation front end testing tool built for the modern web.

This enables you to write faster, easier and more reliable tests.

Our users are typically developers or QA engineers building web applications using modern JavaScript frameworks.

ในเว็บ Docs ของ Cypress เค้าว่ามาแบบนี้ค่ะ มันก็คือ Automation testing tool ตัวนึงที่นำมาใช้เทส Website ซึ่งสามารถทำได้ทุก Action ตามที่เราเขียนสั่งงานลงไปเลยค่ะ โดยจะใช้ร่วมกับ JavaScript ซึ่งเค้าเคลมมาว่า ช่วยให้เราเขียนการทดสอบได้รวดเร็วขึ้น ง่ายขึ้น และมีความน่าเชื่อถือได้มากขึ้นค่ะ

Cypress จะรวมเอา Framework หลาย ๆ อย่างมารวมกันในตัวมันค่ะ แต่จะตัดเอา Selenium ออกไป

Features

ข้อดีต่าง ๆ ที่ Cypress ทำได้จะมีอยู่หลัก ๆ ประมาณนี้ค่ะ

Time travel : ถ่าย Snapshot ในขณะที่เรากำลังทดสอบได้เลย

Debuggability : ช่วยให้เรารู้จุดผิดพลาดของการเทสได้ง่ายขึ้น โดยจะ Debug จาก Chrome DevTools (สามารถ Inspect หน้า HTML ณ ขณะที่ทำการเทสได้ ทำให้เราหาจุดผิดได้ง่ายขึ้น)

Real time reloads : รีโหลดให้ใหม่อัตโนมัติทุกครั้ง เมื่อเราแก้ไข Code เทสของเรา (Save แล้ว Run test ให้เลยแบบ Realtime)

Automatic waiting : รอ ให้อัตโนมัติ (ถ้าเป็น Robot หรือ Selenium เราต้องเขียน Wait… จนต้องเจอบางอย่าง) แต่ Cypress รอให้เลย

Consistent results : ทดสอบได้รวดเร็ว สม่ำเสมอ และเชื่อถือได้ ซึ่งจะไม่ทำให้เกิด Flaky test (เทสผ่านบ้าง ไม่ผ่านบ้าง)

Screenshots and videos : ดู screenshots ได้อัตโนมัติเมื่อ Test failed แล้วก็สามารถดู videos ได้ เมื่อ run ในโหมด headless

Installing Cypress

วิธีแรก : Download มาลงในเครื่อง http://download.cypress.io/desktop

วิธีที่สอง : ลงใน Folder ที่เราต้องการเทส

โดยมิ้นจะใช้เป็นวิธีนี้นะคะ ซึ่งจะมีขั้นตอนดังนี้นะ

1. เข้าไปที่ Folder ชองเรา และเริ่มสร้างไฟล์ package.json เพื่อเก็บข้อมูล module และรายละเอียดต่างๆ ของ Project ที่มิ้นจะทำ โดยใช้คำสั่ง

$ npm init

2. ลง Cypress โดยใช้คำสั่ง npm (-save เป็นการบอกใช้ npm ให้ใส่ข้อมูล packagesในส่วน dependencies ของไฟล์ package.json ค่า)

$ npm install cypress --save

เมื่อเราลง Cypress เสร็จแล้ว ไฟล์ package.json ของเราก็จะมีเจ้าตัว Cypress เพิ่มขึ้นมาค่ะ

3. Open Cypress โดยใช้คำสั่ง

$ ./node_modules/.bin/cypress open

ซึ่งครั้งแรกที่เรา Open Cypress ขึ้นมา จะมีตัวอย่างของ Cases ต่าง ๆ ขึ้นมา ซึ่งตรงนี้เราก็สามารถลอง Run test และเก็บไว้ดูเป็นตัวอย่างได้ค่ะ

Cypress Commands

Command ของ Cypress จะมีมากมายหลายคำสั่งค่ะ ซึ่งมิ้นจะสรุปคำสั่งที่น่าจะใช้กันบ่อย ๆ ได้แก่คำสั่งด้านล่างนี้ค่ะ

visit

: เป็นคำสั่งที่เอาไว้เข้าไปเปิดเว็บไซต์

cy.visit(url)
cy.visit(url, options)
✅Correct Usage
cy.visit('http://localhost:3000')

visit

click

: เป็นคำสั่งคลิก DOM element ต่าง ๆ ที่ต้องการจะใช้

.click() 
.click(options) 
.click(position) 
.click(position, options) 
.click(x, y) 
.click(x, y, options)
✅Correct Usage
cy.get('button').click()
cy.focused().click()
cy.contains('Welcome').click()

click

type

: เป็นคำสั่งกรอกข้อมูลใน DOM element ที่ต้องการ

.type(text)
.type(text, options)
✅Correct Usage
cy.get('input').type('Hello, World')

type

clear

: เป็นคำสั่งที่เอาไว้ใช้ clear ข้อมูลต่าง ๆ ใน input หรือในtextarea

.clear()
.clear(options)
✅Correct Usage
cy.get('[type="text"]').clear()
cy.get('textarea').type('Hi!').clear()
cy.focused().clear()

clear

first

: เป็นคำสั่งที่เอาไว้หา DOM element ที่ต้องการตัวแรก

.first()
.first(options)
✅Correct Usage
cy.get('nav a').first()

first

contains

: เป็นคำสั่งที่ตรวจสอบ Text ที่มีใน DOM element เช่น Button หรือ pop-up

.contains(content) 
.contains(selector, content) 
.contains(selector, content, options) 
 
// ---or---
cy.contains(content)
cy.contains(selector, content)
cy.contains(selector, content, options)
✅Correct Usage
cy.get('.nav').contains('About')
cy.contains('Hello')

contains

should

: เป็นคำสั่งที่เอาไว้สร้างการยืนยัน เช่น กำหนดให้ empty, ต้องมี value, ต้องมี text กี่ตัว… ซึ่งจะถูกรีเซตอัตโนมัติ เมื่อผ่านหรือหมดเวลาเช็ค

.should(chainers)
.should(chainers, value)
.should(chainers, method, value)
.should(callbackFn)
✅Correct Usage
cy.get('.error').should('be.empty')
cy.contains('Login').should('be.visible')
cy.wrap({ foo: 'bar' }).its('foo').should('eq', 'bar')

should

select

: เป็นคำสั่งที่เอาไว้เลือกค่า dropdown ต่าง ๆ เช่น จังหวัด

.select(value) 
.select(values) 
.select(value, options) 
.select(values, options)
✅Correct Usage
cy.get('select').select('user-1')

select

wait

: ก่อนหน้านี้มิ้นบอกไปแล้วนะคะว่าเจ้า Cypress เค้าเคลมมาว่า มีการรอ ให้อัตโนมัติ แต่ถ้า Website ที่เราเทส ต้องการรอค่าบางอย่าง ก็ต้องใช้คำสั่ง wait เพื่อรอก่อนค่ะ

cy.wait(time) 
cy.wait(alias) 
cy.wait(aliases) 
cy.wait(time, options) 
cy.wait(alias, options) 
cy.wait(aliases, options)
✅Correct Usage
cy.wait(500)
cy.wait('@getProfile')

wait

log

: เป็นคำสั่งที่เอาไว้พิมพ์ข้อความ เพื่อเอาไปแสดงใน log ของ Cypress Command

cy.log(message)
cy.log(message, args...)
✅Correct Usage
cy.log('created new user')

log

ซึ่งทุกคนสามารถไปหาคำสั่งอื่น ๆ เพิ่มเติมได้อีกค่ะ จิ้มไปตามลิงก์ด้านล่างได้เลย 👇🏻

Table of Contents

Best Practices

ต้องรู้บางอย่างเพิ่มเติม เมื่อจะเริ่มใช้เจ้า Cypress

1. Get

Cypress จะ Get element ผ่าน CSS Selector ซึ่งการเรียกใช้ Selector ก็มีหลายแบบค่ะ ไปหาดูเพิ่มเติมกันได้เลย

CSS Selectors Reference

2. Selecting Elements

การเลือก Element มาใช้ใน Cypress เค้าแนะนำว่าให้เราสร้าง attributes data-* ขึ้นมาใน HTML เพื่อป้องกันการเปลี่ยนแปลงจาก CSS หรือ JS และให้ง่ายต่อการหา Element ไปหาอ่านต่อเพิ่มเติมกันได้ค่ะ

Best Practices

3. Browsers

Cypress ณ ตอนนี้ Support เฉพาะบาง Browser เท่านั้น ได้แก่

1. Canary
2. Chrome
3. Chromium
4. Electron

Launching Browsers

How to Test by Cypress.io

เดี๋ยวก่อนจะจบนี้ มิ้นจะลองใช้เจ้า Cypress เทสการทำงานง่าย ๆ โดยจะให้มัน Log in เข้ามาที่ Facebook ของมิ้น แล้วก็ Post อะไรซักอย่าง ลองไปทำดูกันเลยค่ะ

ขั้นตอนแรก : มิ้นก็ได้สร้าง project testFacebook ซึ่งมิ้นก็ได้ลง Cypress เอาไว้เรียบร้อยแล้ว

ขั้นตอนที่ 2 : มิ้นจะสร้าง Folder testcase ไว้ภายใต้ integration เพื่อง่ายต่อการค้นหา และการ run

ซึ่งเจ้า Folder examples ที่มิ้นบอกว่ามันเป็นเคสตัวอย่างนี้ ทุกคนก็สามารถลบมันออกไปได้นะคะ ถ้าไม่ได้ใช้ แต่มิ้นเก็บเอาไว้ดูก่อน 55

ขั้นตอนที่ 3 : มิ้นสร้างไฟล์ testPost.js เอาไว้ใน Folder testcase ค่ะ

ขั้นตอนที่ 4 : มิ้นเริ่มสร้างส่วน Code ของ Test cases โดยที่เจ้าตัว Cypress จะดึงเอา syntax ของ Mocha ค่ะ

Bundled Tools

โดยโครงสร้างของ Test cases ของมิ้นจะเป็นแบบนี้ค่ะ

ขั้นตอนที่ 5 : มิ้นจะ run test case เพื่อดูผลค่ะ

เอาล่ะ กว่าจะเขียนเสร็จ 5555 จริง ๆ ติดปัญหาในการเขียนเจ้า Cypress อยู่นิดหน่อย เดี๋ยวไว้บทความหน้าจะมาเล่าให้ฟังนะคะ หวังว่าจะเป็นประโยชน์สำหรับคนที่สนใจ และกำลังเริ่มต้นใหม่แบบมิ้นนะคะ ถ้ามีอะไรผิดตรงไหนสามารถพูดคุยกันได้เหมือนเดิมนะคะ สำหรับวันนี้ก็คงจบแค่นี้ก่อนเนอะ บัยย :)