[Bài 3] Xác định elements bằng CSS Selector trong Selenium Webdriver

Khi bắt đầu tìm hiểu và học về Selenium Webdriver, mình thấy rất nhiều sách chỉ ra các cách để xác định vị trí của các elements trên trang web, đọc muốn hoa mắt và cảm thấy rất mơ hồ. Ngày đó, mình thấy ai cũng dạy là tìm theo thứ tự id, name, class… cuối cùng là CSS và Xpath, nên những project demo của mình lúc nào thì cứ id và name mà phang, sau đó là Xpath, còn CSS thì không bao giờ đụng đến. Sau này, khi đọc nhiều hơn về Selenium Webdriver, mới thấy là trước đây mình chỉ hiểu cái bề mặt, thật ra chỉ có 2 loại chính là CSS Selector và Xpath Selector. Tại sao lại như vậy??? Đọc tiếp thì biết. 😀

I. Vậy CSS selectors là gì và dùng nó để làm gì?

1 CSS selector là 1 đoạn chuỗi String được thiết kế để xác định 1 hay nhiều elements trên 1 trang web bằng cách sử dụng các attributes và / hoặc dùng thứ tự cha – con của các elements trong DOM.

Đây là các API xác định element do Selenium Webdriver cung cấp:

Đọc định nghĩa về CSS Selector ở trên và xem list API, thì thấy có vẻ như là đúng là chỉ có 2 loại: CSS và XPath vì Id, class, name, Tag… là các attributes của 1 Element.

Nếu chỉ có 2 loại thì sao Selenium Webdriver lại cung cấp nhiều API thế kia? Lý do là để rút ngắn thời gian xác định element, giống như kiểu tạo shortcut ra Desktop để open cho nhanh hơn thôi. ( Đoạn này mình chém gió đấy, không đọc thấy tài liệu nào ghi vậy =)))) )

II. Những cách CSS cung cấp để xác định 1 element?

Mô tả các trường hợp dưới đây đều dùng trang web này: https://letskodeit.teachable.com/p/practice


Xác định theo IDs

Trong hầu hết các trường hợp, sử dụng ID (nếu có) là lựa chọn số 1.
Nó trông giống như vậy

Nếu dùng CSS Selector thì nó là:
#carselect
→ findElement(By.id(“carselect)) = findElement(By.CssSelector(“#carselect))

Tất nhiên là có 1 vài ngoại lệ…(đùa, cái gì cũng có ngoại lệ, học mệt ghê). Đó là khi Dev dùng 1 ID cho 2 elements khác nhau, do lỗi lập trình, chứ không phải là do cố ý. Hoặc là việc sử dụng ID động chứ ko phải ID tĩnh. ID động là dạng ID sẽ thay đổi sau mỗi lần load trang, nó có dạng:

Để xử lý cái “của nợ” này, thì có 2 cách và sẽ được nói ở phía dưới:

  • 1 là matching Id theo kiểu wild card
  • 2 là sử dụng cách xác định khác

Xác định theo các attributes

Một attribute về cơ bản là 1 tính chất của 1 element. Và 1 element thì có rất các loại tính chất khác nhau. Ví dụ:

Những attributes có thể được xác định bằng cách viết sau:
[name =’enter-name’]

→ findElement(By.name(“enter-name)) = findElement(By.CssSelector(“[name =’enter-name’]))

Tất nhiên là sẽ có những trường hợp mà nếu chỉ dùng 1 attribute thì không thể xác định được vị trí của element đó vì nó có nhiều element được đánh dấu giống nhau. Ví dụ:

<input type=”radio” name=”point” value=”1″>
<input type=”radio” name=”point” value=”2″>
<input type=”radio” name=”point” value=”3″>

Ta chỉ cần thêm thông tin attribute là xong:
[name=”point”][value=”2″]

Nếu muốn rõ ràng hơn, ta có thể cho thêm tag của element đó:
input[name=”point”][value=”2″]

Như đã nói ở trên, CSS Selector còn cung cấp 1 số tính năng của wild card, như matching với đoạn đầu, đoạn cuối và vị trí bất kỳ.

  • ^= (match với đoạn đầu)
    Ví dụ: <input id=”email-28742″ value=””>
    input[id^=email]
  • $= (match với đoạn cuối)
    Ví dụ: <a href=”/user/12345/edit/”>Edit User</a>
    a[href$=”/edit/”]
  • *= (match với vị trí bất kỳ)
    Ví dụ: <a href=”https://staging.company.com/dashboard/?session=3284792″>Dashboard</a>
    a[href*=”/dashboard/”]
  • Và ta cũng có thể kếp hợp những cái này với nhau:
    a[href^=”/user/”][href$=”/edit/”]

Xác định theo class names

Hầu hết các elements đều có 1 attribute class, trong đó có chứa các giá trị class ngăn cách nhau bằng 1 khoảng trống, class=”class1 class2 class3″
Ví dụ:

Để match với element mà sử dụng class thì t dùng cú pháp: .class1.class2

Tuy nhiên, dùng với class thì không an toàn, vì thông thường class để style cho 1 group nhiều element. Check thử ví dụ trên, ta sẽ thấy có 5 kết quả trả về.


Xác định theo hierarchy

Xác định theo Hierarchy là kiểu đi theo dạng thác nước, có vẻ giống với Xpath, đi từ trên xuống dưới, khá phức tạp. Nhưng đôi khi attributes không đủ để xác định, ta buộc phải dùng đến nó.

Ví dụ 1:
<div class=”name”>
   <label>Justin</label>
</div>
<div class=”email”>
   <label>test@email.com</label>
</div>

Cú pháp của nó sẽ là: element1 element2…
Giả sử trong ví dụ trên, ta muốn lấy cái label có chứa Justin, ta phải dùng 1 attribute để xác định được thằng element cha của nó rồi mới đi tới nó. Giữa 2 cha con có 1 khoảng trống.

CSS Selector lúc đó sẽ là:
.name label

Ví dụ 2:
#supportForm .comments textarea

Trong selector này, mình muốn tìm 1 <textarea>, nằm trong 1 element có class .comment mà nó lại là con của 1 element có id là supportForm.


Xác định theo ordering

Trong hầu hết các trường hợp liên quan đến list dữ liệu, ta đều phải xử lý bằng các xác định thứ tự của chúng trong list đấy.

Ví dụ:
<ul class=”fruits”>
   <li>Apple</li>
   <li>Orange</li>
   <li>Pear</li>
</ul>

Muốn trỏ tới vị trí nào, chúng ta chỉ cần add thêm: nth-of-type(order)
Ví dụ, ta muốn trỏ tới vị trí số 2 “Orange”, selector của chúng ta sẽ là:
.fruits li:nth-of-type(2)


UPDATE:

Kỹ thuật CSS Selector cho case khó

Đôi khi bạn thử những cách trên riêng rẽ, bạn sẽ thấy là nó sẽ matching nhiều hơn 1 node. Do đó, ta cần phải thêm điều kiện để nó chỉ matching đúng 1 note duy nhất. Hãy đọc bài này để biết cách xử lý.

III. Làm thế nào để biết mình đã lấy đúng CSS selectors?

Bật Chrome > Inspect

Sau đó trỏ chuột vào phần Element, bấm CTRL + F, nó sẽ xuất hiện như hình.

Bạn hãy thử các CSS Selector vào khung kia để kiểm tra kết quả. Have Fun!

Nếu có bất cứ thắc mắc gì, hãy để lại comment nhé.

Bài viết có lấy tư liệu từ bài https://ghostinspector.com/blog/css-selector-strategies-automated-browser-testing/

[Bài 4] Những method của interface WebDriver

16 thoughts on “[Bài 3] Xác định elements bằng CSS Selector trong Selenium Webdriver

  1. Bài viết rất hay, Cảm ơn bạn rất nhiều, bổ sung cho mình rất nhiều kiến thức, mong rằng bạn sẽ cập nhật nhiều bài viết nữa nha, mình sẽ luôn theo dõi, Chúc bạn thật nhiều sức khoẻ, thành công.

    • Thank bạn nhiều. Cảm ơn vì đã luôn ủng hộ mình và hi vọng những cái mình viết giúp ích phần nào đó cho bạn. ^^

  2. Pingback: [Bài 2] Cài đặt môi trường cần thiết cho Selenium Webdriver | GiangTester Blog

  3. Em đã đọc các bài viết trên blog của anh, rất hay và bổ ích ạ. Hi vọng anh cập nhật thêm nhiều bài học về chủ đề này, luôn dõi theo blog của anh ^^

  4. Tôi tìm 1 element trong web bằng CSS, ví du như .prev và tui xài FirePath để kiểm tra mình lấy CSS đúng ko.
    Kết quả ra 5 matching nodes, làm sao tôi có thể lấy chính xác cái CSS tôi mong muốn?

  5. Pingback: [Bài 11] WebDriver script đơn giản thứ hai | GiangTester Blog

  6. Pingback: [Bài 19] Webdriver script đơn giản thứ ba | GiangTester Blog

  7. Pingback: [Bài 21] Cách sử dụng CSS Selector cho những case khó | GiangTester Blog

Leave a Reply

Your email address will not be published. Required fields are marked *