search

Hướng dẫn find_element_by_css_selector

Ngày đăng: 02/10/2022
Trả lời: 0
Lượt xem: 186

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. 😀

Show

Nội dung bài viết

  • I. Vậy CSS selectors là gì?
  • II. Cách CSS xác định 1 element
    • 1. Xác định theo ID
    • 2. Xác định theo các attributes
    • 3. Xác định theo class names
    • 4. Xác định theo hierarchy
      • a. Ví dụ 1
      • b. Ví dụ 2
    • 5. Xác định theo ordering
    • 6. Kỹ thuật CSS Selector cho case khó
  • III. Làm thế nào để biết mình đã lấy đúng CSS selectors?

I. Vậy CSS selectors là 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:

  • By.ByClassName
  • By.ByCssSelector
  • By.ById
  • By.ByLinkText
  • By.ByName
  • By.ByPartialLinkText
  • By.ByTagName
  • By.ByXPath

Đọ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. Khi gọi các methods trên, thực chất đều chuyển thành CssSelector.

Nếu chỉ có 2 loại thì sao Selenium Webdriver lại cung cấp nhiều API thế kia? Cung cấp nhiều methods để giảm bớt sự phức tạp cho người sử dụng thôi, chứ không phải có các cách khác nhau để xác định Element.

II. Cách CSS 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

1. Xác định theo ID

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:

Để 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

2. 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ụ:

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) 



--> input[id^="email"]

$= (match với đoạn cuối)

Edit User

--> a[href$="/edit/"]

*= (match với vị trí bất kỳ)

Dashboard

--> 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/"]

3. 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ề.

Hướng dẫn find_element_by_css_selector

4. 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ó.

a. Ví dụ 1

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

b. Ví dụ 2

#supportForm .comments textarea

Trong selector này, mình muốn tìm 1