programming css

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

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

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 .

If used CSS Selector, it is. ______12

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 ghê gớm]. Đó là khi Dev dùng 1 ID cho 2 phần tử khác nhau, làm lỗi lập trình, chứ không phải là cố ý. Hoặc là việc sử dụng ID động chứ không phải ID tĩnh. ID động là định dạng ID sẽ thay đổi sau mỗi lần tải trang, nó có định dạng

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

$= [khớp với đoạn cuối]

findElement[By.id["carselect"]] = findElement[By.CssSelector["#carselect"]]

*= [khớp với bất kỳ vị trí]

findElement[By.id["carselect"]] = findElement[By.CssSelector["#carselect"]]

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

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

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

findElement[By.id["carselect"]] = findElement[By.CssSelector["#carselect"]]

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ề

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

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

findElement[By.id["carselect"]] = findElement[By.CssSelector["#carselect"]]

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

b. Ví dụ 2

findElement[By.id["carselect"]] = findElement[By.CssSelector["#carselect"]]

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

5. Specify the order

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

Ví dụ

findElement[By.id["carselect"]] = findElement[By.CssSelector["#carselect"]]

Muốn trỏ tới vị trí nào, chúng ta chỉ cần thêm

Ví dụ, ta muốn trỏ tới vị trí số 2 “Orange”, bộ chọn của chúng ta sẽ là

6. Kỹ thuật CSS Selector cho trường hợp khó

Đôi khi bạn thử những cách trên riêng rẽ, bạn sẽ thấy nó sẽ khớp với nhiều hơn 1 nút. Do đó, ta cần phải thêm điều kiện để nó chỉ khớp đúng 1 nốt 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 bộ chọn CSS?

Bật Chrome > Kiểm tra

Sau đó trỏ chuột vào phần tử, nhấn CTRL + F, nó sẽ xuất hiện dưới dạng hình

Bạn hãy thử CSS Selector vào khung kia để kiểm tra kết quả. Chúc vui vẻ

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

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