Create ~ B_Element

Dựa trên thư viện selenium, các tính năng hoàn toàn tương tự.

Bao gồm các khối được sử dụng để tương tác với các phần tử của cửa sổ trình duyệt được mở ra với một profile nhất định.

Các khối

connect_profile {profile_name} find_element_by (args_1 = ..., timeout = ...)

Kết nối tới profile với tên {profile_name}, trả về phần tử có thuộc tính khớp với giá trị args_1 truyền vào.

Các tham số:

  • args_1: tham số định vị phần tử cần kết nối tới. Có các tùy chọn sau:
    1. id: thuộc tính id của phần tử
    2. css_selector: bộ chọn css của phần tử
    3. name: thuộc tính name của phần tử
    4. class_name: thuộc tính class
    5. x_path: đường dẫn x_path của phần tử trong tài liệu document.
    6. link_text: phần text của phần tử là đường link (thẻ a)
    7. partial_link_text: match nhất với phần text của phần tử là đường link (thẻ a)
    8. tag_name: tên thẻ (tag) của phần tử cần kết nối tới.
  • timeout: số lần cố gắng kết nối và tìm phần tử, mỗi lần tương ứng khoảng 1 giây.

Để xác định các thuộc tính (args_1) của phần tử trong trang web, thực hiện các bước sau:

  1. Cài đặt add-on Selenium IDE
  2. Mở Selenium IDE bằng cách click chuột vào biểu tượng như hình dưới.

  3. Tạo dự án Selenium IDE mới.

  4. Điền tên cho dự án mới.

  5. Trong dự án mới nhập url trang web cần tương tác vào khu vực Playback base URL, sau đó nhấn nút REC màu đỏ như hình dưới.

  6. Sau khi mở tra trang web, giả sử là https://accounts.google.com/signup, bạn thực hiện thao tác bạn cần, Selenium IDE sẽ lưu lại các hành động của bạn vào bảng với các cột Command, Target, Value. Cột Target là cột chứa dữ liệu về id, css, class, link text..., cái mà chúng ta cần để đưa vào chương trình của mình.

  7. Chọn hàng cần chỉnh sửa, nhấn "nút mũi tên" sau đó rê chuột click vào phần tử cần thao tác, click vào "nút kính lúp" sẽ làm nổi bật phần tử bạn đã chọn.

Ví dụ:

Trong ví dụ dưới đây, chúng ta tạo các khối để mở chrome browser với url https://accounts.google.com/signup?hl=en, sau đó click nút nhấn Next.

Trước tiên chúng ta cần thông tin định vị nút nhấn Next, làm như sau:

  1. Mở Selenium IDE, nhập đường dẫn https://accounts.google.com/signup?hl=en và nhấn nút REC màu đỏ.

  2. Giao diện web hiển thị ra chúng ta làm thao tác đầu tiên là nhấn nút Next, hành động được Selenium IDE ghi lại và cập nhật lên bảng như hình.

  3. Khu vực được đánh dấu màu đỏ là nơi mà chung ta có thể lấy các thông tin nhằm định vị nút nhấn Next

    Các tùy chọn để kết nối với nút nhấn Next:

    • id: accountDetailsNext
    • css: .VfPpkd-LgbsSe-OWXEXe-k8QpJ > .VfPpkd-vQzf8d
    • xpath: //div[@id='accountDetailsNext']/div/button/span
    • xpath: //div[2]/div/div/div/div/button/span
    • xpath: xpath=//span[contains(.,'Next')]

Sử dụng tham số xpath để định vị nút nhấn, ta có ví dụ sau:

connect_profile {profile_name} find_elements_by (args_1 = ..., timeout = ...)

Kết nối tới profile với tên {profile_name}, trả về list phần tử có thuộc tính khớp với giá trị args_1 truyền vào.

Các tham số hoàn toàn giống với khối trên.

Để hiểu rõ cách sử dụng khối này, ta thực hiện ví dụ in ra tiêu để 3 kết quả đầu tiên tìm kiếm được bằng công cụ google search với từ khóa "sbot.co":

  1. Mở ra profile và nhập vào thanh URL nội dung https://www.google.com/search?q=sbot.co
  2. Trong giao diện web mở ra, click chuột phải lên tiêu đề đầu tiên và chọn Inspect, ở khung cửa sổ hiện ra bên phải của trình duyệt, chú ý tới thuộc tính class của phần tử này.
  3. Để ý rằng, bằng việc thực hiện thao tác thứ 2 cho 3 tiêu đề đầu tiên, kết quả mà chúng ta nhìn thấy là 3 tiêu đề này đều có thuộc tính class giống nhau và có giá trị bằng LC20lb. Như vậy, thông qua class LC20lb, chúng ta có thể lấy về toàn bộ các tiêu đề của kết quả tìm kiếm dưới dạng một list các phần tử. Duyệt qua từng phần tử này và in ra text của nó để hoàn thành thử nghiệm:

connect_profile {profile_name} get_active_element

Kết nối tới profile với tên {profile_name}, trả về list phần tử đang kích hoạt.

Ví dụ:

Trong ví dụ trên, bằng cách sử dụng phím bấm tab, ta di chuyển con trỏ chuột qua các phần tử khác nhau, ứng với từng phần tử đó ta kiểm tra xem nó có text giá trị bằng "Next" hay không, nếu bằng thì phần tử active là nút nhấn Next mà chúng ta cần tìm.

connect_profile {profile_name} move_to_element {args_1} then {args_2}

Kết nối tới profile với tên {profile_name}, di chuyển tới phần tử đích và thực hiện hành động nhất định.

Các tham số:

  • args_1: phần tử cần tương tác.
  • args_2: hành động cần thực hiện đối với phần tử, có các tùy chọn sau:
    1. click: nhấp chuột vào phần tử.
    2. double_click: nhấp đúp chuột vào phần tử.
    3. context_click: nhấp chuột phải vào phần tử.
    4. clear: xóa text của phần tử Edit.
    5. submit: submit một form nhập dữ liệu.

Ví dụ:

Chương trình hoạt động như sau:

  • Mở ra form đăng ký Gmail
  • Nhấn nút Next
  • Di chuyển tới active_element chính là Edit First Name.
  • Nhập text "abc".
  • Double click lên Edit này.
  • Cuối cùng là clear nội dung text đã nhập vào Edit.

connect_profile {profile_name} click_and_hold_element {element_source} move_to_element {element_target}

Kết nối tới profile với tên {profile_name}, nhấn giữ một phần tử, kéo thả vào một phần tử khác.

Các tham số:

  • element_source: phần tử nguồn.
  • element_target: phần tử đích.

connect_element {args_1} sendkey {args_2}

Kết nối tới phần tử và thực hiện thao tác nhấn phím.

Các tham số:

  • args_1: phần tử cần kết nối.
  • args_2: phím bấm cần nhần thực hiện.

connect_element {args_1} send_text {args_2}

Kết nối tới phần tử và thực hiện thao tác nhấn phím.

Các tham số:

  • args_1: phần tử cần kết nối.
  • args_2: văn bản text cần nhập vào phần tử.

connect_element {args_1} get {args_2}

Kết nối tới phần tử và trả về thông tin liên quan.

Các tham số:

  • args_1: phần tử cần kết nối.
  • args_2: thuộc tính phần tử cần lấy ra, có các tùy chọn sau:
    1. text: thuộc tính text của phần tử.
    2. accessible_name:
    3. aria_role:
    4. id:
    5. loction_once_scrolled_into_view:
    6. parent:
    7. screenshot_as_base64:
    8. screenshot_as_png:
    9. tag_name:
    10. size_width:
    11. size_height:
    12. position_x:
    13. position_y:
    14. location_x:
    15. location_y:

connect_element {args_1} get_value_of_css_property {args_2}

Kết nối tới phần tử và trả về giá trị của thuộc tính CSS.

Các tham số:

  • args_1: phần tử cần kết nối.
  • args_2: tên thuộc tính CSS cần lấy giá trị.

Tham khảo bài viết để biết cách xem các thuộc tính CSS của một phần tử web.

connect_element {args_1} get_attribute {args_2}

Kết nối tới phần tử và trả về giá trị của thuộc tính đã cho của phần tử.

Các tham số:

  • args_1: phần tử cần kết nối.
  • args_2: tên thuộc tính cần lấy giá trị.

Phương thức này trước tiên sẽ cố gắng trả về giá trị của một thuộc tính với tên đã cho. Nếu một thuộc tính có tên đó không tồn tại, nó sẽ trả về giá trị của thuộc tính có cùng tên. Nếu không có thuộc tính nào có tên đó, thì Không có thuộc tính nào được trả về.

Các giá trị thuộc tính kiểu “true” hoặc “false”, được trả về dưới dạng boolean. Tất cả các giá trị không phải dạng "true", "false" được trả về dưới dạng chuỗi. Đối với các thuộc tính không tồn tại, không trả về.

Tham khảo bài viết để biết cách xem các thuộc tính của một phần tử web.

connect_element {args_1} check_is_selected

Kết nối tới phần tử và trả về liệu phần tử có đang được chọn hay không. Có thể được sử dụng để kiểm tra xem một checkbox hoặc radio button có đang được chọn.

Các tham số:

  • args_1: phần tử cần kết nối.

connect_element {args_1} check_is_enabled

Kết nối tới phần tử và trả về liệu phần tử có đang được bật hay không.

Các tham số:

  • args_1: phần tử cần kết nối.

connect_element {args_1} check_is_displayed

Kết nối tới phần tử và trả về liệu phần tử có đang hiển thị cho người dùng hay không.

Các tham số:

  • args_1: phần tử cần kết nối.