มารู้จักกับ UI-licious กันเถอะ

มีโอกาสได้ไปร่วมงาน conference CityJSSingapore2023 กับชาว ODDS ในงานจะมีคนมานำเสนอ เล่าประสบการณ์ หรือแสดงความสามารถต่างๆในจักรวาลของ js (javascript) มีหลายๆหัวข้อที่น่าสนใจ ผมจะหยิบมา 1 หัวข้อคือ UI-Licious

แล้ว UI-licious คืออะไรกันหละ มาทำความรู้จักกับสิ่งนี้กันครับ

UI-licious เป็นเครื่องมือที่เรียบง่ายและมีประสิทธิภาพสำหรับการทดสอบเว็บไซต์ เข้าใจง่าย สามารถเรียนรู้ได้เร็ว

หลายๆคนอาจเจ็บปวดกับการที่เขียนโค้ดทำไมย๊ากยาก อ่านไม่เห็นจะเข้าใจเลย
ซึ่ง ui-licious นั้นเขียนง่ายเหมือนกับเขียน ABC แม้ว่าไม่เคยเขียนโค้ดก็สามารถอ่านและเข้าใจได้ง่ายๆ

สามารถเขียนและรันโค้ดได้ใน web browser ได้เลย

ทีเด็ดมากๆอีกอย่างคือ ให้ AI เขียนโค้ด แค่เราบอกส่ิงที่ต้องการ AI ก็จะรังสรรค์โค้ดมาให้เรา

ศึกษาเพิ่มเติมได้ที่นี้เลย https://uilicious.com/features/ai-test-authoring/

กลับมาเล่าที่ว่าสามารถอ่านและเข้าใจได้ง่ายๆ เป็นยังไงน๊า
เรามาลองดูตัวอย่างโค้ดง่ายๆด้านล่างนี้กัน

// ไปยังเว็บไซต์ตาม url
I.goTo("https://facebook.com");

// กรอกข้อมูล Email
I.fill("Email", "peter@example.com");

// กรอกข้อมูล Password
I.fill("Password", "mysupersecretpassword");

// คลิก Login
I.click("Login");

// เช็คข้อความ
I.see("Peter");

ui-licious จะเริ่มต้นสำสั่งด้วย I (ตัวไอพิมพ์ใหญ่) จะเห็นได้ว่า แต่ละคำสั่งเป็นภาษาอังกฤษที่เรียบง่ายจริงๆ

ตัวอย่างทำสั่งต่างเพิ่มเติมดังนี้

// เคลียค่า Email
I.fill("Email", "");

// หรือ
I.clear("Email");

// รอ 10 วินาที
I.wait(10) 

// กดปุ่ม enter ที่คีย์บอร์ด
I.pressEnter()

// รีเฟรชหน้าจอ
I.refreshPage()

// ปิดแท็ปนั้น
I.closeTab()

เราสามารถเข้าถึง http status ได้

// ตรวจสอบว่าเว็บไซต์นั้นๆรีเทิร์น status เป็น 200
I.goTo("https://google.com")
UI.is200()

// หรือ
UI.isStatusCode(200)

ในบางกรณีอาจจะต้องมีความซับซ้อนก็สามารถทำได้

var email = "test@example.com";

function getSuperPassword(){
    return ["super", "secret", "password"].join('-');
}

I.goTo("https://facebook.com");
I.fill("Email", email);
I.fill("Password", getSuperPassword());
I.click("Login");
I.see("Test");

หรือจะเขียน loop กันไปเลย

// ฟังก์ชั่นคลิก Next ตามจำนวน n
function clickNext(n){
  for(var i = 0; i < n; i++){
    I.Click("Next");
  }
}

// คลิก Next 10 ครั้ง
clickNext(10);

ข้อมูลการทดสอบแบบไดนามิก

// credentials.csv
username,password
johndoe,jane
'super secret password','qwerty123'

เราสามารถใช้ TEST.loadDataFromCsv เพื่อดึงข้อมูลจากไฟล์ "credentials.csv" ได้เลย แบบนี้

// ดึงข้อมูลจากไฟล์ "credentials.csv" ไปเป็น object array 
// ให้ข้อมูลอันแรกเป็น property name
var userList = TEST.loadDataFromCsv("credentials.csv", {header: "row"})
// ผลที่ได้:
//   users = [
//     {"username" : "johndoe", "password" : "super secret password"},
//     {"username" : "jane", "password" : "qwerty123"}
//   ]

var johndoe = userList[0]
I.goTo("https://example.com")
I.fill("Username", johndoe.username)
I.fill("password", johndoe.password)
I.click("Login")

*** อาจจะมีบาง feature ที่ไม่ได้ใช้ free เพื่อนๆสามารถดูได้จาก https://uilicious.com/pricing/

จากที่เล่ามาทั้งหมดเป็นแค่ส่วนหนึ่งของ ui-licious ยังมีสิ่งที่ไม่ได้เอามาเล่าให้เพื่อนๆฟังอีกมากมาย ท่านใดที่สนใจสามารถศึกษาเพิ่มเติมได้ที่ลิ้งนี้ได้เลย
https://uilicious.com/
https://uilicious.com/blog/
https://uilicious.com/explore/