Bộ chọn CSS trong Selenium

Bởi: Krishna rừng ta Krishna rừng ta
Hours cập nhật

⚡ Tóm tắt thông minh

Bộ chọn CSS trong Selenium Bộ chọn CSS là một chiến lược định vị mạnh mẽ, xác định các phần tử bằng cách sử dụng thẻ HTML, ID, lớp, thuộc tính và mẫu văn bản bên trong. Tài liệu này giải thích từng loại bộ chọn CSS với các ví dụ từng bước. Selenium SDI.

  • 🆔 Thẻ và ID: Kết hợp thẻ HTML với tiền tố # để nhắm mục tiêu chính xác vào các phần tử có thuộc tính ID duy nhất.
  • 🎯 Thẻ và Lớp: Sử dụng cú pháp dấu chấm (.) để xác định các phần tử có chung một lớp CSS, hữu ích cho các thành phần giao diện người dùng lặp lại.
  • 🧩 Thẻ và thuộc tính: Áp dụng dấu ngoặc vuông [attribute=value] để xác định các phần tử thông qua tên, kiểu hoặc bất kỳ cặp thuộc tính tùy chỉnh nào.
  • 🪜 Thẻ, Lớp và Thuộc tính: Kết hợp nhiều điều kiện để phân biệt các phần tử có chung cả tên lớp và giá trị thuộc tính.
  • 🔤 Đối sánh văn bản bên trong: Sử dụng mẫu :contains(“text”) để định vị các nhãn và phần tử không có ID, tên hoặc lớp.
  • ✅ Thực hành tốt nhất: Nên ưu tiên sử dụng ID ổn định hơn là các bộ chọn lồng nhau sâu để duy trì tính ổn định. Selenium Các kịch bản tự động hóa có khả năng chống chịu tốt với các thay đổi giao diện người dùng.
Đọc thêm

Bộ chọn CSS trong Selenium

Bộ chọn CSS là gì? Selenium?

A Bộ chọn CSS trong Selenium Bộ chọn CSS là một mẫu chuỗi xác định một phần tử web thông qua sự kết hợp của thẻ HTML, id, class và thuộc tính. Bộ chọn CSS phức tạp hơn một chút so với việc định vị bằng ID hoặc tên, nhưng chúng là chiến lược phổ biến nhất đối với những người có kinh nghiệm. Selenium người dùng vì họ có thể truy cập các phần tử không có thuộc tính ID hoặc Name nào cả.

Bộ chọn CSS trong Selenium Chúng có nhiều hình thức khác nhau, nhưng hướng dẫn này tập trung vào năm kiểu mẫu phổ biến nhất được sử dụng trong Selenium SDI:

  • Thẻ và ID
  • Thẻ và Lớp
  • Thẻ và thuộc tính
  • Thẻ, lớp và thuộc tính
  • Văn bản bên trong

Khi sử dụng chiến lược này trong Selenium IDE, luôn luôn thêm tiền tố Target hộp có “css=” như đã được chứng minh trong mọi ví dụ dưới đây.

Tại sao nên sử dụng bộ chọn CSS trong Selenium?

Bộ chọn CSS là chiến lược định vị được ưa chuộng đối với nhiều người. Selenium Các kỹ sư tự động hóa được đánh giá cao vì họ cân bằng giữa tốc độ, tính linh hoạt và khả năng đọc hiểu. Các ứng dụng web hiện đại thường sử dụng ID được tạo động hoặc loại bỏ hoàn toàn thuộc tính tên, khiến Bộ chọn CSS trở thành cách duy nhất đáng tin cậy để nhắm mục tiêu vào một phần tử cụ thể trên trang.

Những ưu điểm chính của việc sử dụng bộ chọn CSS bao gồm:

  • Hiệu suất: Bộ chọn CSS được xử lý bởi công cụ gốc của trình duyệt, do đó chúng thực thi nhanh hơn so với các biểu thức XPath tương đương, đặc biệt là trên các trình duyệt cũ hơn như Internet Explorer.
  • Thích ứng với văn hoá: Chúng kết hợp logic thẻ, lớp, thuộc tính và khớp một phần, cho phép người kiểm thử nhắm mục tiêu vào các phần tử thiếu ID ổn định.
  • Khả năng đọc: Cú pháp này tương tự như cách các nhà phát triển đã viết các quy tắc CSS, giúp rút ngắn thời gian học hỏi cho cả kỹ sư kiểm thử phần mềm và nhóm phát triển giao diện người dùng.
  • Độ ổn định trên nhiều trình duyệt: Các bộ chọn CSS hoạt động nhất quán trên Chrome. Firefox, Edge và Safari, giúp giảm thiểu các lỗi kiểm thử không ổn định.

Thẻ và ID – Bộ chọn CSS

Ví dụ này sử dụng ô nhập email trên trang đăng nhập Facebook. Phần tử này có ID là “e-mail“, và nó đã được truy cập trong phần “Định vị theo ID”. Giờ đây, cùng một phần tử đó được nhắm mục tiêu bằng cách sử dụng một Selenium Bộ chọn CSS với thuộc tính ID.

cú pháp

css=tag#id

  • tag = thẻ HTML của phần tử đang được truy cập
  • # = dấu thăng, dấu này phải luôn có mặt khi sử dụng Selenium Bộ chọn CSS có ID
  • id = ID của phần tử đang được truy cập

Hãy nhớ rằng ID luôn đứng trước dấu thăng (#).

Bước 1) Hướng đến www.facebook.comSử dụng công cụ dành cho nhà phát triển của trình duyệt (hoặc một công cụ cũ hơn như Firebug), hãy kiểm tra hộp văn bản "Email hoặc Số điện thoại".

Hãy lưu ý rằng thẻ HTML là “đầu vàovà ID của nó là “e-mailDo đó, bộ chọn CSS hoàn chỉnh trở thành “css=đầu vào#email".

Thẻ và id - Bộ chọn CSS trong Selenium

Bước 2) Đi vào "css=đầu vào#email" vào Target hộp của Selenium IDE và nhấp vào nút Tìm. Selenium IDE sẽ làm nổi bật phần tử phù hợp trên trang.

Selenium IDE làm nổi bật trường Email thông qua Thẻ và ID

Thẻ và Lớp – Bộ chọn CSS

Bộ chọn CSS trong Selenium Cách sử dụng thẻ HTML và tên lớp tuân theo cùng một ý tưởng như thẻ và ID, nhưng dấu chấm (.) thay thế cho dấu thăng.

cú pháp

css=tag.class

  • tag = thẻ HTML của phần tử đang được truy cập
  • . = dấu chấm, dấu này phải luôn có mặt khi sử dụng bộ chọn CSS với lớp.
  • class = lớp của phần tử đang được truy cập

Bước 1) Mở trang demo https://demo.guru99.com/test/facebook.html và kiểm tra ô văn bản “Email hoặc Số điện thoại”. Lưu ý rằng thẻ HTML là “đầu vàovà lớp của nó là “văn bản đầu vào".

Thẻ và lớp - Bộ chọn CSS trong Selenium

Bước 2) In Selenium IDE, nhập “css=input.inputtext" trong Target hộp và nhấp vào Tìm. Selenium IDE nhận diện hộp văn bản Email hoặc Số điện thoại.

Selenium IDE định vị phần tử theo Thẻ và Lớp

Lưu ý rằng khi nhiều phần tử có cùng thẻ HTML và lớp, chỉ phần tử khớp đầu tiên trong mã nguồn mới được nhận diện. Hãy kiểm tra ô nhập mật khẩu trên cùng trang và lưu ý rằng nó có cùng lớp với ô nhập email hoặc số điện thoại.

Nhiều phần tử có cùng Thẻ và Lớp.

Trong hình minh họa trước đó, chỉ có ô nhập Email hoặc Số điện thoại được tô sáng vì nó xuất hiện đầu tiên trong mã nguồn trang.

xác định thứ tự nguồn trang Selenium phù hợp với

Thẻ và thuộc tính – Bộ chọn CSS

Chiến lược này kết hợp thẻ HTML với một thuộc tính cụ thể thuộc về phần tử mà bạn muốn truy cập.

cú pháp

css=tag[attribute=value]

  • tag = thẻ HTML của phần tử đang được truy cập
  • [ và ] = dấu ngoặc vuông bao quanh thuộc tính và giá trị tương ứng của nó
  • thuộc tính = thuộc tính cần sử dụng. Hãy chọn một thuộc tính duy nhất cho phần tử, chẳng hạn như tên hoặc ID.
  • value = giá trị tương ứng của thuộc tính được chọn.

Bước 1) Điều hướng đến Mercury Trang đăng ký tour du lịch https://demo.guru99.com/test/newtours/register.php và kiểm tra ô nhập liệu “Họ”. Lưu ý thẻ HTML của nó (“input”) và thuộc tính name (“lastName”).

Thẻ và thuộc tính - Bộ chọn CSS trong Selenium

Bước 2) In Selenium IDE, nhập “css=đầu vào[name=lastName]" trong Target hộp và nhấp vào Tìm. Selenium IDE đã tìm thấy thành công trường Họ.

Selenium IDE định vị Họ thông qua thuộc tính

Khi nhiều phần tử cùng chia sẻ thẻ HTML và thuộc tính giống nhau, chỉ phần tử đầu tiên được nhận diện. Hành vi này hoàn toàn giống với việc tìm kiếm các phần tử có cùng thẻ và lớp.

NHỮNG BÀI VIẾT LIÊN QUAN

Thẻ, Lớp và Thuộc tính – Bộ chọn CSS

cú pháp

css=tag.class[attribute=value]

  • tag = thẻ HTML của phần tử đang được truy cập
  • . = dấu chấm, dấu này phải luôn có mặt khi sử dụng bộ chọn CSS với lớp.
  • class = lớp của phần tử đang được truy cập
  • [ và ] = dấu ngoặc vuông bao quanh một thuộc tính cụ thể và giá trị tương ứng của nó
  • thuộc tính = thuộc tính cần sử dụng. Hãy chọn một thuộc tính duy nhất cho phần tử, chẳng hạn như tên hoặc ID.
  • value = giá trị tương ứng của thuộc tính được chọn.

Bước 1) Mở trang demo https://demo.guru99.com/test/facebook.html và kiểm tra các ô nhập liệu “Email hoặc Số điện thoại” và “Mật khẩu”. Ghi chú thẻ HTML, lớp và thuộc tính của chúng. Ví dụ này sử dụng “chỉ mục tab" thuộc tính.

Thẻ, lớp và thuộc tính - Bộ chọn CSS

Bước 2) Trước tiên, hãy truy cập vào ô văn bản “Email hoặc Số điện thoại” bằng cách sử dụng giá trị tabindex là 1. Nhập “css=input.inputtext[tabindex=1]”Thành Selenium IDE's Target Mở hộp thoại và nhấp vào Tìm. Trường Email hoặc Số điện thoại sẽ được tô sáng.

Selenium IDE tìm kiếm Email theo thẻ, lớp, thuộc tính

Bước 3) Để nhắm mục tiêu vào ô nhập mật khẩu, chỉ cần thay thế giá trị tabindex. Nhập “css=input.inputtext[tabindex=2]" trong Target hộp và nhấp vào Tìm. Selenium IDE đã tìm thấy thành công ô nhập mật khẩu.

Selenium IDE tìm kiếm mật khẩu theo thẻ, lớp, thuộc tính

Văn bản bên trong – Bộ chọn CSS

Các nhãn HTML hiếm khi được gán thuộc tính id, name hoặc class. Vậy làm thế nào để truy cập chúng trong HTML? SeleniumCâu trả lời nằm ở nội dung ẩn bên trong của chúng. Văn bản bên trong là các chuỗi ký tự thực tế mà nhãn HTML hiển thị trên trang.

cú pháp

css=tag:contains("inner text")

  • tag = thẻ HTML của phần tử đang được truy cập
  • văn bản bên trong = nội dung văn bản hiển thị của phần tử

Bước 1) Điều hướng đến Mercury Trang chủ tour du lịch https://demo.guru99.com/test/newtours/ và kiểm tra nhãn “Mật khẩu”. Lưu ý thẻ HTML của nó (“font” trong trường hợp này) và quan sát thấy phần tử này không có thuộc tính class, id hoặc name.

Văn bản bên trong - Kiểm tra bộ chọn CSS

Bước 2) Kiểu css=font:contains(“Mật khẩu:”) trong Selenium IDE's Target hộp và nhấp vào Tìm. Selenium IDE định vị nhãn Mật khẩu như hình bên dưới.

Selenium IDE định vị nhãn Mật khẩu theo văn bản bên trong

Bước 3) Lần này, hãy thay thế văn bản bên trong bằng “Boston” để Target trở thành “css=font:contains(“Boston”)Nhấp vào Tìm. Nhãn “Boston đến San Francisco” được tô sáng, cho thấy rằng Selenium IDE có thể định vị một nhãn dài ngay cả khi chỉ cung cấp từ đầu tiên của văn bản bên trong nhãn đó.

Selenium IDE khớp một phần văn bản bên trong

Bộ chọn CSS so với XPath trong Selenium

Cả bộ chọn CSS và XPath đều được sử dụng để xác định các phần tử web trong SeleniumTuy nhiên, chúng có những điểm mạnh khác nhau. Bảng dưới đây so sánh hai chiến lược định vị trên các khía cạnh chính:

Tiêu chí Bộ chọn CSS Xpath
Tốc độ Nhanh hơn, chạy trên công cụ gốc của trình duyệt. Chậm hơn, đặc biệt là trên các trình duyệt cũ.
Chiều hướng Chỉ chuyển tiếp (từ cha sang con) Tiến và lùi (từ con đến cha mẹ)
cú pháp Ngắn gọn hơn và tương tự như các quy tắc CSS. Biểu thức đường dẫn phân cấp dài hơn
So khớp văn bản Giới hạn ở lớp giả :contains() Các hàm text() và contains() mạnh mẽ
Tốt nhất cho Bố cục tĩnh và ứng dụng web hiện đại Duyệt DOM phức tạp và định vị dựa trên văn bản

Các phương pháp tốt nhất để viết bộ chọn CSS trong Selenium

Viết các bộ chọn CSS đáng tin cậy không chỉ đơn thuần là nắm vững cú pháp. Những phương pháp sau đây giúp người kiểm thử tạo ra các bộ chọn ổn định và dễ bảo trì. Selenium Các đoạn mã vẫn hoạt động bình thường sau khi giao diện người dùng thay đổi:

  1. Ưu tiên các thuộc tính độc đáo: Luôn chọn các thuộc tính id, data-test-id hoặc name được thêm vào một cách rõ ràng để tự động hóa. Các thuộc tính này sẽ ổn định ngay cả khi bố cục trực quan thay đổi.
  2. Tránh sử dụng các bộ chọn lồng nhau quá mức: Các chuỗi dài như div > div > ul > li > a Dễ bị lỗi khi lập trình viên chỉnh sửa lại mã HTML. Hãy giữ cho các bộ chọn càng ngắn càng tốt.
  3. Hãy sử dụng các kết quả khớp một phần một cách khôn ngoan: Các mẫu như [class*="btn-primary"] Có thể chấp nhận những thay đổi nhỏ về tên lớp, nhưng chúng cũng có thể trùng khớp với các phần tử không mong muốn.
  4. Tránh sử dụng các công cụ định vị dựa trên chỉ mục: Các bộ chọn như nth-child(3) Chúng rất dễ bị lỗi vì việc thêm một phần tử anh em sẽ làm thay đổi mọi vị trí.
  5. Kiểm tra tính hợp lệ của các bộ chọn trong DevTools: Trước khi chạy một Selenium Sử dụng đoạn mã script, dán bộ chọn vào Bảng điều khiển Công cụ dành cho Nhà phát triển của Chrome. document.querySelector() Để xác nhận rằng nó trả về chính xác một phần tử.
  6. Kết hợp các thuộc tính để tạo nên sự độc đáo: Khi một lớp được nhiều phần tử chia sẻ, hãy thêm bộ lọc thuộc tính như sau: input.form-control[name="email"] để làm rõ mục tiêu.
  7. Ghi chép và tái sử dụng: Tập trung các bộ chọn bên trong một lớp Page Object để chỉ cần một lần cập nhật là có thể khắc phục mọi lỗi trong các bài kiểm tra tham chiếu đến cùng một phần tử.

Tuân thủ các hướng dẫn này giúp giảm thiểu sự không ổn định, cải thiện tốc độ thực thi kiểm thử và làm cho... Selenium Các căn hộ sẽ dễ bảo trì hơn theo thời gian.

Tóm tắt: Hướng dẫn nhanh về cú pháp bộ chọn CSS

Bảng dưới đây tổng hợp mọi thứ Selenium Mẫu chọn CSS được đề cập trong hướng dẫn này:

Phương pháp Target cú pháp Ví dụ
Thẻ và ID css=thẻ#id css=đầu vào#email
Thẻ và Lớp css=tag.class css=input.inputtext
Thẻ và thuộc tính css=tag[thuộc tính=giá trị] css=đầu vào[name=lastName]
Thẻ, lớp và thuộc tính css=tag.class[thuộc tính=giá trị] css=input.inputtext[tabindex=1]
Văn bản bên trong css=tag:contains(“text”) css=font:contains(“Mật khẩu:”)

Câu Hỏi Thường Gặp

Đúng vậy. Các bộ chọn CSS thường thực thi nhanh hơn XPath vì trình duyệt xử lý các quy tắc CSS một cách tự nhiên. Sự khác biệt dễ nhận thấy nhất ở các phiên bản Internet Explorer cũ hơn, trong khi các trình duyệt hiện đại như Chrome và Firefox Thu hẹp khoảng cách.

Đúng vậy. Bộ chọn CSS được viết cho Selenium IDE hoạt động trực tiếp trong Selenium WebDriver thông qua By.cssSelector()Điểm khác biệt duy nhất là WebDriver không yêu cầu tiền tố “css=", vì kiểu định vị được chỉ định bởi chính phương thức đó.

Không. Firebug đã ngừng hoạt động vào năm 2017 sau khi được sáp nhập vào... Firefox Công cụ dành cho nhà phát triển. Hiện nay, người kiểm thử sử dụng công cụ DevTools tích hợp sẵn trong Chrome. Firefoxhoặc sử dụng Edge để kiểm tra các phần tử và xác thực bộ chọn CSS trước khi thêm chúng vào. Selenium tập lệnh.

Đúng vậy. Các công cụ được hỗ trợ bởi trí tuệ nhân tạo như... TestimMabl và ChatGPT có thể đề xuất các bộ chọn CSS bằng cách phân tích DOM. Chúng giúp giảm thiểu công sức bảo trì bằng cách điều chỉnh các bộ chọn khi nhà phát triển đổi tên lớp hoặc tái cấu trúc trang.

Các công cụ tự phục hồi dựa trên trí tuệ nhân tạo phân tích DOM xung quanh và tự động khôi phục các bộ định vị bị lỗi. Khi một bộ chọn CSS bị lỗi, công cụ sẽ xác định phần tử phù hợp nhất bằng cách sử dụng độ tương đồng thuộc tính, nội dung văn bản và các mẫu lịch sử, khôi phục tính ổn định của thử nghiệm.

Sử dụng các mẫu khớp một phần như sau: [id^="user_"] đối với tiền tố, [id$="_btn"] đối với hậu tố, hoặc [id*="cart"] Đối với các chuỗi con. Các mẫu này khớp với ID được tạo động mà không yêu cầu giá trị chính xác.

Bộ chọn CSS không thể duyệt từ phần tử con lên phần tử cha và chúng chỉ hỗ trợ khớp văn bản ở mức độ hạn chế. Trong những trường hợp này, XPath vẫn là lựa chọn tốt hơn. CSS cũng thiếu các hàm tích hợp sẵn cho logic anh em ruột ngoài các anh em liền kề và anh em ruột nói chung.

Mở công cụ dành cho nhà phát triển (DevTools) của trình duyệt, chuyển sang tab Console và chạy lệnh sau: document.querySelectorAll("your-selector"). Danh sách NodeList trả về hiển thị mọi phần tử khớp. Một cách đáng tin cậy Selenium Bộ định vị phải trả về chính xác một phần tử để nhắm mục tiêu duy nhất.

Tóm tắt bài viết này với: