Topic 13: Handle User Action – Custom Dropdown

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 thảo luận về control Custom DropdownList.

Như mình đã giới thiệu ở bài trước, control này chỉ dùng được duy nhất 1 Katalon keyword, đó là WebUI.click. Vì custom dropdown ko dùng thẻ html là select, mà là thẻ div. Vì vậy khi bạn viết test script, thao tác xử lý cũng giống như bạn làm manual vậy. Nghĩa là đầu tiên bạn click vào cái dropdown đó trước, sau đó bạn mới chọn được item trong dropdown đó.

Về control này thì cũng được chia làm 2 loại thao tác: single select và multi select. Mỗi loại sẽ được xử lý script khác nhau. Và bây giờ, mình sẽ hướng dẫn cách xử lý nó như bên dưới:

1. Single select

Mình sẽ xử lý như sau:

• 1. Click vào dropdown control đó
• 2. Select item trong trong dropdown

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

'Open browser'
WebUI.openBrowser('')

'Navigate to site: https://mdbootstrap.com/docs/b4/jquery/forms/select/'
WebUI.navigateToUrl('https://mdbootstrap.com/docs/b4/jquery/forms/select/')
 
'Fist, click on dropdown control'
WebUI.click(findTestObject('Custom_DropDown/Single_DropDown/Single_Dropdown_Parent'))
 
// Because these item in dropdown is hidden. If we don't click on dropdown first, we can not select item under it
'Second, select item on dropdown'
WebUI.click(findTestObject('Custom_DropDown/Single_DropDown/Single_Dropdown_Child_Option1'))

'Close browser'
WebUI.closeBrowser()

2. Multi select

Mình sẽ xử lý như sau:

• 1. Click vào dropdown control đó
• 2. Select tất cả các items trong dropdown
• Or select random item trong dropdown
• Or select item theo 1 danh sách bạn muốn chọn

Bên dưới là code để select item theo 1 danh sách bạn đã chuẩn bị trước:

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

'Open browser'
WebUI.openBrowser('')

'Navigate to site: https://mdbootstrap.com/docs/jquery/forms/select/'
WebUI.navigateToUrl('https://mdbootstrap.com/docs/jquery/forms/select/')
 
'Step 1: click vao dropdown control'
WebUI.click(findTestObject('Custom_DropDown/Multi_DropDown/Multi_Dropdown_Parent'))
 
// Because these item in dropdown is hidden. If we don't click on dropdown first, we can not select item under it
'Step 2: Chuan bi 1 vai items de select'
List<String> selectedItems = ['One', 'Three', 'Four']
 
'Step 3: Tim tat ca cac item element trong dropdown control'
List<WebElement> listElement = WebUI.findWebElements(findTestObject('Custom_DropDown/Multi_DropDown/Multi_Dropdown_Child'), 2)
 
'Step 4: Duyet qua tung item trong list'
for(WebElement item in listElement){
    'Get label of child item'
    WebElement eleLabel = item.findElement(By.xpath("./span"))
    String label = eleLabel.getText().trim()
     
    'Get trang thai cua child item: select/unselect'
    WebElement eleInput = eleLabel.findElement(By.xpath("./input"))
    boolean state = eleInput.isSelected()
     
    // Check xem child item da duoc check hay chua va label co thuoc danh sach minh da chuan o step 2 khong?
    // Neu chua --> select
    // Neu select roi --> bo qua
    if(selectedItems.contains(label) && !state){
        eleInput.click()
    }
}
'Close browser'
WebUI.closeBrowser()

Để select tất cả các items trong dropdown or select random item trong dropdown, các bạn có thể tham khảo lại bài control Checkbox của mình nha. Về ý tưởng thì cũng giống như vậy.

3. Kết

Như vậy chúng ta đã tìm hiểu qua 1 số keyworks để xử lý cho control Custom Dropdown. 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