Please enable JavaScript.
Coggle requires JavaScript to display documents.
WEB ELEMENT - Coggle Diagram
WEB ELEMENT
WEB ELELMENT
Tương tác với Giao diện của Web/App
Thông qua biến "driver.find_element_by_"
Element Types
Textbox
: Input/Clear/Get Attribute
Text
: Get Text
Button/Radio Button/Checkbox
: Click/Selected
Link
: Click/ Get Attribute
Image
: Save/ Get Attribute
DropDown
: Click/ Select/Verify
Icon
: Click
Functions
ele.clear()
: xóa dữ liệu trong 1 Textbox/TextArea/Dropdown(editAble)
ele.click()
: click vào 1 button/checkbox/link/image/...
ele.find_element()
ele.find_elements()
ele.get_attribute()
: Lấy ra giá trị của attribute thuộc về element đang lấy
ele.value_of_css_property()
: Lấy giá trị Font/Size/Color/Location/Positon.. để test GUI
ele.tag_name
: Lấy về giá trị TagName của Element
ele.text
: Lấy giá trị text trong Element
ele.is_displayed()
: Kiểm tra 1 element có hiển thị trên giao diện không
ele.is_enabled()
: Kiểm tra một element đang ở trạng thái Disable hay Enable, Element có thể thao tác được hay không
ele.is_selected()
: Kiểm tra một element được chọn hay chưa ( Radio Button, Checkbox, Dropdown)
ele.send_keys()
: Nhập liệu vào (textbox/textArea/Dropdown)
ele.submit()
: Apply khi có trong tagname = 'form'
TextBox - TextArea - Dropdown Editable
textbox: tagname "input"
textArea: tagname "textarea"
Nhập dữ liệu : send_keys()
ele.send_keys()
Cần Clear() trước khi send_keys()
ele.clear()
Nhập nhiều dòng : \n
Verify
:
Nếu dữ liệu nằm trong attribute thì dùng hàm get_attribute()
ele.get_attribute()
Nếu dữ liệu ko nằm trong attribute thì dùng hàm text()
ele.text
Dropdown List
Có hai loại:
Default:
Dùng thẻ Select-Option
Custom
: Sử dụng các thư viện bên ngoài ( JQuery, Bootstrap, KendoUI, Angular, React, VueJS - Framework hỗ trợ cho FrontEnd)
Default Dropdown list
(from selenium.webdriver.support.ui import Select)
Khởi tạo:
selObj = Select(driver.find_element(By., ""))
selObj.select_by_visible_text()
: Thường dùng trong thực tế nhất, vì text ít khi thay đổi
selObj.first_selected_option.text
: Trả về giá trị hiện tại của dropdown
selObj.all_selected_options()
: Trả về list các giá trị đang được lựa chọn trong dropdown
selObj.options()
: Trả về list các Item trong Dropdown
selObj.is_multiple
: Kiểm tra 1 dropdown có hỗ trợ chọn nhiều items (multiple) hay không
selObj.deselect_all()
: Bỏ chọn tất cả các giá trị. Chỉ dùng khi đáp ứng multiple selected
Custom Dropdown List
Thư viện
Select
của Selenium chỉ hỗ trợ thẻ Select > Custom
Click vào 1 thẻ bất kì để xổ ra tất cả các item trong dropdown
Đợi tất cả các item hiển thị trong HTML DOM
Lấy tất cả các Item này đưa vào 1 List Element
Duyệt qua từng Item
Kiểm tra text của item đó có giống item mình cần click không
Nếu bằng thì click vào
Nếu không bằng thì duyệt tiếp cho đến hết tất cả item
Button / Radio Button/ Check Box
Verify Button is Enable/Disable
Button
Check button Enale/Disable:
ele.is_enabled()
Click button :
ele.click()
Default Radio Button
dùng thẻ Input để click
Check xem đã được chọn chưa:
ele.is_selected()
Click chọn:
ele.click()
Lưu ý: hàm
is_selected()
chỉ dùng được với thẻ input
Custom Radio Button
thẻ Input bị ẩn, không hiển thị
Dùng thẻ div có thẻ Click nhưng không Verify
Thẻ input có thể Verify nhưng không Click được
Handle Alert/ Authentication Alert
Phân biệt Alert và Popup
:
Popup
: dạng Webelement, bắt Locator và thao tác bình thường
Alert
: là một phần của trình duyệt, ko phải của Webelement --> Ko bắt locator được
Phân loại
Alert Accept
: Chỉ cho phép Accept
Alert Confrim
: Cho phép Accept hoặc Cancel
Alert Prompt
: Có thể nhập text vào, sau đó chọn Accept hoặc Cancel
Authentication Alert
:
Thao tác
Switch to Alert :
alert = driver.switch_to.alert
Get Text :
alert.text
Send Text:
alert.send_keys()
. Chỉ hỗ trợ cho 1 textbox
btnLogin:
alert.accept()
Cancel Alert:
alert.dismiss()
Authentication Alert
C1: Truyền thẳng User/Pass vào đường link
C2: Truyền User/Pass vào attribute của link trước đó
C3: Dùng AutoIT
User Interactions
- Mouse: được Selenium Support
Left Click
Right Click
Double Click
Click and Hold
Drag and Drop
Hover
- Keyboard
Send Keys: Nhập từ bàn phím
Key Up: Nhả ra
Key Down: Nhấn phím
Mouse Action
Hover/ Move mouse
:
self.action = ActionChains(self.driver)
self.action.move_to_element(element).perform()
Không được điều khiển chuột khi chạy test
Click and hold As Shift- choose multi element: chọn nhiều PA liên tiếp nhau
self.action.click_and_hold(lstElement[0]).
move_to_element(lstElement[7]).release().perform()
Click and hold as Ctrl: chọn nhiều PA khác nhau
self.action.key_down(Keys.CONTROL).perform()
self.driver.find_element(By.XPATH, ele_xpath).click()
self.action.key_up(Keys.CONTROL).perform()
Double Click
self.action.double_click(ele).perform()
Right Click
self.action.context_click(ele).perform()
Drag And Drop with < HTML5: selenium có support
self.action.drag_and_drop(srcEle, dstEle).perform()
Drag And Drop with >= HTML5: selenium ko support
Key Board
Thư viện
ActionChains
: from selenium.webdriver.common.action_chains import ActionChains
Handle Popup
Phân loại
Khi vừa mở trang thì hiện lên. Sau khi đóng, refresh trang không hiển thị: Popup xuất hiện không cố định
Popup xuất hiện khi click button: Hành vi cố định
Frame or IFrame/Windown/Tab
self.driver.switch_to.frame()
Thao tác
Switch chuyển qua lại giữa các frame
Không chuyển giữa hai child frame, mà bắt buộc phải về Home
Switch to Frame
self.driver.switch_to.frame
Swith to Home Page
self.driver.switch_to.default_content()
Switch to window/tab
self.driver.current_window_handle
self.driver.window_handles
self.driver.switch_to.window(window_ID)
Thao tác với 1 element: driver.find_element()
Trả về 1 biến dạng WebElement, có Exception nếu không có element nào được tìm thấy
Click vào 1 button/ link/ Radio Button/ Checkbox
Senkey vào 1 Textbox/ Text Area
Thao tác với nhiều Element: find_elements()
Trả về 1 biến dạng List, với các phần tử bên trong dạng WebElement. Trả về List Empty nếu không có element nào được tìm thấy
Lấy hết các đường link đang có ở trang hiện tại
Có bao nhiêu Element thỏa mãn điều kiện
Click tất cả các checkbox/Radio button đang có ở trang hiện tại
Thao tác với nhiều element trên table/grid