Ví dụ về bộ chọn css xpath

Các biểu thức đường dẫn này trông rất giống các biểu thức đường dẫn bạn sử dụng với các hệ thống tệp máy tính truyền thống

---

Hàm chuẩn XPath

XPath bao gồm hơn 200 chức năng tích hợp

Có các hàm cho giá trị chuỗi, giá trị số, booleans, so sánh ngày và giờ, thao tác nút, thao tác trình tự, v.v.

Ngày nay, các biểu thức XPath cũng có thể được sử dụng trong JavaScript, Java, Lược đồ XML, PHP, Python, C và C++ và nhiều ngôn ngữ khác

XPath sử dụng các biểu thức đường dẫn để chọn các nút hoặc tập hợp nút trong tài liệu XML. Nút được chọn bằng cách đi theo một đường dẫn hoặc các bước

---

Tài liệu Ví dụ XML

Chúng tôi sẽ sử dụng tài liệu XML sau trong các ví dụ bên dưới

Harry Potter29. 99

Học XML39. 95

---

Chọn nút

XPath sử dụng các biểu thức đường dẫn để chọn các nút trong tài liệu XML. Nút được chọn bằng cách đi theo một đường dẫn hoặc các bước. Các biểu thức đường dẫn hữu ích nhất được liệt kê dưới đây

ExpressionDescriptionnodenameChọn tất cả các nút có tên "nodename"/Chọn từ nút gốc//Chọn các nút trong tài liệu từ nút hiện tại khớp với lựa chọn bất kể chúng ở đâu. Chọn nút hiện tại. Chọn cha của nút hiện tại@Chọn thuộc tính

Trong bảng dưới đây, chúng tôi đã liệt kê một số biểu thức đường dẫn và kết quả của các biểu thức

Biểu thức đường dẫnResultbookstoreChọn tất cả các nút có tên "hiệu sách"/hiệu sáchChọn phần tử gốc hiệu sách

Ghi chú. Nếu đường dẫn bắt đầu bằng dấu gạch chéo ( / ) thì nó luôn đại diện cho một đường dẫn tuyệt đối đến một phần tử

cửa hàng sách/sáchChọn tất cả các phần tử sách là con của cửa hàng sách//bookChọn tất cả các phần tử sách bất kể chúng ở đâu trong tài liệubookstore//bookChọn tất cả các phần tử sách là hậu duệ của phần tử cửa hàng sách, bất kể chúng ở đâu dưới phần tử cửa hàng sách//

---

---

Vị ngữ

Các vị từ được sử dụng để tìm một nút cụ thể hoặc một nút chứa một giá trị cụ thể

Vị ngữ luôn được đặt trong dấu ngoặc vuông

Trong bảng dưới đây, chúng tôi đã liệt kê một số biểu thức đường dẫn với các vị từ và kết quả của các biểu thức

Biểu thức đường dẫnResult/bookstore/book[1]Chọn phần tử sách đầu tiên là phần tử con của phần tử hiệu sách

Ghi chú. Trong IE 5,6,7,8,9 nút đầu tiên là [0], nhưng theo W3C, đó là [1]. Để giải quyết vấn đề này trong IE, hãy đặt SelectionLanguage thành XPath

Bài viết này chia sẻ một số cách sử dụng Xpath và CSS selector để tìm một phần tử nào đó trong Selenium. Bài này khá hữu ích đối với mình, và mình cũng hi vọng sẽ giúp ích một phần nào đó cho các bạn

Bên cạnh bài viết này các bạn cũng có thể tham khảo bài viết để biết về cách xác định công cụ định vị của một phần web điện tử ở bài viết này nhé

  Trình thực thi JavaScript trong Selenium Webdriver

  Làm quen. Tóm tắt cơ bản về Selenium

1. Theo ID

ID của một phần tử được định nghĩa viết theo cú pháp Xpath là “[@id='idName']” nhưng theo cú pháp CSS thì nó là “#idName”/

Ví dụ phần tử div có id là  'bảng điều khiển' sẽ được diễn giải như sau

• Xpath. //div[@id=’panel’]
• Theo bộ chọn CSS. css = div#panel

2. Theo lớp

Lớp của một phần tử được định nghĩa theo cú pháp Xpath là “[@class=’className’]” nhưng theo cú pháp CSS nó được định nghĩa là “. tên lớp"

Ví dụ một phần tử div với lớp là ‘panelClass’ sẽ được diễn giải như sau

• Theo định vị Xpath. //div[@class=’panelClass’]
• Theo bộ chọn CSS. css=div. bảng điều khiểnClass

Đối với những phần tử có nhiều lớp thì cần tách riêng những lớp đó bằng cách sử dụng dấu cách (“ “) trong Xpath, và sử dụng dấu chấm (“”. ”) trong CSS. Các bạn xem ví dụ bên dưới này nhé

• Theo định vị Xpath. //div[@class=’panelClass1 panelClass2′]
• Theo bộ chọn CSS. css=div. bảng điều khiểnClass1. bảng điều khiểnClass2

3. Một số thuộc tính khác

Để lựa chọn một phần tử theo một số thuộc tính bất kỳ kỳ nào của nó, (ví dụ:. div div section has property name, or property type of a input section) ta has as after

• Với bộ định vị Xpath. //div[@name=’ Continue’]  và //input[@type=’button’]
• Với bộ chọn CSS. css=div[name=’continue’] và css=input[type=’button’]

4. Phần tử con liền kề (con trực tiếp)

Một phần tử liền kề của một phần tử được biểu thị bằng hai dấu gạch ngang “//” trong Xpath và dấu trích dẫn lớn hơn (“>“) trong bộ chọn Css. Xem ví dụ dưới đây về phần tử “ul” có phần tử liền kề là “li”

• Với bộ định vị Xpath. //ul/li
• Với bộ chọn CSS. css=ul > li

5. Con / con nhỏ

Phần tử con hoặc phần tử “cháu” (phần tử con của phần tử con) được biểu thị bằng hai dấu gạch phải “//” trong Xpath, và dấu cách (“ “) trong CSS Selector. Dưới dây là ví dụ về một đứa trẻ/con “li” của phần tử cha “ul”

• Với bộ định vị Xpath. //ul//li
• Với bộ chọn CSS. css=ul li

Các bạn lưu ý tránh nhầm lẫn giữa các cách biểu diễn “ul li” và “ul > li” nhé

6. Đứa trẻ thứ n

Để tìm phần tử con thứ n, theo cú pháp Xpath ta sẽ sử dụng “[n]”, theo CSS chúng ta sẽ biểu thị theo cú pháp “. loại thứ n(n)”. Các bạn tham khảo ví dụ bên dưới nhé

Ta có phần tử có id =’drinks’ chứa 1 danh sách các loại đồ uống

1. Cà phê
2. Trà
3. Sữa
4. Canh
5. Nước ngọt

To get out of number 5 in the list on

• Theo Xpath. //ul[@id=’drinks’]/li[5]
• Theo CSS. css=ul#drinks li. loại thứ n(5), cũng có thể sử dụng cú pháp khác là li. con thứ n(5)

7. Cha của 1 phần tử – Cha của một phần tử

Cha của một phần tử có thể được biểu diễn thông qua ký tự “/. ” in Xpath and “. cha mẹ” trong CSS. Ví dụ bên dưới dây nếu bạn muốn tìm cha của danh sách các mục của lớp 'blue' thì

1. đầu tiên
2. thứ hai
3. ngày thứ ba
4. thứ tư
5. thứ năm

• Theo Xpath. //li[@class=’blue’]/
• Theo CSS. css=li. màu xanh da trời. cha mẹ

8. Tìm anh em cùng cha(Next Sibling)

Next Anh chị em chính là những phần tử anh em cùng cấp với nhau thuộc cùng một phần tử cha nào đó. Tìm phần tử tiếp theo anh em ruột tức là lấy ra 1 phần tử tiếp theo sau một phần tử cụ thể nào đó khác, điều kiện là nằm trong cùng 1 cha

Ví dụ bạn muốn chọn ra anh em của phần tử “li” ở vị trí thứ 2 trong danh sách có lớp “blue”

• Trọng Xpath. //li[@class=’blue’]/. /li[2]
• Trong bộ chọn CSS. css=li. blue + li

Tương tự nếu ban jmuoons lấy phần tử thứ 3 trong danh sách ta có các biểu diễn theo cú pháp như sau

• Trong bộ định vị Xpath. //li[@class=’blue’]/. /li[3]
• Trong bộ chọn CSS. css=li. blue + li + li

9. Tìm phần tử theo Văn bản tương ứng với Văn bản trong phần tử đó (Innertext)

Ta sẽ sử dụng một phương thức Javascript là methodcontains() để kiểm tra đoạn văn bản “văn bản” bên trong một phần tử web. Ví dụ với một liên kết có văn bản là “Đăng nhập”

• Theo định vị Xpath. //a[chứa(văn bản(), ‘Đăng nhập’)] hoặc a//[chứa(chuỗi(), ‘Đăng nhập’)]
• Theo bộ chọn CSS. css=a. chứa ('Đăng nhập')

10. Tìm phần tử dựa trên Chuỗi con tương ứng có trong phần tử đó (Khớp theo chuỗi con)

Đây là một cách khá thú vị nhé. Với cách này, ta sẽ kết hợp các chuỗi dựa trên một phần của chuỗi đó. Ví dụ như dựa vào tiền tố (Prefix), hậu tố (hậu tố) hoặc một định dạng mẫu (chuỗi con) nào đó