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ề IFrame. Vậy IFame là gì?
iFrame là chữ viết tắt của Inline Frame – khung nội tuyến. Nó là thành phần của một HTML element (tag HTML) giúp bạn đính kèm/nhúng tài liệu HTML và các video vào trong một trang web. Bằng cách sử dụng iFrame, bạn đã tải thông tin, nội dung từ một web bên ngoài lên trang web của bạn. Vậy, có thể xem iFrame là một phần của nội dung web, chứ không phải là một phần của thiết kế giao diện website. Ví dụ, bạn muốn thêm một Youtube video để mô tả rõ hơn cho người đọc, bạn có thể thêm iFrame vào bên trong bài viết. iFrame có thể tích hợp mọi nội dung từ bất kỳ vị trí nào trong trang web.
Ví dụ như hình trên, như bạn thấy ở Developer Tool, mình có 2 thẻ HTML iframe. Để input vào textbox First name, về mặt manual, bạn có thể thao tác trực tiếp đến nó. Nhưng về mặt scripting, bạn không thể dùng keyword WebUI.setText ngay được. Trước khi bạn thao tác setText, bạn phải switch vào cái iframe đó trước, sau đó bạn mới thao tác đến nó.
Keyword mà Katalon support để thao tác như sau:
1. [WebUI] Switch To Frame
Switch the current context into an iframe.
'Switch to Frame'
WebUI.switchToFrame(iframe_nested, 2)2. [WebUI] Switch To Default Content
Sau khi switch to Iframe để thao tác, các bạn phải switch về default window (nghĩa là switch ra khỏi cái iframe đó) để tiếp tục thực hiện các thao tác khác bên ngoài frame
'Switch back to default content'
WebUI.switchToDefaultContent()Mình sẽ hướng dẫn các bạn cách làm trên Katalon như bên dưới.
- Đầu tiên, bạn hãy tạo 1 Object Repository có tên là ifame với locator //iframe
- Tiếp theo, bạn tạo thêm 1 Object Repository nữa có tên là iframe_nested với locator //iframe.
- Ở phần Setting – Have parent object? Bạn select Parent iframe và browse đến Object Repository mình vừa mới tạo ở bước 1
- Tiếp đến, bạn tạo thêm 1 Object Repository nữa có tên là txt_FirstName với locator //input[@id=’first-name’]
Bây giờ, chúng ta bắt đầu scripting nhé:
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://katalon-test.s3.amazonaws.com/aut/html/iframe.html'
WebUI.navigateToUrl('https://katalon-test.s3.amazonaws.com/aut/html/iframe.html')
'Maximize browser'
WebUI.maximizeWindow()
'Get test object iframe nested'
TestObject iframe_nested = findTestObject('IFrame/iframe_nested')
'Get test object first name'
TestObject inputInsideIframe = findTestObject('IFrame/txt_FirstName')
'Switch to Frame'
WebUI.switchToFrame(iframe_nested, 2)
'Input to First name text box'
WebUI.setText(inputInsideIframe, "phuong le")
'Get size of element txt_Firstname'
'Because we are in iframe, size of element txt_Firstname = 1'
List<WebElement> foundElements = WebUiCommonHelper.findWebElements(inputInsideIframe, 2)
'Verify that the input inside iframe can be found because we have switched to the iframe context'
WebUI.verifyEqual(foundElements.size(), 1)
"Clear and send new String"
foundElements[0].setText("phuong le234")
'Switch to default content'
WebUI.switchToDefaultContent()
'Get size of element txt_Firstname again'
foundElements = WebUiCommonHelper.findWebElements(inputInsideIframe, 2)
'Verify that the input element inside iframe cannot be found because we have switched to default content'
'Now, we are not in iframe. So, size of element txt_Firstname = 0'
WebUI.verifyEqual(foundElements.size(), 0)
'Close browser'
WebUI.closeBrowser()3. Kết
Như vậy chúng ta đã tìm hiểu qua 1 số keyworks để xử lý cho IFrame. 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