NỘI DUNG BÀI HỌC

Cách xác định Element trên website bằng thuộc tính (id, name, classname, linktext,...), Css Selector và Xpath trong Katalon Studio.

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.

Chúng ta sử dụng 3 Extension trên Chrome: POM Builder , TruePathSelectorsHub để hỗ trợ việc lấy locator một cách nhanh và hiệu quả nhất.


Link Website Demo: https://demoauto.xyz/

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


A. Xpath


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


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: [Katalon Studio] Bài 2: Cách xác định Locators của Element trên website | Anh Tester

Ví dụ: //button[@type='submit']

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


2. Các loại Xpath

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

+ Xpath tuyệt đối

  • Đó là một cách trực tiếp để xác định vị trí của một phần tử.
  • Nó rất dễ sai vì sự thay đổi cấu trúc.
  • 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[1]/body[1]/div[1]/div[1]/div[2]/form[1]/div[1]/input[1]

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

Xpath tuyệt đối được xem là là cách tìm kiếm phần tử dễ dàng nhất, tuy nhiên nhược điểm của nó là nếu có bất kỳ thay đổi 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

[Katalon Studio] Bài 2: Cách xác định Locators của Element trên website | 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 "@" cho phép lọc các đối tượng thông qua một thuộc tính của nó bên trong thẻ html.

Thẻ - Thuộc tính - Giá trị

Cú pháp: //tagname[@attribute = 'value']


Ví dụ:

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

 Cho phép lấy ra tất cả các thẻ input dưới thẻ div mà có thuộc tính idemail

//div[@class='form-control']

 Cho phép lấy ra tất cả các thẻ div mà có thuộc tính classform-control

//a[@href='https://anhtester.com/']

Lấy ra các thẻ a mà có chứa đường dẫn (href) là https://anhtester.com/


2. Xác định bằng chuỗi text()

Cú pháp: // thẻ [( text() = ' giá trị ')]

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ụ:
//span[text()='Total clients']

Cho phép lấy tất cả các thẻ span trong mã nguồn có text là 'Total clients'

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


3. Xác định với hàm chứa contains()

Khi thuộc tính của một phần tử là động, thì bạn có thể sử dụng hàm chứa () cho phần không đổi của phần tử web nhưng bạn cũng có thể sử dụng hàm chứa () trong bất kỳ điều kiện nào khi cần.


Cú pháp: // thẻ [ contains ( @attribute , ' giá trị ')]

Ví dụ: //span[contains(@class,'clickable')]

Nó tìm kiếm tất cả các thẻ span có thuộc tính class chứa từ "clickable" trong DOM.

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


//*[contains(@name,'login')] --> Nó tìm kiếm "login" cho tất cả các thuộc tính tên trong DOM.

//*[contains(text(),'Product')] --> Nó tìm kiếm văn bản "Product" trong DOM.

//*[contains(@href,'anhtester.com')] --> Nó tìm kiếm liên kết "anhtester.com" trong DOM.

 

4. Xác định với phương thức Bắt đầu start-with

Phương pháp này kiểm tra văn bản bắt đầu của một thuộc tính. Nó rất tiện dụng để sử dụng khi giá trị thuộc tính thay đổi động nhưng bạn cũng có thể sử dụng phương pháp này cho các giá trị thuộc tính không thay đổi.


Cú pháp:
 // thẻ [ start-with ( @attribute , ' giá trị ')]


Ví dụ:
//div[starts-with(@class,'widget')]

Tìm tất cả các thẻ Divclass name bắt đầu bằng từ "widget"

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


5. Xác định bằng cách sử dụng toán tử or và and

Toán tử orand dùng 2 điều kiện để cho kết quả tìm quả. Với or tìm element khi một trong hai điều kiện là đúng, còn and tìm element với 2 điều kiện đều đúng.


+ Toán tử or

Giá trị 1 Giá trị 2 Kết quả
Sai Sai Không có phần tử
Đúng Sai Trả về A
Sai Đúng Trả về B
Đúng Đúng Trả lại cả hai

“or” phân biệt chữ hoa chữ thường , bạn không nên viết hoa “OR”.


Ví dụ:

//*[@class='form-control' or @id='user-message']

Cho phép lấy ra tất cả các thẻ mà có thuộc tính class là form-control hoặc có thuộc tính id là user-message

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

 

+ Toán tử and

Giá trị 1 Giá trị 2 Kết quả
Sai Sai Không có phần tử
Đúng Sai Không có phần tử
Sai Đúng Không có phần tử
Đúng Đúng Trả lại cả hai

“and” phân biệt chữ hoa chữ thường , bạn không nên dùng chữ “AND” viết hoa.


Ví dụ:

//input[@id='user-message' and @class='form-control']

Cho phép lấy ra tất cả các thẻ input mà có id là user-message và class là form-control

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

 

6. Xác định với Tổ tiên Ancestor

Nó tìm phần tử trước câu lệnh tổ tiên ancestor và đặt nó làm nút dưới cùng và sau đó bắt đầu tìm các phần tử cha và tổ tiên (ông nội, cố, cốc...) nút đó . Trong ví dụ dưới đây:

Ví dụ : //div[@id='page-content']/ancestor::div

1 - Đầu tiên, nó tìm phần tử có XPath là  //div[@id='page-content']

2 - Sau đó, lọc tìm kiếm đó với điều kiện là phải có cha hoặc tổ tiên (ông nội, ông cố,...) là thẻ Div bao bộc bên ngoài

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

 

7. Xác định với Con cháu Descendant

Thằng này thì ngược với Ancestor. Nó tìm phần tử trước câu lệnh con cháu descendant và đặt nó làm nút trên cùng và sau đó bắt đầu tìm các phần tử con và cháu trong bên trong nóTrong ví dụ dưới đây:

Ví dụ : //div[@id='page-content']/descendant::div

1 - Đầu tiên, nó tìm phần tử có XPath là  //div[@id='page-content']

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


2 - Sau đó, lọc tìm kiếm đó với điều kiện là phải có con hoặc cháu là thẻ Div nằm bên trong

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


8. Xác định thông qua preceding following

Preceding và Following cho phép lọc các đối tượng UI từ một đối tượng xác định trước đó


+ Following

Bắt đầu xác định vị trí các phần tử nằm dưới nút cha đã cho. Nó tìm phần tử trước câu lệnh following và đặt nó làm nút trên cùng và sau đó bắt đầu tìm tất cả các phần tử dưới nút đó. Xem trong ví dụ dưới đây:


Ví dụ:

//div[@id='ajaxModal']/following::button

Cho phép lấy ra tất cả các thẻ button nằm bên dưới một thẻ div trên cùng có id là ‘ajaxModal

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

 

+ Preceding

Bắt đầu xác định vị trí các phần tử nằm trên nút cha đã cho. Nó tìm phần tử trước câu lệnh preceding và đặt nó làm nút dưới cùng và sau đó bắt đầu tìm tất cả các phần tử trên nút đó. Xem trong ví dụ dưới đây:


Ví dụ:

//div[@id='confirmationModalContent']/preceding::h4

Cho phép lấy ra tất cả các thẻ h4 nằm trên một thẻ div dưới cùngid là ‘confirmationModalContent


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

 

Kinh nghiệm làm thì thấy 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.

9. Xác định Anh chị em bên dưới với following-sibling

Trục following-sibling (anh chị em bên dưới) chỉ ra tất cả các nút là anh chị em (ngang hàng) có cùng cha như nút ngữ cảnh và xuất hiện sau nút ngữ cảnh trong DOM.

Ví dụ: //ul[@id='sidebar-menu']//following-sibling::li

Nó lấy //ul[@id='sidebar-menu'] làm nút ngữ cảnh. Sau đó tìm các thẻ li bên dưới nó và điều kiện là các nút anh chị em (cùng cấp) thì nó lấy ra hết






Một ví dụ khác:  //div[@id='page-content']//following-sibling::div[contains(@class,'col-md-3')]

 

10. Xác định thông qua parent child


+ parent

Tìm kiếm các element là cha của nút được định nghĩa trước từ khóa parent như được hiển thị trong ví dụ dưới đây:


Ví dụ:
//div[@id='expense-dropzone']/parent::form

Nó tìm các thẻ form với vai trò là cha của //div[@id='expense-dropzone']

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

 

+ child

Tìm kiếm các element là con của nút được định nghĩa trước từ khóa child như được hiển thị trong ví dụ dưới đây:


Ví dụ:
//div[@id='expense-dropzone']/child::div

Nó tìm các thẻ div với vai trò là con của //div[@id='expense-dropzone']


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

 

Còn cách lấy xpath đơn giản nhanh với Inspect của Chrome

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

 

 

B. CSS Selector

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

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

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

Ví dụ sau khi xác định đượ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ẻ 

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

Chương trình tương ứng:
driver.findElement(By.cssSelector("input#email"));
  1. Tag and Class
    css=tag.class

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

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

Chương trình tương ứng:
driver.findElement(By.cssSelector("input.input-text form-control required-entry validate-email-phoneprefix"));
  1. 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 

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


Chương trình tương ứng:
driver.findElement(By.cssSelector("input[name=login[username]]"));
  1. 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
[Katalon Studio] Bài 2: Cách xác định Locators của Element trên website | Anh Tester

driver.findElement(By.cssSelector("input.input-text form-control required-entry validate-email-phoneprefix[name=login[username]]"));
  1. 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 đó 

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

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 đó 


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


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 đó 

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

Chương trình tương ứng:
driver.findElement(By.cssSelector("input[id*='ai']"));
  1. Child Elements

    6.1 Direct 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 

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

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 

[Katalon Studio] Bài 2: Cách xác định Locators của Element trên website | Anh Tester 
Chương trình tương ứng:
driver.findElement(By.cssSelector("ul.form-list div"));

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) 

    [Katalon Studio] Bài 2: Cách xác định Locators của Element trên website | Anh Tester 
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

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

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

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 

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


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

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

Teacher

Teacher

Anh Tester

Software Tester

Đường dẫu khó chân vẫn cần bước đi
Đời dẫu khổ tâm vẫn cần nghĩ thấu

Cộng đồng Automation Testing Việt Nam:


🌱 Zalo
Automation Testing:   https://zalo.me/g/lsxswc560
🌱 Facebook Group: Cộng đồng Automation Testing Việt Nam (Website, Desktop, Mobile)
🌱 Facebook Fanpage: Cộng đồng Automation Testing Việt Nam - Selenium

Chia sẻ khóa học lên trang

Bạn có thể đăng khóa học của chính bạn lên trang Anh Tester để kiếm tiền

Danh sách bài học