AUTOMATION BLOG
Share & Discuss about Testing Experiences
AUTOMATION BLOG

Topic 09: Handle User Action – Button

Chào các bạn đã đến với chủ đề tiếp theo của User Action. Hôm nay, chúng ta sẽ tiếp tục discuss về control button. Về control này thì chắc hẳn mọi người đã quá quen với nó rồi. Bạn có thể gặp button này ở bất cứ màn hình nào, ví dụ như Login, submit form, mua hàng online …

Về control button thì mình thường có những thao tác chính như sau:

  1. Click vào button
  2. Double click
  3. Right click
  4. Verify button status: enable/disable
  5. Hover And verify background color

Chúng ta hãy bắt đầu với Katalon keyword nào. Tương ứng với những thao tác trên, katalon tạo ra keywords tương ứng để xử lý như sau:

1. [WebUI] Click

  • Giả lập hành động của user để Click vào button được chỉ định
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

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

'Click on \'Book Appointment\' button'
WebUI.click(findTestObject('Page_CuraHomepage/btn_MakeAppointment'))

'Close browser'
WebUI.closeBrowser()

2. [WebUI] Double Click

  • Giả lập hành động của user để Double Click vào button được chỉ định
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('http://demo.guru99.com/test/simple_context_menu.html')

"Double click to button 'Double-Click Me To See Alert'"
WebUI.doubleClick(findTestObject('Guru99/btn_DoubleClick''))

'Close browser'
WebUI.closeBrowser()

3. [WebUI] Right Click

  • Giả lập hành động của user để Right Click vào button được chỉ định
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('http://demo.guru99.com/test/simple_context_menu.html')

"Right click to button 'right click me'"
WebUI.rightClick(findTestObject('Guru99/btn_RightClick'))

'Close browser'
WebUI.closeBrowser()

4. [WebUI] Verify Element Clickable -> verify button enabled

  • Kiểm tra xem button có đang enabled hay không?
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

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

'Verify \'Make Appointment\' button is clickable'
WebUI.verifyElementClickable(findTestObject('Page_CuraHomepage/btn_MakeAppointment'))

'Close browser'
WebUI.closeBrowser()

5. [WebUI] Verify Element Not Clickable -> verify button diabled

  • Kiểm tra xem button có đang disabled hay không?
  • Note: Keyword này chỉ hoạt động với Element có thẻ tag = input với attribute = disable.
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

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

'Verify \'Make Appointment\' button is NOT clickable'
WebUI.verifyElementNotClickable(findTestObject('Page_CuraHomepage/btn_MakeAppointment'))

'Close browser'
WebUI.closeBrowser()

Ngoài 2 keyword WebUI.verifyElementNotClickable và WebUI.verifyElementClickable, các bạn có thể dùng keyword bên dưới để verify status của button.

6. [WebUI] Get Attribute

  • Get attribute của element được chỉ định
  • 1 số control button khi bị disable thì sẽ được add attribute disable vào trong thẻ html. Trong trường hợp này, thì mình có thể dùng keyword này để get status của button. Ví dụ:
'Get status of button Đăng Nhập'
'if true -> button is disable, else -> button is enabled'
boolean status = WebUI.getAttribute(findTestObject('Object Repository/1.Basic/Topic_08_Handle_User_Action/01.Textbox_TextArea/btn_Login'), "disabled")
 
'Verify status of button Đăng Nhập'
WebUI.verifyEqual(status, false)

7. [WebUI] Get CSS Value -> Verify color của button

  • Get CSS value của element được chỉ định
  • Để get color của 1 button, các bạn sẽ dùng keyword WebUI.getCSSValue. Background color thường được set default cho 1 button. Ví dụ, default color của button là màu trắng, khi bạn hover lên nó, nó sẽ chuyển sang màu xanh.
  • Trước khi hover
  • Khi hover lên nó, bạn sẽ thấy nó có màu đậm hơn
  • Code
'Get background color of button Login'
String backgroundColor = WebUI.getCSSValue(findTestObject('Object Repository/1.Basic/Topic_08_Handle_User_Action/02.Button/nopcommerce/btn_Login'), "background-color")
  • Sau khi run dòng code trên, keyword sẽ trả về mã màu RGB (ví dụ: rgba(74, 178, 241, 1)). Bạn sẽ phải viết thêm 1 cái function để convert nó sang mã hexa thì mới có thể verify được (Như hình trên, trong Developer Tool, bạn thấy background color đang hiển thị là mã hexa)
  • Full code:
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

'Open browser'
WebUI.openBrowser('')
 
'Maximize browser'
WebUI.maximizeWindow()
 
'Navigate to site: https://demo.nopcommerce.com/login?returnUrl=%2F'
WebUI.navigateToUrl('https://demo.nopcommerce.com/login?returnUrl=%2F')
 
'Get background color of button Login'
String backgroundColor = WebUI.getCSSValue(findTestObject('Object Repository/1.Basic/Topic_08_Handle_User_Action/02.Button/nopcommerce/btn_Login'), "background-color")
println backgroundColor
 
'Convert RGBA to Hex'
backgroundColor = convertRGBAToHex(backgroundColor)
println backgroundColor
 
"Verify background color before hover is displayed correctly (#4ab2f1)"
WebUI.verifyEqual(backgroundColor, "#4ab2f1")
 
'Hover to button Login'
WebUI.mouseOver(findTestObject('Object Repository/1.Basic/Topic_08_Handle_User_Action/02.Button/nopcommerce/btn_Login'))
 
'Get background color of button Login again after hover to button'
backgroundColor = WebUI.getCSSValue(findTestObject('Object Repository/1.Basic/Topic_08_Handle_User_Action/02.Button/nopcommerce/btn_Login'), "background-color")
println backgroundColor
 
'Convert RGBA to Hex'
backgroundColor = convertRGBAToHex(backgroundColor)
println backgroundColor
 
"Verify background color when hover is displayed correctly (#248ece)"
WebUI.verifyEqual(backgroundColor, "#248ece")
     
public static String convertRGBAToHex(String backgroundColor) {
    String[] hexValue = backgroundColor.split("[, rgba()]+")
     
    int hexValue1 = Integer.valueOf(hexValue[1])
    int hexValue2 = Integer.valueOf(hexValue[2])
    int hexValue3 = Integer.valueOf(hexValue[3])
     
    String result = String.format("#%02x%02x%02x", hexValue1, hexValue2, hexValue3)
    return result
}

8. Kết

Như vậy chúng ta đã tìm hiểu qua cách xử lý cho control button. 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 *