[Selenium Java] Bài 5: Cách xác định Locators của Element trên website | Anh Tester

Bài này mình xác lập Locators của element trên website, phần rất quan trọng trước khi bước vào khám phá những câu lệnh trong Selenium .

Định vị các phần tử trong Selenium WebDriver được thực hiện với sự trợ giúp của các phương thức findElement() và findElements() được cung cấp bởi lớp WebDriver và WebElement.

• findElement(): trả về một đối tượng WebElement
• findElements(): trả về một danh sách các đối tượng thuộc WebElement

Bảng sau liệt kê tất cả cú pháp Java để định vị các phần tử trong Selenium WebDriver.

Phương thức	Cú pháp	Mô tả
Theo ID	driver.findElement(By.id ())	Định vị một phần tử bằng thuộc tính ID
Theo name	driver.findElement(By.name ())	Định vị một phần tử bằng cách sử dụng thuộc tính Name
Theo class name	driver.findElement(By.className ())	Định vị một phần tử bằng thuộc tính Class
Theo tag name	driver.findElement(By.tagName ())	Định vị một phần tử bằng cách sử dụng thẻ HTML
Bằng văn bản liên kết	driver.findElement(By.linkText ())	Tìm liên kết bằng văn bản liên kết
Bằng văn bản liên kết một phần	driver.findElement(By.partialLinkText ())	Định vị liên kết bằng văn bản một phần của liên kết
Theo CSS	driver.findElement(By.cssSelector ())	Định vị một phần tử bằng cách sử dụng bộ chọn CSS
Theo XPath	driver.findElement(By.xpath ())	Định vị một phần tử bằng cách sử dụng truy vấn XPath

 

Vậy Locator là gì?

Nếu như Manual Testing chúng ta có thể tự biết được nhập dữ liệu vào đâu, click vào button, checkbox nào, nhận biết được item trước và sau thay đổi như thế nào,…. Nhưng đối với automation thì làm sao máy có thể hiểu được sẽ thao tác vào link, button, check box…. nào đây? Đấy chính là lúc cần đến Locator, mỗi phần tử HTML trong trang web đều được xác định bằng Locator. Locator giúp phân biệt được các đối tượng UI trên phần mềm mà chúng ta cần kiểm tra.

Các cách để lấy Locator

1. Id

Cách lấy Locator sử dụng Id có vẻ như là cách làm đơn thuần và thuận tiện nhất. Mỗi thành phần trên website thường có 1 ID duy nhất. Nhưng không phải developer nào cũng sẽ đặt ID cho mỗi thành phần. Vì việc này sẽ mất thời hạn và cũng không thật sự thiết yếu cho hầu hết những thành phần trên website .

Sau khi get được id. Chúng ta dùng câu lệnh sau để khai báo element này

WebElement username = driver.findElement(By.id("login-username"));

Lưu ý : Hiện có 1 số ít Framework tương hỗ dev sinh ra Id tự động hóa. Vậy nên mỗi lần chạy sẽ cho ra từng ID khác nhau. Lúc này sẽ không hề dùng thuộc tính ID để xác lập Locator được nữa .

2. Name

Thuộc tính Name cũng gần giống với Id. Mỗi phần tử trên trang web thường sẽ được gắn cho 1 cái tên duy nhất. Tương tự ID thì Name này cũng không bắt buộc nên không phải lúc nào chúng ta cũng có thể sử dụng Name

Sau khi get được name. Chúng ta dùng câu lệnh sau để khai báo element này

WebElement password = driver.findElement(By.name("password"));

3. LinkText (Bộ định vị văn bản liên kết)

Link text thì hiển thị khá rõ ràng vì nó hiển thị ngay trên UI

Sau khi get được linktext. Chúng ta dùng câu lệnh sau để khai báo cho element này

WebElement askViblo = driver.findElement(By.linkText("Ask on Viblo »"));

Nhưng cách này k nên vận dụng nếu link text liên tục đổi khác và nội dung link text trong 1 trang có nhiều text giống nhau

4. PartialLinkText (Bộ định vị văn bản liên kết một phần)

Định vị thành phần trải qua Văn bản link một phần hoạt động giải trí tương tự như như trình xác định Văn bản link thông thường. Lý do của việc sử dụng bộ xác định Văn bản link một phần trong Selenium WebDriver trên Bộ xác định văn bản link chỉ vì nguyên do khi bạn có một văn bản link dài và bạn có dự tính chỉ sử dụng một phần văn bản để triển khai những hành vi tiếp theo trên nó. Đôi khi mục tiêu của việc sử dụng này cũng hoàn toàn có thể là để xác lập vị trí nhiều link trên một trang với một phần văn bản chung .

Dưới đây là ảnh chụp nhanh làm nổi bật phần tử có tên liên kết là ‘bắt đầu thử nghiệm’, ở đây chúng ta đang định vị liên kết với một phần văn bản là ‘Start Tesing ‘.

Dưới đây là cấu trúc DOM của nó :

START TESTING 

Cú pháp để định vị thông qua văn bản liên kết một phần là:

driver.findElement(By.partialLinkText("Testing"));

5. TagName (Bộ định vị tên thẻ HTML)

Như tên chỉ định, công cụ xác định css này trong Selenium WebDriver được sử dụng để xác lập những thành phần có tên Thẻ như thẻ div, thẻ, v.v. Một ví dụ thông dụng về cách sử dụng này hoàn toàn có thể là định vị tất cả những link trên trang chủ của bạn và xác định xem chúng có hoạt động giải trí hay không .
Cú pháp dưới đây để định vị tất cả những link trên trang chủ Lambdatest :

driver.findElements(By.tagName(a));

Cách này ít dùng, vì không đúng mực .

6. ClassName (Bộ định vị tên lớp trong HTML)

Bộ xác định Tên lớp giúp xác định thành phần được xác lập trải qua thuộc tính lớp. Dưới đây là một ví dụ về ảnh chụp nhanh DOM đăng nhập Lambdatest nơi trường đăng nhập được đặt trải qua tên lớp .

Dưới đây là cấu trúc DOM :

Cú pháp định vị phần tử thông qua tên lớp:

driver.findElement(By.className("form-control mt-3 form-control-lg"));

Cách này ít dùng vì không đúng mực, dễ trùng, bởi nhiều thành phần chung class .

7. CSS Selector

Dựa vào đường dẫn CSS hoặc tích hợp nhiều CSS với nhau. Chúng ta hoàn toàn có thể xác lập được duy nhất hoặc nhiều thành phần element

Ví dụ sau về việc kết hợp giữa thuộc tính Type và Placehoder để xác định element

Ví dụ sau khi xác lập được CSS Selector. Chúng ta dùng câu lệnh sau để khai báo element :

WebElement password = driver.findElement(By.cssSelector("[type='password'][placeholder='Your Password']"));

Các loại CSS Selector

1. Tag and ID
2. Tag and Class
3. Tag and Attribute
4. Tag, Class, and Attribute
5. Sub-String Matches
   • Starts With (^)
   • Ends With ($)
   • Contains (*)
6. Child Elements
   • Direct Child
   • Sub-child
   • nth-child

Cách dùng CSS Selector

1. CSS tag và ID 
   css=tag#id

• tag: tên thẻ
• id: id được đặt cho thẻ 

 

Chương trình tương ứng:Chương trình tương ứng :

driver.findElement(By.cssSelector("input#email"));

2. Tag and Class
   css=tag.class

• tag: tên thẻ
• class: class được đặt cho thẻ 

 

Chương trình tương ứng:Chương trình tương ứng :

driver.findElement(By.cssSelector("input.input-text form-control required-entry validate-email-phoneprefix"));

3. Tag and Attribute
   css=tag[attribute=value]

• tag: tên thẻ
• attribute: thuộc tính
• value: giá trị của thuộc tính 

Chương trình tương ứng:

driver.findElement(By.cssSelector("input[name=login[username]]"));

4. Tag, Class, and Attribute 
   css=tag.class[attribute=value]

• tag: tên thẻ
• class: class được đặt cho thẻ
• attribute: thuộc tính
• value: giá trị của thuộc tính  Chương trình tương ứng

driver.findElement(By.cssSelector("input.input-text form-control required-entry validate-email-phoneprefix[name=login[username]]"));

5. Sub-String Matches

   5.1 Starts With (^)
   css=tag[attribute^=ký tự đầu của chuỗi]

• tag: tên thẻ
• attribute: thuộc tính
• ^=: bắt đầu với giá trị nào đó 

Chương trình tương ứng:

driver.findElement(By.cssSelector("input[id^='ema']"));

5.2 Ends With ($)

css=tag[attribute$=ký tự kết thúc của chuỗi]

• tag: tên thẻ
• attribute: thuộc tính
• $=: kết thúc với giá trị nào đó 

 

Chương trình tương ứng:

driver.findElement(By.cssSelector("input[id$='ail']"));

5.3 Contains (*)

css=tag[attribute*='ký tự bất kỳ của chuỗi']

• tag: tên thẻ
• attribute: thuộc tính
• *=: chứa ký tự nào đó 

 

Chương trình tương ứng:

driver.findElement(By.cssSelector("input[id*='ai']"));

6. Child Elements

   6.1 Direct Child

Chương trình tương ứng :

Cú pháp:

parentLocator > childLocator

• parentLocator: định vị của thẻ cha
• childLocator: định vị của thẻ con ngay dưới 1 bậc 

 

Chương trình tương ứng:Chương trình tương ứng :

driver.findElement(By.cssSelector("div.input-box>input"));

6.2 Sub-child

Cú pháp:

parentLocator childLocator

• parentLocator: định vị của thẻ cha
• childLocator: định vị của thẻ con ngay dưới 1 bậc hoặc thẻ con của con 

 
Chương trình tương ứng:

driver.findElement(By.cssSelector("ul.form-list div"));

Chương trình tương ứng :

6.3 nth-child

Cú pháp:

parentLocator child:nth-of-type(?)

• parentLocator: định vị của thẻ cha
• child: thẻ con

• ?

  là số thứ tự của thẻ con(khi so các thẻ con cùng cha với nhau) 

   

Chương trình tương ứng:

driver.findElement(By.cssSelector("ul.form-list li:nth-of-type(2)"));
//lấy thẻ con "li" có số thứ tự là 2

Chương trình tương ứng :

Cú pháp:

parentLocator child:last:child

 là để lấy thẻ con cuối cùng (khi so với các thẻ con cùng cha với nhau).

Cách lấy CSS Selector đơn giản

Bạn click chuột phải tại đối tượng mà bạn muốn định vị, chọn Inspect

 

Sau đó click chuột phải tại vùng khoanh màu( chính là đối tượng mà bạn muốn định vị) rồi chọn Copy, sau đó chọn Copy Selector 

 

Dán vào đoạn code của bạn là xong.

driver.findElement(By.cssSelector("#email"));

8. Xpath

Trong Selenium nếu không hề tìm kiếm những elements bởi những xác định như id, class, name … thì trọn vẹn hoàn toàn có thể nghĩ tới xpath để tìm những elements đó trên web, xpath cũng là phương pháp được phần đông người dùng sử dụng để tìm kiếm những thành phần trên website .

8.1. Xpath là gì

• Xpath được định nghĩa như một XML path. Nó là cú pháp hay ngôn ngữ để tìm kiếm bất kỳ element nào trên trang web sử dụng XML path expression. Cú pháp cơ bản của Xpath như hình dưới đây: 

Cú pháp trong Java :

driver.findElement(By.xpath("chuỗi xpath của element"));​

8.2. Các loại Xpath

Có 2 loại Xpath : Xpath tuyệt đối và Xpath tương đối .

+ Xpath tuyệt đối

• Xpath tuyệt đối bắt đầu bằng dấu gạch chéo đơn “/“, cho phép xác định một đường dẫn tuyệt đối đến đối tượng UI
• Ví dụ:

  html/body/div[1]/div[2]/form/div/div[3]/div[1]/div/div[2]/div[1]/div[1]/div/div/input ​

Xpath tuyệt đối được xem là là cách tìm kiếm thành phần thuận tiện nhất, tuy nhiên điểm yếu kém của nó là nếu có bất kể biến hóa nào trên đường dẫn của element thì Xpath lấy sẽ sai .

+ Xpath tương đối

• Xpath tương đói bắt đầu bằng 2 dấu gạch chéo “/ /“, cho phép xác định một đối tượng UI ở bất kỳ đâu trên trang web, không cần bắt đầu bởi thẻ html trong đường dẫn.
• Ví dụ: 

  //div//input

  : cho phép lấy ra toàn bộ thẻ input mà trước đó là một thẻ div.

8.3. Hiểu đúng về Xpath

Các bạn xem bài Blog này để hiểu rõ hơn về Xpath nhé:

=> Xpath là gì? Hiểu đúng về Xpath | Anh Tester

Một số cách xác định phần tử bằng Xpath

1. Xác định bằng thuộc tính “@”

Thuộc tính ” @ ” được cho phép lọc những đối tượng người tiêu dùng trải qua một thuộc tính của nó bên trong thẻ html .
Ví dụ :

//div//input[@id='123']

Cho phép lấy ra tổng thể những thẻ input dưới thẻ div mà có thuộc tính id là 123

//div[@class='abcd']

Cho phép lấy ra tổng thể những thẻ div mà có thuộc tính class là abcd .

//a[@href='https://final-blade.com/']

Lấy ra những thẻ a mà có chứa đường dẫn https://final-blade.com/

2. Xác định bằng thuộc tính text ( )

      text() cho phép lọc các đối tượng UI được trả về dựa trên nội dung text bên trong một thẻ html.

Ví dụ:

//div//p[@text()='AnhTester']​

Cho phép lấy tất cả các thẻ p trong mã nguồn có text là AnhTester.

3. Xác định bằng cách sử dụng toán tử OR và AND

cho phép lọc những đối tượng người dùng UI được trả về dựa trên nội dung text bên trong một thẻ html. Ví dụ : Cho phép lấy toàn bộ những thẻtrong mã nguồn cólà AnhTester .Toán tử OR và AND dùng 2 điều kiện kèm theo để cho hiệu quả tìm quả. Với OR tìm element khi một trong hai điều kiện kèm theo là đúng, còn AND tìm element với 2 điều kiện kèm theo đều đúng .
Ví dụ :

//*[@type='submit' OR @name='btnReset']

Cho phép lấy ra toàn bộ những thẻ mà có thuộc tính type là submit hoặc có thuộc tính name là btnReset .

//input[@type='submit' AND @name='btnLogin']

Cho phép lấy ra tổng thể những thẻ input mà có type là submit và name là btnLogin .

4. Xác định thông qua preceding và following

Preceding và Following được cho phép lọc những đối tượng người tiêu dùng UI từ một đối tượng người dùng xác lập trước đó

Ví dụ:

//div[@id='123']/following::p

Cho phép lấy ra tổng thể những thẻ p trong mã nguồn bên dưới một thẻ div có id là ‘ 123 ’ .

//div[@name='abc']/preceding::input

Cho phép lấy ra tổng thể những thẻ input trong mã nguồn bên trên là một thẻ div có name là ‘ abc ’ .

Các cách tìm kiếm và định vị các phần tử UI trong selenium với Xpath ở trên sẽ giúp việc tìm kiếm được chính xác và hiệu quả hơn, lựa chọn cách tìm kiếm phù hợp với từng tình huống.

Có cách lấy xpath đơn giản nhanh là Inspect của Chrome

Gợi ý: bạn nên sử dụng tool như bạn nên sử dụng tool như ChroPath hoặc SelectorsHub để tương hỗ việc get được locator một cách nhanh và hiệu suất cao nhất .

 

Source: https://final-blade.com
Category : Kiến thức Internet