Element Operation
Element Operation cung cấp các thao tác để kiểm tra, lấy thông tin và tương tác với các phần tử HTML trên trang web.
Check Element Exists
Kiểm tra xem phần tử có tồn tại không
Kiểm tra xem một phần tử có tồn tại trên trang web hay không dựa trên CSS selector.
Tham số:
Debug Port: Port kết nối trình duyệt (bắt buộc)
Tab Index: Index của tab cần thao tác (0-based, bắt buộc)
Selector: CSS selector của phần tử cần kiểm tra (bắt buộc)
Timeout: Thời gian chờ tối đa (milliseconds, bắt buộc)
Ví dụ:
{
"resource": "elementOperation",
"operation": "checkElementExists",
"debugPort": 9222,
"tabIndex": 0,
"selector": "#login-button",
"timeout": 30000
}
💡 Lưu ý:
- Trả về true nếu phần tử tồn tại, false nếu không
- Selector phải chính xác và duy nhất
- Hữu ích để validate trước khi thực hiện thao tác
- Selector có thể sử dụng format đặc biệt: >CSS>, >XPATH>, >FRAME>, >SHADOW>, >AT>
Filter Request After Click
Theo dõi và lọc network requests sau khi click
Theo dõi các network requests được tạo ra sau khi click vào một phần tử và lọc theo các từ khóa cụ thể.
Tham số:
Debug Port: Port kết nối trình duyệt (bắt buộc)
Tab Index: Index của tab cần thao tác (0-based, bắt buộc)
Selector: CSS selector của phần tử cần click (bắt buộc)
Keywords: Chuỗi chứa các từ khóa cần tìm trong URL, phân cách bởi dấu phẩy (bắt buộc)
Timeout: Thời gian chờ tối đa (milliseconds, bắt buộc)
Ví dụ:
{
"resource": "elementOperation",
"operation": "filterRequestAfterClick",
"debugPort": 9222,
"tabIndex": 0,
"selector": "#submit-form",
"keywords": "api/data, api/user",
"timeout": 30000
}
💡 Lưu ý:
- Hữu ích để capture API calls
- Có thể lọc theo nhiều từ khóa, phân cách bằng dấu phẩy
- Trả về danh sách URLs phù hợp
- Selector có thể sử dụng format đặc biệt: >CSS>, >XPATH>, >FRAME>, >SHADOW>, >AT>
Get Element Attribute
Lấy giá trị thuộc tính của phần tử
Lấy giá trị của một thuộc tính cụ thể từ phần tử HTML được xác định bởi selector.
Tham số:
Debug Port: Port kết nối trình duyệt (bắt buộc)
Tab Index: Index của tab cần thao tác (0-based, bắt buộc)
Selector: CSS selector của phần tử (bắt buộc)
Attribute: Tên thuộc tính cần lấy (bắt buộc)
Timeout: Thời gian chờ tối đa (milliseconds, bắt buộc)
Ví dụ:
{
"resource": "elementOperation",
"operation": "getElementAttribute",
"debugPort": 9222,
"tabIndex": 0,
"selector": "img.product-image",
"attribute": "src",
"timeout": 30000
}
💡 Lưu ý:
- Các thuộc tính phổ biến: href, src, alt, title, value
- Trả về null nếu thuộc tính không tồn tại
- Hữu ích để extract data từ trang web
- Selector có thể sử dụng format đặc biệt: >CSS>, >XPATH>, >FRAME>, >SHADOW>, >AT>
Get Element Count
Đếm số phần tử khớp với selector
Đếm số lượng phần tử HTML khớp với CSS selector được chỉ định.
Tham số:
Debug Port: Port kết nối trình duyệt (bắt buộc)
Tab Index: Index của tab cần thao tác (0-based, bắt buộc)
Selector: CSS selector để đếm phần tử (bắt buộc)
Timeout: Thời gian chờ tối đa (milliseconds, bắt buộc)
Ví dụ:
{
"resource": "elementOperation",
"operation": "getElementCount",
"debugPort": 9222,
"tabIndex": 0,
"selector": ".product-item",
"timeout": 30000
}
💡 Lưu ý:
- Trả về số nguyên >= 0
- Hữu ích để validate số lượng items
- Có thể dùng để kiểm tra pagination
- Selector có thể sử dụng format đặc biệt: >CSS>, >XPATH>, >FRAME>, >SHADOW>, >AT>
Get Element Text
Lấy nội dung text của phần tử
Lấy nội dung text (innerText) của phần tử HTML được xác định bởi selector.
Tham số:
Debug Port: Port kết nối trình duyệt (bắt buộc)
Tab Index: Index của tab cần thao tác (0-based, bắt buộc)
Selector: CSS selector của phần tử (bắt buộc)
Timeout: Thời gian chờ tối đa (milliseconds, bắt buộc)
Ví dụ:
{
"resource": "elementOperation",
"operation": "getElementText",
"debugPort": 9222,
"tabIndex": 0,
"selector": ".product-title",
"timeout": 30000
}
💡 Lưu ý:
- Trả về text content, không bao gồm HTML tags
- Trả về chuỗi rỗng nếu phần tử không có text
- Hữu ích để extract data từ trang web
- Selector có thể sử dụng format đặc biệt: >CSS>, >XPATH>, >FRAME>, >SHADOW>, >AT>
Set Combobox Value
Đặt giá trị cho phần tử combobox
Đặt giá trị cho phần tử select/combobox bằng cách chọn option phù hợp.
Tham số:
Debug Port: Port kết nối trình duyệt (bắt buộc)
Tab Index: Index của tab cần thao tác (0-based, bắt buộc)
Selector: CSS selector của combobox (bắt buộc)
Value: Giá trị cần chọn (bắt buộc)
Timeout: Thời gian chờ tối đa (milliseconds, bắt buộc)
Ví dụ:
{
"resource": "elementOperation",
"operation": "setComboboxValue",
"debugPort": 9222,
"tabIndex": 0,
"selector": "#country-select",
"value": "VN",
"timeout": 30000
}
💡 Lưu ý:
- Value phải khớp với value attribute của option
- Có thể dùng text content thay vì value
- Hữu ích để điền form tự động
- Selector có thể sử dụng format đặc biệt: >CSS>, >XPATH>, >FRAME>, >SHADOW>, >AT>
Selector Format Đặc Biệt
Hướng dẫn sử dụng selector format đặc biệt
MultiProfile hỗ trợ nhiều loại selector format đặc biệt để tương tác với các phần tử phức tạp.
Các format được hỗ trợ:
>CSS> selector: Sử dụng CSS selector thông thường
>XPATH> xpath: Sử dụng XPath selector
>FRAME> frame_selector: Chuyển vào iframe trước khi thao tác
>SHADOW> shadow_selector: Chuyển vào shadow DOM
>AT> index: Lấy phần tử thứ n (0-based)
Ví dụ CSS Selector:
{
"selector": ">CSS> #login-button"
}
Ví dụ XPath Selector:
{
"selector": ">XPATH> //button[@id='login-button']"
}
Ví dụ Frame Selector:
{
"selector": ">FRAME> iframe[name='content'] >CSS> .submit-btn"
}
Ví dụ Shadow DOM:
{
"selector": ">SHADOW> #shadow-root >CSS> .custom-element"
}
Ví dụ Index Selector:
{
"selector": ">CSS> .product-item >AT> 2"
}
💡 Lưu ý:
- Có thể kết hợp nhiều format với nhau
- Index selector (>AT>) luôn đặt ở cuối
- Frame selector (>FRAME>) nên đặt ở đầu nếu cần
- Shadow selector (>SHADOW>) có thể lồng nhau
⚠️ Cảnh báo:
Selector format đặc biệt:
- Cần chính xác cú pháp, không có khoảng trắng thừa
- Frame selector có thể làm chậm thao tác
- Shadow DOM có thể không hoạt động trên một số trang
- Index selector có thể gây lỗi nếu không đủ phần tử
Tất cả CSS selector đều có tiền tố >CSS>
1. Tìm phần tử theo ID:
>CSS> #element-id
Tìm phần tử có id="element-id"
Ví dụ:
>CSS> #login-button
(tìm button đăng nhập)
Tìm phần tử có id="element-id"
Ví dụ:
>CSS> #login-button
(tìm button đăng nhập)
2. Tìm phần tử theo class:
>CSS> .element-class
Tìm phần tử có class="element-class"
Ví dụ:
>CSS> .product-item
(tìm tất cả sản phẩm)
Tìm phần tử có class="element-class"
Ví dụ:
>CSS> .product-item
(tìm tất cả sản phẩm)
3. Tìm phần tử theo thuộc tính:
>CSS> [attribute*="value part"]
Tìm phần tử có thuộc tính chứa một phần giá trị
Ví dụ:
>CSS> [data-id*="product"]
(tìm phần tử có data-id chứa "product")
Tìm phần tử có thuộc tính chứa một phần giá trị
Ví dụ:
>CSS> [data-id*="product"]
(tìm phần tử có data-id chứa "product")
4. Kết hợp nhiều CSS selector:
>CSS> #element-parent >CSS> #element-id-child
Tìm phần tử con bên trong phần tử cha
Ví dụ:
>CSS> #product-list >CSS> .product-title
(tìm tiêu đề sản phẩm bên trong danh sách sản phẩm)
Tìm phần tử con bên trong phần tử cha
Ví dụ:
>CSS> #product-list >CSS> .product-title
(tìm tiêu đề sản phẩm bên trong danh sách sản phẩm)
5. Sử dụng chỉ số với >AT>:
>CSS> .element-class >AT> 0
Tìm phần tử đầu tiên có class element-class
>CSS> .element-class >AT> 1
Tìm phần tử thứ hai có class element-class
Ví dụ:
>CSS> .product-item >AT> 2
(lấy sản phẩm thứ 3)
Tìm phần tử đầu tiên có class element-class
>CSS> .element-class >AT> 1
Tìm phần tử thứ hai có class element-class
Ví dụ:
>CSS> .product-item >AT> 2
(lấy sản phẩm thứ 3)
6. Kết hợp phức tạp:
>CSS> #element-parent >CSS> #element-id-child >AT> 0
Tìm phần tử con đầu tiên bên trong phần tử cha cụ thể
Ví dụ:
>CSS> #shopping-cart >CSS> .cart-item >AT> 0
(lấy sản phẩm đầu tiên trong giỏ hàng)
Tìm phần tử con đầu tiên bên trong phần tử cha cụ thể
Ví dụ:
>CSS> #shopping-cart >CSS> .cart-item >AT> 0
(lấy sản phẩm đầu tiên trong giỏ hàng)
Sử dụng XPath selector với tiền tố >XPATH>
1. XPath cơ bản:
>XPATH> //*[@id='element-parent'] >XPATH> .//*[@id='element-child']
XPath queries bên trong phần tử phải tương đối (bắt đầu với dấu chấm)
Ví dụ:
>XPATH> //*[@class='product-list'] >XPATH> .//button[@type='submit']
(tìm button submit bên trong danh sách sản phẩm)
XPath queries bên trong phần tử phải tương đối (bắt đầu với dấu chấm)
Ví dụ:
>XPATH> //*[@class='product-list'] >XPATH> .//button[@type='submit']
(tìm button submit bên trong danh sách sản phẩm)
2. Kết hợp XPath, CSS và AT:
Bạn có thể kết hợp >XPATH>, >CSS> và >AT>
Ví dụ:
>XPATH> //div[@class='container'] >CSS> .product-item >AT> 1
(tìm sản phẩm thứ 2 trong container)
Ví dụ:
>XPATH> //div[@class='container'] >CSS> .product-item >AT> 1
(tìm sản phẩm thứ 2 trong container)
Truy cập nội dung frame với tiền tố >FRAME>
1. Frame đơn giản:
>CSS> #frame-id >FRAME> >CSS> #element-id
Chọn phần tử bên trong frame
Ví dụ:
>CSS> #payment-frame >FRAME> >CSS> #card-number
(chọn input số thẻ bên trong frame thanh toán)
Chọn phần tử bên trong frame
Ví dụ:
>CSS> #payment-frame >FRAME> >CSS> #card-number
(chọn input số thẻ bên trong frame thanh toán)
2. Frame lồng nhau:
>CSS> #frame-id1 >FRAME> >CSS> #frame-id2 >FRAME> >CSS> #element-id
Chọn phần tử bên trong frame con của frame cha
Ví dụ:
>CSS> #outer-frame >FRAME> >CSS> #inner-frame >FRAME> >CSS> #target-button
(button bên trong frame con)
Chọn phần tử bên trong frame con của frame cha
Ví dụ:
>CSS> #outer-frame >FRAME> >CSS> #inner-frame >FRAME> >CSS> #target-button
(button bên trong frame con)
3. Kết hợp frame với index:
>CSS> iframe >AT> 1 >FRAME> >CSS> #element-id
Chọn phần tử bên trong frame thứ hai
Ví dụ:
>CSS> iframe >AT> 0 >FRAME> >CSS> .form-field >AT> 2
(field thứ 3 trong form của frame đầu tiên)
Chọn phần tử bên trong frame thứ hai
Ví dụ:
>CSS> iframe >AT> 0 >FRAME> >CSS> .form-field >AT> 2
(field thứ 3 trong form của frame đầu tiên)
📚 Tham khảo thêm:
Xem hướng dẫn chi tiết về CSS Selectors tại: Mozilla Developer Network