Topic 22: Web Element Command

Chào các bạn. Ở chủ đề hôm nay, mình sẽ giới thiệu thêm về những Katalon keywords support cho WebElement. Hy vọng là sau topic này, các bạn có thể viết được 1 automation test case hoàn chỉnh nhé.

Trong Web Element, thường các bạn sẽ được nghe nói được 3 keywords như sau:

• Attribute
• Attribute value
• Text

Mình sẽ giải thích chi tiết thông qua ví dụ sau:

Như hình trên, bạn sẽ thấy thẻ HTML của label Username như bên dưới:

<label for="txt-username" class="col-sm-4 control-label">Username</label>

• Ở đây, bạn sẽ thấy thẻ HTML là label.
• Attribute là những thuộc tính trong thẻ HTML đó. Trong ví dụ này, thì attribute là “for“, “class“.
• Attribute value là giá trị của những thuộc tính “for“, “class“. Ví dụ: “txt-username” là giá trị của thuộc tính “for”, “col-sm-4 control-label” là giá trị của thuộc tính “class“
• Text ở đây chính là “Username”. Trong 1 WebElement, có thể có hoặc không có Text

Khi các bạn mới bắt đầu với automation, thì các bạn cần phải hiểu rõ 3 keywords này. Để lúc mình làm mà có nghe nói đến, thì cũng đỡ bị bỡ ngỡ nhé.

Tiếp theo, mình sẽ giới thiệu đến các bạn 1 số Katalon keywords để handle cho WebElement như bên dưới:

1. [WebUI] Get Attribute

• Get giá trị của thuộc tính (attribute) của web element

"Get attibute of element"
String attValue = WebUI.getAttribute(findTestObject('1.Basic/Topic_09_Web_Element_Command/checkbox'), "value")
println "Value = " + attValue

2. [WebUI] Get CSS Value

• Get giá trị CSS của web element.

"Get margin right"
String cssmarginright = WebUI.getCSSValue(findTestObject('1.Basic/Topic_09_Web_Element_Command/checkbox'), "margin-right")
println "margin-right = " + cssmarginright

3. [WebUI] Get Text

• Get Text của web element

"Get text of element"
String text = WebUI.getText(findTestObject('1.Basic/Topic_09_Web_Element_Command/button'))
println "text: " + text

4. [WebUI] Verify Element Text

• Verify Element Text có hiển thị trên page UI hay không?

"Verify element has text"
WebUI.verifyElementText(findTestObject('1.Basic/Topic_09_Web_Element_Command/button'), "Submit")

5. [WebUI] Verify Text Present

• Verify đoạn text có hiển thị trên UI hay không?
• Lưu ý: Các bạn hạn chế sử dụng keyword này nhé. Lý do là Keyword này sẽ verify Text có hiển thị trên page UI hay không? Nhưng nếu đoạn Text bạn verify nó hiển thị ở nhiều nơi trên cùng 1 page, thì mình sẽ không biết được là keyword này sẽ verify đoạn Text nào. Dẫn đến việc mặc dù kết quả trả về là True, nhưng mình ko make sure được là đoạn Text mình muốn verify có hiển thị không nhé.

"Verify text present in UI"
WebUI.verifyTextPresent("Patient Medical History", false)

6. [WebUI] Verify Text Not Present

• Verify Text có đang không hiển thị trên UI hay không?

"Verify text not present in UI"
WebUI.verifyTextNotPresent("Patient Medical History1", false)

7. [WebUI] Verify Element Attribute Value

• Verify Web Element có tồn tại giá trị của thuộc tính trong DOM hay không?

"Verify checkbox element has attribute value: Anemia"
WebUI.verifyElementAttributeValue(findTestObject('1.Basic/Topic_09_Web_Element_Command/checkbox'), "value", "Anemia", 2)

8. [WebUI] Verify Element Checked

• Verify checkbox có đang được check hay không?

"Verify checkbox element is checked"
WebUI.verifyElementChecked(findTestObject('1.Basic/Topic_09_Web_Element_Command/checkbox'), 2)

9. [WebUI] Verify Element Not Checked

• Verify checkbox có đang KHÔNG được check hay không?

"Verify checkbox element is unchecked"
WebUI.verifyElementNotChecked(findTestObject('1.Basic/Topic_09_Web_Element_Command/checkbox'), 2)

10. [WebUI] Verify Element Clickable

• Verify Element có thể Click được hay không? Thông thường keyword này sẽ dùng để verify trạng thái của button. Clickable có nghĩa là button đang enable, mà button đang enable thì user mới có thể click được, đúng không 😀

"Verify button element is clickable"
WebUI.verifyElementClickable(findTestObject('1.Basic/Topic_09_Web_Element_Command/button'))

11. [WebUI] Verify Element Not Clickable

• Verify Element có thể KHÔNG click được hay không?
• Keyword này chỉ được sử dụng với Element có tag = input với attribute = disable

"For button is disabled, verify button element is no clickable"
WebUI.verifyElementNotClickable(findTestObject('1.Basic/Topic_09_Web_Element_Command/button'))

12. [WebUI] Verify Element Has Attribute

• Verify thuộc tính của Web Element có tồn tại hay không?

"Verify button element has attribute: data-component"
WebUI.verifyElementHasAttribute(findTestObject('1.Basic/Topic_09_Web_Element_Command/button'), "data-component", 2)

13. [WebUI] Verify Element Not Has Attribute

• Verify thuộc tính của Web Element có KHÔNG tồn tại hay không?

"Verify button element not has attribute: test"
WebUI.verifyElementNotHasAttribute(findTestObject('1.Basic/Topic_09_Web_Element_Command/button'), "test", 2)

14. [WebUI] Verify Element Not Present

• Verify Web Element có KHÔNG tồn tại trong DOM hay không?

"Verify element not present in DOM"
WebUI.verifyElementNotPresent(findTestObject('1.Basic/Topic_09_Web_Element_Command/notPresent'), 2)

15. [WebUI] Verify Element Present

• Verify Web Element có tồn tại trong DOM hay không?

"Verify element present in DOM"
WebUI.verifyElementPresent(findTestObject('1.Basic/Topic_09_Web_Element_Command/helloworld'), 2)

16. [WebUI] Verify Element Visible

• Verify Web Element có hiển thị trên page UI hay không?

"Verify element visible: present in DOM and display on UI"
WebUI.verifyElementVisible(findTestObject('1.Basic/Topic_09_Web_Element_Command/button_Start'))

17. [WebUI] Verify Element Not Visible

• Verify Web Element có đang KHÔNG hiển thị trên page UI hay không?

"Verify element not visible: present in DOM but not display on UI"
WebUI.verifyElementNotVisible(findTestObject('1.Basic/Topic_09_Web_Element_Command/helloworld'))

18. Kết

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