Một Vài “trick” Khi Sử Dụng Xpath Và CSS Selector Trong Selenium

Bài viết được sự cho phép của tác giả Vân Anh

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.

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

JavaScript Executor trong Selenium Webdriver Selenium là gì? Giới thiệu chi tiết về Selenium Automation Testing

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à  ‘panel’ sẽ được diễn tả như sau:

• Xpath: //div[@id=’panel’]
• Theo 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 là ‘panelClass’ sẽ được diễn tả như sau:

• Theo Xpath locator: //div[@class=’panelClass’]
• Theo 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é:

• Theo Xpath locator: //div[@class=’panelClass1 panelClass2′]
• Theo 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:

1. Coffee
2. Tea
3. Milk
4. Soup
5. 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ì:

1. first
2. second
3. third
4. fourth
5. fifth

• 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”:

• Trong Xpath: //li[@class=’blue’]/../li[2]
• Trong CSS selector: 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 lần lượt như sau:

• In Xpath locator: //li[@class=’blue’]/../li[3]
• In CSS selector: css=li.blue + li + li

9. Tìm phần tử theo Text tương ứng với Text 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 “text” bên trong một phần tử web. Ví dụ với một link có text là “Sign in”

• Theo Xpath locator: //a[contains(text(), ‘Sign in’)] hoặc a//[contains(string(), ‘Sign in’)]
• Theo CSS selector: css=a:contains(‘Sign in’)

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	*=	^=	$=

Dịch từ bài gốc tại vananhtooo.wordpress.com

Có thể bạn quan tâm:

• Tips and Tricks khi sử dụng For loop trong Go
• Viết 1 Test Case Đơn Giản Với Python Selenium WebDriver
• Selenium là gì? Một số kinh nghiệm làm việc với Selenium

Xem thêm tuyển dụng lập trình CSS hấp dẫn trên TopDev