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á là 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.
Nội dung
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 = ‘panel’ sẽ được diễn tả như sau:
- Với Xpath: //div[@id=’panel’]
- Với CSS selector: css = div#panel
2. Theo Class
Class 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à “.className”.
Ví dụ một phần tử div với class = ‘panelClass’ sẽ được diễn tả như sau:
- Với Xpath locator: //div[@class=’panelClass’]
- Với CSS selector: css=div.panelClass
Đối với những phần tử có nhiều class thì cần tách riêng những class đó 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ụ phía dưới này nhé:
- Với Xpath locator: //div[@class=’panelClass1 panelClass2′]
- Với CSS selector: css=div.panelClass1.panelClass2
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ì nào đó của nó, (ví dụ: một phần tử div có thuộc tính name, hay thuộc tính type của một phần tử input) ta có như sau:
- Với Xpath locator: //div[@name=’continue’] và //input[@type=’button’]
- Với CSS selector: css=div[name=’continue’] và css=input[type=’button’]
4. Phần tử con liền kề (direct child)
Một phần tử con liền kề của một phần tử được biểu thị bằng hai dấu gạch chéo xuôi “//” trong Xpath và dấu ngoặc lớn hơn (“>“) trong Css selector. Xem ví dụ dưới đây về phần tử “ul” có phần tử con liền kề là “li”
- Với Xpath locator: //ul/li
- Với CSS selector: css=ul > li
5. Child / subchild
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 child/subchild “li” của phần tử cha “ul”
- Với Xpath locator: //ul//li
- Với CSS selector: css=ul li
Các bạn lưu ý tránh nhầm lẫn giữa cách biểu diễn “ul li” và “ul > li” nhé!
6. nth Child:
Để tìm phần tử con thứ nth, theo cú pháp Xpath ta sẽ sử dụng “[n]”, theo CSS chúng ta sẽ biểu thị theo cú pháp “:nth-of-type(n)”. Các bạn tham khảo ví dụ phía dưới nhé:
Ta có phần tử có id =’drinks’ chứa 1 danh sách các loại đồ uống:
- Coffee
- Tea
- Milk
- Soup
- Soft Drinks
Để lấy ra đồ uống số 5 trong danh sách trên:
- Theo Xpath: //ul[@id=’drinks’]/li[5]
- Theo CSS: css=ul#drinks li:nth-of-type(5), cũng có thể sử dụng cú pháp khác là li:nth-child(5).
7. Cha của 1 phần tử – Parent of an element
Cha của một phần tử có thể được biểu diễn thông qua ký tự “/..” trong Xpath và “:parent” trong CSS. Ví dụ dưới dây nếu bạn muốn tìm cha của danh sách các mục của class ‘blue’ thì:
- Theo Xpath: //li[@class=’blue’]/..
- Theo CSS: css=li.blue:parent
8. Tìm anh em cùng cha (Next Sibling)
Next Sibling 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ử next sibling 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ó class “blue”:
- Theo Xpath: //li[@class=’blue’]/../li[2]
- Theo CSS selector: css=li.blue + li
Tương tự nếu bạn muốn lấy phần tử thứ 3 trong danh sách ta có các biểu diễn theo cú pháp lần lượt như sau:
- Theo Xpath locator: //li[@class=’blue’]/../li[3]
- Theo CSS selector: css=li.blue + li + li
10. Tìm phần tử dựa theo Sub-string tương ứng có trong phần tử đó (Match by Sub-string)
Đây là một cách khá là thú vị nhé! Với cách này ta sẽ kết hợp các chuỗi dựa vào một phần của chuỗi đó. Ví dụ như dựa vào tiền tố (Prefix), hậu tố (suffix) hoặc một dạng mẫu (sub-string) nào đó.
(*) Tìm theo sub-string (bộ mẫu) – Substring (partern)
Ví dụ về 1 phần tử ‘div’ với một ‘id’ và chứa đoạn text là “partern”
- Với Xpath locator chúng ta sẽ cần sử dụng hàm contains() để kết hợp 1 sub-string:
//div[contains(@id,’pattern’)]
- Với CSS selector ta sẽ sử dụng “*=” để kết hợp 1 sub-string:
css=div[id*=’pattern’]
(*) Tìm theo tiền tố – prefix
Với ví dụ 1 phần tử ‘div’ với một ‘id’ và đoạn text bắt đầu với đoạn text “prefixString”:
- Theo Xpath locator ta cần sử dụng từ khóa “starts-with” để tìm prefix tương ứng:
//div[starts-with(@id,”prefixString”)]
- Theo CSS selector ta sẽ sử dụng “^=”:
Css=div[id^=’prefixSring’]
(*) Tìm theo hậu tố
Tương tự với ví dụ bên trên, tìm phần tử div có id và đoạn text kết thúc là “suffixString”:
- Theo Xpath locator, chúng ta sẽ sử dụng “ends-with” để tìm hậu tố tương ứng. Lưu ý một chút là method “ends-with()” là một chuẩn chỉ được sử dụng trong Xpath2.0, nó sẽ không chạy với Xpath1.0 (phân biệt hai phiên bản này các bạn tìm GG để rõ hơn nhé).
//div[ends-with(@id,”suffixString”)]
- Theo CSS selector, ta sẽ cần sử dụng “$=”:
css=div[id$=’suffixString’]
Ta có thể tóm tắt thành một bảng tổng hợp thu gọn như này nha:
| Match Substring | Match Prefix | Match Suffix | |
| Xpath | contains() | starts-with() | ends-with() |
| CSS | *= | ^= | $= |
Các bạn có thể vào trang này để biết thêm nhé.
Chúc các bạn thành công.
Nguồn:
https://topdev.vn/blog/mot-vai-trick-khi-su-dung-xpath-va-css-selector-trong-selenium/