- vừa được xem lúc

Locators là gì? Cách lấy Locators

0 0 7

Người đăng: Thu Phạm

Theo Viblo Asia

Locators 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 Locators

Trong bài viết này sẽ hướng dẫn các cách lấy Locators theo:

  1. ID
  2. Name
  3. Linktext
  4. Partial Link Text
  5. Class Name
  6. CSS Selector
  7. Tag và ID
  8. Tag và Class
  9. Tag and Attribute
  10. Tag, class và attribute
  11. Locating Elements via Matches

Hãy cùng nghiên cứu chúng một cách chi tiết nhé:

1. ID

Cách lấy Locator sử dụng Id dường như là cách làm đơn giản và thuận tiện nhất. Mỗi phần tử trên trang web thường có 1 ID duy nhất. image.png Sau khi lấy đượ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ó một số Framework hỗ trợ dev sinh ra Id tự động. 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 thể dùng thuộc tính ID để xác định Locator được nữa. Chỉ dùng khi ID của element cố định.

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 image.png 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

Link text thì hiển thị khá rõ ràng vì nó hiển thị ngay trên UI image.png Câu lệnh sau để khai báo cho element này:

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

Lưu ý: Nhưng cách này không nên áp dụng nếu link text thường xuyên thay đổi và nội dung link text trong 1 trang có nhiều text giống nhau.

4. Partial Link Text

Xác định Partial Link text giống như linktext. Nhưng đôi khi có những link text dài hoặc bạn muốn xác định nhiều link text có chung 1 phần text nào đó Ví dụ:

<a href="https://accounts.viblo.com/register" target="_blank">START TESTING <i class="fa fa-arrow-circle-right" aria-hidden="true"> </i>
</a>

Câu lệnh để khai báo cho element này:

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

5. Class Name

Cách lấy Locator sử dụng class

<input type="email" name="email" value="" placeholder="Email" class="form-control mt-3 form-control-lg">

Câu lệnh để khai báo cho element này:

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

Lưu ý: Có những element không có ID, class hoặc Name... cụ thể, thì chúng ta phải dùng tới CSS Selector hoặc Xpath. Các thủ tục để tạo CSS Selector và Xpath là tương tự như nhau, nó chỉ khác nhau về giao thức xây dựng.

6. CSS Selector

Selector được sử dụng để truy vấn đến các thẻ HTML nhằm tác động lên chúng. Tuy nhiên trong cùng 1 file HTML có rất nhiều các thẻ giống nhau và thường chúng sẽ được phân biệt với nhau bởi ID, Class,Tag... Cách thức sử dụng ID và Class để truy xuất được gọi là Selector.

driver.findElement(By.cssSelector("css");

Câu lệnh để khai báo element:

7. Tag và ID

Để xác định vị trí phần tử thông qua Tag và ID Có 3 thành phần: css = (thẻ Html) (#) (value of the ID attribute) Trong đó #: Được sử dụng thể hiện là thuộc tính ID. Chỉ sử dụng với thuộc tính ID, các thuộc tính khác thì không cần sử dụng Ví dụ:

<div class="inputM make_relative"> <input id="ch_login_email" type="text" required=""> <span class="inputM__highlight"></span> <span class="inputM__bar"></span> <label>Email/Mobile number</label> <div class="ch-error-msg ch-clearfix" id="ch_login_email_error" style="display:none"> <p class="o-i-error-icon"></p> <span class="ch-flL"> <span class="o-i-error-symbol"> </span> </span> <span class="ch-flL ch-error-innertxt"> </span> </div> </div>

Với css = input#ch_login_email, câu lệnh để khai báo cho element này:

driver.findElement(By.cssSelector("input# ch_login_email"))

8. Tag và Class

Syntax: css = (HTML tag)(.)(value of the Class attribute) Ví dụ:

<input type="email" name="email" value="" placeholder="Email" class="form-control mt-3 form-control-lg">

Với css = input.form-control mt-3 form-control-lg, câu lệnh để khai báo cho element này:

driver.findElement(By.cssSelector("input.form-control mt-3 form-control-lg"))

9. Tag and Attribute

Syntax: css=(HTMLTag)[Attribute=Value] Với css = input[name='phone'], câu lệnh để khai báo cho element này:

driver.findElement(By.cssSelector("input[name='phone']"))

10. Tag, class và attribute

Syntax: css=(HTML tag>)(. )(Class attribute value)([attribute=Value of attribute]) Ví dụ:

<button type="submit" class=" btn sign-up-btn-2 btn-block">Signup</button>

Với css = button. btn sign-up-btn-2 btn-block [type = submit], câu lệnh để khai báo cho element này:

driver.findElement(By.cssSelector("button. btn sign-up-btn-2 btn-block [type = submit]"))

11. Locating Elements via Matches

Selenium CSS selector trợ giúp việc xác định các element chứa các chuỗi thông qua việc sử dụng các ký tự %,$,*. Dưới đây là một vài ví dụ.

Ví dụ với đoạn HTML sau:

<input type="email" name="email address" value="" placeholder="Email" required="required" autofocus="autofocus" class="form-control mt-3 form-control-lg">

Sau khi xác định được CSS Selector. Chúng ta có thể dùng câu lệnh sau để khai báo element:

  • Starts-With Syntax: css =(HTML tag)([attribute^=start of the string])

Ví dụ: css = input[name^='email']

  • Ends-With Syntax: css =(HTML tag)([attribute$=end of the string])

Ví dụ: css = input[name$='address']

  • Contains Syntax: css=(HTML tag)([attribute*=partial string])

Ví dụ: css = input[class*='control’]

  • Child Elements Synctax: css = tagname.class name li:nth-of-child(index of the referenced child which in our case is 3) Ví dụ:
<ul class="overview-list"> <li class="automation"> <span>Automation Test</span> </li> <li class="realtime"> <span>Realtime Test</span> </li><li class="screenshot"> <span>Screenshot Test</span></li> <li class="responsive"> <span>Responsive Test</span> </li>
</ul>

Câu lệnh để khai báo cho element này: css = ul. overview-list li:nth-of-child(3)

Muốn xác định element nhưng ở vị trí cuối cùng sử dụng câu lệnh sau: css = ul. overview-list li:last-child

Bình luận