search

Bộ chọn css thủ thuật css

Ngày đăng: 30/11/2022
Trả lời: 0
Lượt xem: 110
Khi bắt đầu tìm hiểu và tìm hiểu 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 phần tử 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, tên, lớp… 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à tên mà phang, sau đó là Xpath, còn CSS thì . 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. In sao lại như vậy??? . 😀

Nội dung bài viết

Show
  • I. Vậy bộ chọn CSS là gì?
  • II. Cách CSS xác định 1 phần tử
    • 1. Specify the ID
    • 2. Xác định theo các thuộc tính
    • 3. Xác định tên lớp
    • 4. Xác định theo hệ thống phân cấp
      • a. Ví dụ 1
      • b. Ví dụ 2
    • 5. Specify the order
    • 6. Kỹ thuật CSS Selector cho trường hợp khó
  • III. Làm thế nào để biết mình đã lấy đúng bộ chọn CSS?

I. Vậy bộ chọn CSS là gì?

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

Đây là phần tử xác định API do Selenium Webdriver cung cấp

  • Qua. Theo Tên Lớp
  • Qua. ByCssSelector
  • Qua. TheoId
  • Qua. TheoLinkText
  • Qua. Bằng tên
  • Qua. Bởi PartialLinkText
  • Qua. Theo tên thẻ
  • Qua. BởiXPath

Đọc định nghĩa về CSS Selector ở trên và xem danh sách API, thì thấy có vẻ như đúng là chỉ có 2 loại. CSS và XPath vì Id, class, name, Tag… là các thuộc tính của 1 Element. Khi gọi các phương thức trên, các chất đều được chuyển đến CssSelector

Nếu chỉ có 2 loại thì sao Selenium Webdriver lại cung cấp nhiều API thế kia?

II. Cách CSS xác định 1 phần tử

Mô tả các trường hợp dưới đây đều sử dụng trang web này. https. //letkodeit. có thể dạy được. com/p/thực hành

1. Specify the 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 “món nợ” này, thì có 2 cách và sẽ được nói ở phía dưới

  • 1 is matching Id theo kiểu ký tự đại diện
  • 2 là sử dụng cách xác định khác

2. Xác định theo các thuộc tính

Một thuộc tính về cơ bản là 1 tính chất của 1 phần tử. Và 1 phần tử thì có rất nhiều loại tính chất khác nhau. Ví dụ

Những thuộc tính này 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ỉ sử dụng 1 thuộc tính thì không thể xác định được vị trí của phần tử đó vì nó có nhiều phần tử được đánh dấu giống nhau. Ví dụ

Ta chỉ cần thêm thuộc tính thông tin là xong

________số 8

Nếu muốn rõ ràng hơn, ta có thể thêm thẻ của phần tử đó

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 ký tự đại diện, chẳng hạn như khớp với đoạn đầu, đoạn cuối và vị trí bất kỳ

^= (khớp với đoạn đầu)

0

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

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
0

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

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
1

Và ta cũng có thể nối những cái này với nhau

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
2

3. Xác định tên lớp

Hầu hết các phần tử đều có 1 lớp thuộc tính, trong đó có các giá trị lớp ngăn cách nhau bằng 1 khoảng trống, class=”class1 class2 class3″
Ví dụ. 

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
3

To match with element which using class, t use cú pháp

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
4

Tuy nhiên, dùng với class thì không an toàn, vì class thông thường để tạo kiểu cho 1 nhóm nhiều phần tử. Kiểm tra ví dụ trên, ta sẽ thấy có 5 kết quả trả về

Bộ chọn css thủ thuật css

4. Xác định theo hệ thống phân cấp

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 các thuộc tính không đủ để xác định, ta buộc phải sử dụng nó

a. Ví dụ 1

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
5

Cú pháp của nó sẽ là

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
6

Giả sử trong ví dụ trên, ta muốn lấy cái nhãn có chứa Justin, ta phải sử dụng 1 thuộc tính để xác định được thằng cha của nó rồi mới đi tới nó. Giữa 2 cha con có 1 khoảng trống

Bộ chọn CSS lúc đó sẽ là

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
7

b. Ví dụ 2

findElement(By.id("carselect")) = findElement(By.CssSelector("#carselect"))
8

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