Chào các bạn đã đến với chủ đề tiếp theo của mình. Hôm nay, mình sẽ tiếp tục hướng dẫn các bạn cách làm thế nào để verify HTML5 message
Trước khi qua bước kiểm tra HTML5 message hãy điểm lại 1 số thông tin:
Nội dung
1. HTML5 Form
- Một phần của trang web bạn đang test, cho phép người dùng tương tác với hệ thống, thu thập thông tin: form đăng nhập/ đăng kí/ mua hàng/ bình luận/..
2. Cách thức hoạt động
- User mở form nhập liệu
- Điền thông tin vào form sau đó submit dữ liệu lên máy chủ – trong step này dữ liệu được nhập vào có thể được kiểm tra tại browser của người dùng thông qua các đoạn mã Javascript
- Server sau khi nhận được thông tin sẽ xử lý thông qua các ngôn ngữ kịch bản máy chủ và thực hiện kiểm tra dữ liệu trong form, logic, ghi dữ liệu vào DB
- Sau khi xử lý xong thông tin sẽ gửi lại hồi đáp thành công hay không về trình duyệt và kết thúc một chu trình khép kín xử lý form nhập liệu
3. Thuộc tính ‘required’ của thẻ <input>:
- ‘required’ là thuộc tính mới trong HTML5 dành cho thẻ input. Tác dụng của required là buộc người dùng phải nhập dữ liệu thì mới gửi được (submit)
- Giờ bạn không điền gì vào trường NAME > nhấn nút Submit> bạn sẽ nhận được thông báo kiểu như “Vui lòng điền vào trường này” = “Please fill out this field.”
<form action="verify">
<label>NAME:<input type="text" name="name" required></label>
<input type="submit" name="submit-btn" value="SUBMIT">
</form>
- Thuộc tính required hỗ trợ hầu hết các trình duyệt thông dụng hiện tại
- Những thẻ input type dùng required attribute: text, checkbox, radio, email, password, search, url, telephone, date time picker, number, file
- Required là thuộc tính kiểu boolean, nghĩa là nó chỉ nhận 2 giá trị có hoặc không có. Nếu không có requried trong thẻ input nghĩa là không yêu cầu phải nhập đủ dữ liệu, ngược lại nếu có thì phải nhập đủ mới được Submit
4. Làm sao để verify HTML5 message khi Katalon ko support
- Kataon Studio ko tương tác được với các html5 message, nếu để ý sẽ thấy các javascript message này được browser hiển thị chứ ko hề được tìm thấy trong DOM – vì thế ko nên sử dụng Inspector/ Firebug để find các message này
- Giải pháp là dùng chính javascript để get các message này và verify với các case cụ thể
/**
* Get HTML5 Validation message
* @param testObject
* @return
*/
public static String getHTML5ValidationMessage(TestObject testObject) {
WebElement element = WebUiCommonHelper.findWebElement(testObject, 30)
WebDriver driver = DriverFactory.getWebDriver()
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
return (String) jsExecutor.executeScript("return arguments[0].validationMessage;", element);
}Testcase sample
- 1. Open http://practice.automationtesting.in/
- 2. Click on [My Account] menu item
- 3. On [Register] form, input invalid format to [Email Address]. Ví dụ: abc
- 4. Input password
- 5. Click on [REGISTER] button
- 6. Verify validation message displayed: “Please include an ‘@’ in the email address. ‘abc’ is missing an ‘@’.”
5. Code Demo
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import common.Utilities
import internal.GlobalVariable
"Open http://practice.automationtesting.in/"
WebUI.openBrowser("http://practice.automationtesting.in/")
"Maximize window"
WebUI.maximizeWindow()
"Click on [My Account] menu item"
WebUI.click(findTestObject('Object Repository/mnu_MyAccount'))
"On [Register] form, input invalid format to [Email Address]"
WebUI.setText(findTestObject('Object Repository/txt_EmailAddress'), "abc")
"Input password"
WebUI.setText(findTestObject('Object Repository/txt_Password'), "katalontesting123")
"Click on [REGISTER] button"
WebUI.click(findTestObject('Object Repository/btn_Register'))
"Get validation message"
String validationMsg = Utilities.getHTML5ValidationMessage(
findTestObject('Object Repository/txt_EmailAddress'))
"Verify validation message displayed correctly"
WebUI.verifyEqual(validationMsg, "Please include an '@' in the email address. 'abc' is missing an '@'.")
'Delay 5s'
WebUI.delay(5)
"Close browser"
WebUI.closeBrowser()6. Kết
Như vậy mình đã giới thiệu xong cách để verify HTML validation message. 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.
Nguồn tham khảo: https://vntesters.com/java-webdriver-14-kiem-tra-html5-validation-message/