AUTOMATION BLOG
Share & Discuss about Testing Experiences
AUTOMATION BLOG

Topic 10: Handle User Action – Checkbox

Chào các bạn đã đến với chủ đề tiếp theo của topic User Action. Hôm nay, chúng ta sẽ tiếp tục discuss về control Checkbox (Bạn thường thấy control này ở màn hình Login, chỗ Remember me ấy. Hoặc trong mấy bài test, mà câu trả lời là multi choice).

Về mặt code (dev), thì control này sẽ chia làm 2 loại:

  • 1 là default checkbox

  • 2 là custom checkbox. Những trang web bây giờ thường dùng 1 số frameword mới như angular, react … Mà những loại này thì đa số nó là custom checkbox. Ví dụ như hình bên dưới:

Nhìn trên UI thì nó hoàn toàn giống nhau, chỉ khi nào bạn vào Developer Tool (F12), trỏ vào đúng cái control đó thì bạn mới có thể biết được cái checkbox đang dùng đó là loại nào. Lúc này bạn chỉ cần tìm xpath tương ứng với control đó là có thể thao tác với nó được.

Với control này, thì thường sẽ có những action chính như sau (item 4, 5, 6 thì hơi nâng cao xíu, đòi hỏi các bạn phải có 1 xíu kiến thức về lập trình) :

  1. Single check
  2. Uncheck
  3. Kiểm tra trạng thái của checkbox đó: check/uncheck
  4. Check all checkbox
  5. Check random check box
  6. Check theo 1 danh sách có sẵn

Bên dưới là những Katalon keywords hỗ trợ để xử cho control này.

1. [WebUI] Check

  • Giả lập hành động của user để check vào check-box hoặc radio-button.
  • Lưu ý: Bạn nên kiểm tra trạng thái của checkbox trước nhé. Nếu hiện tại nó đã check rồi thì bỏ qua nhé. Nếu bạn check thêm lần nữa thì nó chuyển sang trạng thái uncheck ấy.
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

'Open browser and navigate to demo site.'
WebUI.openBrowser('https://katalon-demo-cura.herokuapp.com')

'Click on \'Make Appointment\' button'
WebUI.click(findTestObject('Page_CuraAppointment/btn_BookAppointment'))

'Input username'
WebUI.setText(findTestObject('Page_CuraAppointment/txt_UserName'), Username)

'Input password'
WebUI.setText(findTestObject('Page_CuraAppointment/txt_Password'), Password)

'Click on \'Login\' button'
WebUI.click(findTestObject('Page_CuraAppointment/btn_Login'))

'Check on \'Apply for hospital readmission\' checkbox'
WebUI.check(findTestObject('Page_CuraAppointment/chk_ApplyForHospitalReadmission'))

'Close browser'
WebUI.closeBrowser()

2. [WebUI] Un-check

  • Giả lập hành động của user để Uncheck vào check-box.
  • Lưu ý: Bạn nên kiểm tra trạng thái của checkbox trước nhé. Nếu hiện tại nó đã uncheck rồi thì bỏ qua nhé. Nếu bạn check thêm lần nữa thì nó chuyển sang trạng thái check ấy.

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

'Open browser and navigate to demo site.'
WebUI.openBrowser('https://katalon-demo-cura.herokuapp.com')

'Click on \'Make Appointment\' button'
WebUI.click(findTestObject('Page_CuraAppointment/btn_BookAppointment'))

'Input username'
WebUI.setText(findTestObject('Page_CuraAppointment/txt_UserName'), Username)

'Input password'
WebUI.setText(findTestObject('Page_CuraAppointment/txt_Password'), Password)

'Click on \'Login\' button'
WebUI.click(findTestObject('Page_CuraAppointment/btn_Login'))

'Check on \'Apply for hospital readmission\' checkbox'
WebUI.check(findTestObject('Page_CuraAppointment/chk_ApplyForHospitalReadmission'))

'Uncheck on \'Apply for hospital readmission\' checkbox'
WebUI.uncheck(findTestObject('Page_CuraAppointment/chk_ApplyForHospitalReadmission'))

'Close browser'
WebUI.closeBrowser()

3. [WebUI] Verify Element Checked

  • Kiểm tra trang thái của checkbox có đang được check hay không?
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

'Open browser and navigate to demo site.'
WebUI.openBrowser('https://katalon-demo-cura.herokuapp.com')

'Click on \'Make Appointment\' button'
WebUI.click(findTestObject('Page_CuraAppointment/btn_BookAppointment'))

'Input username'
WebUI.setText(findTestObject('Page_CuraAppointment/txt_UserName'), Username)

'Input password'
WebUI.setText(findTestObject('Page_CuraAppointment/txt_Password'), Password)

'Click on \'Login\' button'
WebUI.click(findTestObject('Page_CuraAppointment/btn_Login'))

'Check on \'Apply for hospital readmission\' checkbox'
WebUI.check(findTestObject('Page_CuraAppointment/chk_ApplyForHospitalReadmission'
))

'Verify checkbox \'Apply for hospital readmission\' is checked'
WebUI.verifyElementChecked(findTestObject('Page_CuraAppointment/chk_ApplyForHospitalReadmission'), 10)

'Close browser'
WebUI.closeBrowser()

4. [WebUI] Verify Element Not Checked

  • Kiểm tra trang thái của checkbox có đang NOT check hay không?
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

'Open browser and navigate to demo site.'
WebUI.openBrowser('https://katalon-demo-cura.herokuapp.com')

'Click on \'Make Appointment\' button'
WebUI.click(findTestObject('Page_CuraAppointment/btn_BookAppointment'))

'Input username'
WebUI.setText(findTestObject('Page_CuraAppointment/txt_UserName'), Username)

'Input password'
WebUI.setText(findTestObject('Page_CuraAppointment/txt_Password'), Password)

'Click on \'Login\' button'
WebUI.click(findTestObject('Page_CuraAppointment/btn_Login'))

'Check on \'Apply for hospital readmission\' checkbox'
WebUI.check(findTestObject('Page_CuraAppointment/chk_ApplyForHospitalReadmission'))

'Uncheck on \'Apply for hospital readmission\' checkbox'
WebUI.uncheck(findTestObject('Page_CuraAppointment/chk_ApplyForHospitalReadmission'))

'Verify checkbox \'Apply for hospital readmission\' is NOT checked'
WebUI.verifyElementNotChecked(findTestObject('Page_CuraAppointment/chk_ApplyForHospitalReadmission'), 10)

'Close browser'
WebUI.closeBrowser()

5. [WebUI] Click

  • Ngoài 2 keywords trên, bạn có thể sử dụng keyword WebUI.click để check/uncheck checkbox
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

'Open browser and navigate to demo site.'
WebUI.openBrowser('https://katalon-demo-cura.herokuapp.com')

'Click on \'Make Appointment\' button'
WebUI.click(findTestObject('Page_CuraAppointment/btn_BookAppointment'))

'Input username'
WebUI.setText(findTestObject('Page_CuraAppointment/txt_UserName'), Username)

'Input password'
WebUI.setText(findTestObject('Page_CuraAppointment/txt_Password'), Password)

'Click on \'Login\' button'
WebUI.click(findTestObject('Page_CuraAppointment/btn_Login'))

'Check on \'Apply for hospital readmission\' checkbox'
WebUI.click(findTestObject('Page_CuraAppointment/chk_ApplyForHospitalReadmission'))

'Close browser'
WebUI.closeBrowser()

Keyword này dùng tương tự như check/uncheck. Nhưng trước khi bạn click vào checkbox đó, bạn phải kiểm tra trạng thái của checkbox đó trước. Nếu nó đã check rồi, thì bạn không click vào nó nữa (hoặc ngược lại)

Đối với item 1, 2, 3 thì bạn chỉ cần bắt xpath của control đó, rồi sử dụng 3 keywords như mình đã giới thiệu ở trên là có thể handle được. Còn đối với item 4, 5, 6 thì logic hơi khác xíu, mình sẽ xử lý như sau:

Check all checkbox

  • Có 2 cách để check all checkbox trong hình trên:
    • 1. Bắt hết tất cả xpath của từng control theo label trên và dùng keyword WebUI.check or WebUI.click cho từng cái -> mặc dù cách này vẫn hoạt động được nhưng mình không khuyến khích xài nó vì nếu dùng sẽ làm cho code của bạn phình ra. Nếu 1 ngày nào đó, develper change cái label hiện tại sang label khác, thì bạn phải update lại tất cả các xpath
    • 2. Get tất cả các control lên, duyệt qua vòng lặp for để check all checkbox trên -> cách này bạn sẽ code gọn hơn, khoảng 10 dòng code là bạn có thể xử lý nó.
  • Code:
    • Check all checkbox
'Get danh sách các checkbox control'
List<WebElement> lstElementCheckbox = WebUI.findWebElements(findTestObject('Checkbox/automationfc/chk_CheckAll_1'), 2)
 
'Duyệt qua từng checkbox control'
for(item in lstElementCheckbox){
    Boolean isCheck = item.isSelected()
        // Kiểm tra nếu checkbox đó đã check rồi thì bỏ qua
    if(!isCheck) {
        item.click()
    }
}

  • Uncheck all checkbox
'Duyệt qua từng checkbox control'
for(item in lstElementCheckbox){
    Boolean isCheck = item.isSelected()
         
    // Kiểm trả nếu checkbox đó đã check rồi thì mình sẽ uncheck nó đi
    if(isCheck) {
        item.click()
    }
}

Check random checkbox

Cũng tương tự như check all checkbox, đầu tiên, mình sẽ find tất cả các checkbox control. Sau đó, mình sẽ viết 1 hàm get random. Bạn sẽ dùng danh sách random đó để xử lý

'Find danh sách các checkbox control'
List<WebElement> lstElementCheckbox = WebUI.findWebElements(findTestObject('Checkbox/automationfc/chk_CheckAll_1'), 2)
 
'Get all label dựa vào danh sách trên'
List<String> lstLabel = []
for(item in lstElementCheckbox){
    String itemText = item.getAttribute("value")
    lstLabel.add(itemText)
}
 
'Get random danh sach label'
List<String> randomListLabel = getRandomListString(lstLabel, 10)
 
'Duyệt qua từng checkbox control'
for(item in lstElementCheckbox){
    String itemText = item.getAttribute("value")
    Boolean isCheck = item.isSelected()
    if(randomListLabel.contains(itemText) && !isCheck){
    item.click()
    }
}

  • Get random
public static List<String> getRandomListString(List<String> lstData, int numOfItems){
    Random rand = new Random()
    List<String> getListRandom = []
    List<String> lstTemp = []
    lstTemp.addAll(lstData)
     
    (1..numOfItems).each{
        int index = rand.nextInt(lstTemp.size())
        getListRandom.add(lstTemp[index])
        lstTemp.remove(lstTemp[index])
    }
     
    return getListRandom
}

Check theo 1 danh sách có sẵn

  • Case này tương tự với cách làm trên, chỉ khác là bây giờ mình không cần phải get random label nữa mà sẽ định nghĩa sẵn danh sách này. Hiện tại mình đang định nghĩa trên code. Khi làm thực tế, bạn nên định nghĩa danh sách này trong data file, có thể là excel, csv. Sau đó bạn viết thêm function để đọc nó lên. Mục đích là sau này khi developer có thay đổi về label checkbox, bạn chỉ cần update lại data file tương ứng là có thể chạy được mà ko cần mở code lại update
'Định nghĩa sẵn 1 danh sách checkbox cần check'
List<String> randomCheckBox = ["Anemia", "Arthritis", "Heart Attack"]
 
'Get list of element of checkbox'
List<WebElement> lstElementCheckbox = WebUI.findWebElements(findTestObject('Checkbox/automationfc/chk_CheckAll_1'), 2)
 
'Check all checkbox'
for(item in lstElementCheckbox){
    String itemText = item.getAttribute("value")
    Boolean isCheck = item.isSelected()
    if(randomCheckBox.contains(itemText) && !isCheck){
        item.click()
    }
}

6. Kết

Như vậy chúng ta đã tìm hiểu qua 1 số keyworks để xử lý cho control checkbox. Cảm ơn các bạn đã theo dõi bài viết của mình.  Chúc các bạn thành công. Hẹn gặp lại các bạn ở những chủ đề tiếp theo. Bái bai.

Bài viết được mình tham khảo từ Katalon doc: https://docs.katalon.com/docs/katalon-studio-enterprise/keywords/web-ui-keywords/webui-accept-alert

Leave a Reply

Your email address will not be published. Required fields are marked *