Cypress แนะนำอธิบาย 20 API Commands ที่ใช้งานบ่อย EP2

Sharing is caring!

visit
ใช้สำหรับเข้า website test ถือว่าเป็น command ที่ต้องรู้ลำดับแรก ๆ ตัวอย่างการใช้งาน cy.visit(‘https://google.com‘) มี function callback ที่น่าสนใจ คือ onBeforeLoad , onLoad สามารถใส่ behavior function การทำงานในส่วนนี้ได้

get
ระบุ selector element ของหน้าจอ เพื่อจะเป็น target ในการ action command ถัดไปกรณี ต้องการให้ระบุ element เพื่อทำงานอะไรบ้างอย่าง เช่น set value ในช่อง text ,set text บน label เป็นต้น ตัวอย่างการเรียกใช้งาน cy.get(‘{selector}’) โดย selector คือ input ,.class ,#id ,[name=””] เป็นต้น

type
ใช้สำหรับ set value ให้กับ input tag ต่าง ๆ เช่น input [text ,date ,phone ,password ,number ,…] รวมถึง textarea ได้อีกด้วย ตัวอย่างการใช้งาน cy.get(‘{selector}’).type(‘commade type’)

satang pro referral

clear
ใช้ clear value ในช่อง input ตัวอย่างการใช้งาน cy.clear()

as
ทำหน้าที่เป็น command กำหนด alias เป็นการกำหนด reference ให้กับ command ที่กำลังสนใจ หรือ ใช้งานซ้ำ ๆ สามารถ reuse เรียกใช้งานซ้ำได้ ตัวอย่างการใช้งาน cy.(‘{selector}’).as(‘mySelector’) อยากต้องการระบุอ้างอิงถึงก็เพียงแค่ cy.get(‘@mySelector’) ถึงชื่อ alias ก็สามารถใช้ทำงานได้เหมือนการเรียก cy.get(‘{selector}’) นั้นอีกครั้ง

check
ใช้กับ input [radio ,checkbox] กำหนด state ให้กับ element เหล่านี้เป็นการ checked ตัวอย่างการใช้งาน cy.get(‘{selector}’).check() โดยที่ {selector} นั้นต้องเป็น radio ,checkbox command ถึงจะทำงานได้ถูกต้อง

click
ชื่อก็บอกอยู่แล้ว กำหนด event click ให้กับ element ที่กำลังสนใจ เกือบแทบทุก element สามารถเรียก command นี้ได้เกือบหมด (ถ้าไม่ถูก Disabled) ตัวอย่างการใช้งานจะใช้งานร่วมกับ command get คือ cy.get(‘{selector}’).click()

contains
สำหรับเทียบค่าข้อความที่คาดหวังว่าจะมีใน element ที่เรากำลังสนใจ (คล้ายกับการ LIKE ‘%%’) ตัวอย่างการใช้งาน cy.get(‘{selector}’).contains(‘ข้อความ’) ถ้าหา element ที่มีข้อความไม่พบจะตก fail case เลย

debug
กำหนดการ pause ให้การรัน testcase หยุดช่ำขณะเพื่อดูการทำงานของโปรแกรม สามารถกด continues ต่อไปได้ เมื่อต้องการให้โปรแกรมทำงานต่อไป

each
การ LOOP elements ที่ได้จากการ get(‘{selector}’) แล้วต้องการที่จะทำงานอะไรบ้างอย่างกับ element ที่ selector ได้ ก็จะเรียก command each นี้ โดย command จะมี callback function ให้เขียนคำสั่งอื่นได้ ๆ ตัวอย่างการใช้งาน cy.get(‘{selector}’).each(()=> {/* todo something */ })

eq
ตัวย่อของ equal ที่แปลว่า เท่ากัน case ที่ใช้งานบ่อย คือการเทียบหาลำดับของ elements ที่พบได้มากกว่า 1 element ตัวอย่างการใช้งาน cy.get(‘{selector}’).eq(0) โดย 0 คือ index ของ elements ที่เจอ

find
ต้องการค้นหา element เป้าหมายเพียง element เดียว หลังจากที่ selector ได้ elements มากกว่า 1 หรือจะระบุ selector ตั้งแต่แรกเริ่ม get เลยก็ได้ ตัวอย่างการใช้งาน cy.get(‘{selector}’).find(‘.class-unique’) command จะ return element มาเพียง 1 element เท่านั้น

fixture
command เรียก static resource date ต่าง ๆ ที่ถูกจัดเก็บไว้ที่ path cypress/fixture/** โดยมีประเภทไฟล์ที่สามารถเรียกไฟล์ได้หลายนามสกุลด้วยกัน เช่น .json ,.csv ,.txt ,.png ,.pjg เป็นต้น ตัวอย่างการเรียกใช้งาน cy.fixture(‘{file-name}’).then(response => {/* doto something */ })

log
แสดง variable หรือ text ออกทางหน้าจอ run ui คล้ายกับ console.log(”) ของ javascript เพื่อแต่พื้นที่การแสดงอยู่คนละที่กัน

next
ถัดไป จะ selector element ตำแหน่งถัดไปของ element ก่อนเรียก command นี้ โดยสังเกตุจะเป็น element level เดียวกับ element ที่เรียก command นี้ ตัวอย่างการใช้งาน cy.get(‘{selector}’).next() จะได้ element ถัดไปทันที

prev
ก่อนหน้า เมื่อมี element ถัดไป (next command) ก็ต้องมีการหา element ก่อนหน้า ดังนั้น command นี้จะทำหน้าที่หา element ก่อนหน้าที่จะเรียก command นี้

not
เป็นนิเสธน์ ใช้กรอง element ไม่สนใจ elements ที่ถูกเรียกภายใน command นี้ ตัวอย่างการเรียกใช้งาน cy.get(‘{selectors}’).not(‘{.not-use-element}’)

request
ใช้เรียก api หรือ url ที่ต้องการจะเข้าถึงแบบ background run (คล้าย ๆ การเรียก AJAX ของ jQuery เหมือนกัน ตัวอย่างการเรียกใช้งาน cy.request(‘{url-api}’) หรือจะเพิ่มการเรียก method อื่น ๆ ด้วย cy.request({method : ‘POST’ , url : ‘{url-api}’})

should
ถือว่าเป็นพระเอกของเรื่องการทำ automated testing เลยก็ว่าได้เพราะถ้าการเขียน testscript ไม่มีการเขียนการคาดหวังผลลัพธ์ เพื่อที่จะใช้ตรวจสอบข้อมูลต่าง ๆ ละก็ไม่รู้ว่าการเขียน automated test จะมีประโยชน์อะไรเลย ตัวอย่างการใช้งานก็เรียกว่าทำได้หลากหลายมาก เช่น cy.get(‘{selector}’).should(‘have.text’,'{ข้อความ}’) หรือแม้แต่จะเรียกแบบ callback function ก็ทำได้โดย cy.get(‘{selector}’).should($selector => { /* todo something */ }) โดยการตรวจสอบในรุปแบบอื่น ๆ สามารถเข้าไปดูได้จากลิ้งนี้ command should

submit
ใส่ action Submit ให้กับ element FORM ตัวอย่างการเรียกใช้งาน cy.get(‘selector*’).submit() *คือ selector ของ FORM

wait
จะเรียกว่าเป็น command ที่เป็นตัวช่วยชีวิตกรณีการไม่แน่ใจว่าการทำงานจะเสร็จเมื่อไหร่ มักจะใส่ wait นี้เพื่อรอการทำงานก่อนหน้านี้ให้แน่ใจว่าทำงานเสร็จเรียบร้อย ตัวอย่างการใช้งาน cy.wait(4000) คือ ให้รอ 4 วินาที และจึงทำงานต่อไปได้

และนี้คือ API commands ของ Cypress ที่น่าจะเป็น commands ที่เรียกใช้งานได้บ่อย ที่สุด บทความต่อไปจะไปล้วงลึกการทำงานของ Spy/Stub ที่เป็นเรื่องที่ไม่รู้ไม่ได้ เลยจริง ๆ รอติดตามนะครับ

Posts created 71

ใส่ความเห็น

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

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
shares