Bộ chọn CSS tốt nhất

Kiếm thu nhập bằng kỹ năng CSS của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.

Để Selenium hoặc Appium nhấp vào một phần tử, nhập vào phần tử đó hoặc di chuột vào hoặc ra, trước tiên công cụ cần tìm phần tử đó. Thư viện mã WebDriver cung cấp các phương thức để thực hiện điều đó, chẳng hạn như findelement() hoặc findelements(). Chúng thường sử dụng một công cụ định vị, có thể được tạo bằng ID, Mã XPATH hoặc Biểu định kiểu xếp tầng (CSS). Lấy mã XPATH có thể dễ dàng như chọn phần tử trong công cụ dành cho nhà phát triển hoặc sử dụng thứ gì đó như Chropath. Về cơ bản, XPATH là ngôn ngữ truy vấn cho các tài liệu giống như XML, chẳng hạn như các trang web. Có thể khó viết, khó hiểu và thậm chí còn khó hơn khi đảo ngược kỹ thuật. Do đó, CSS đã được ưa chuộng như một cách để xác định các đối tượng trong WebDriver

Giống như những thứ mạnh mẽ nhất, CSS có một chút đường cong học tập. Nó chắc chắn khó hơn rất nhiều so với việc cắt và dán từ một công cụ. Tuy nhiên, nếu bạn đầu tư thời gian vào việc học Bộ chọn CSS, bạn có thể có các liên kết mạnh mẽ hơn, dễ đọc hơn, ít giòn hơn và được tích hợp chặt chẽ hơn một chút vào nền tảng trình duyệt

Hôm nay, chúng tôi sẽ cung cấp các quy tắc, mẹo và lớp giả CSS để giúp bạn đi đúng hướng hoặc có thể giúp bạn di chuyển bộ định vị XPATH của mình sang CSS

Bắt đầu với Bộ chọn CSS

Bộ chọn CSS là gì? . Chúng là các biểu diễn chuỗi của thẻ HTML, thuộc tính, Id và Class. Vì vậy, chúng là các mẫu khớp với các phần tử trong cây và là một trong một số công nghệ có thể được sử dụng để chọn các nút trong tài liệu XML.  

Hôm nay chúng ta sẽ đề cập đến các bộ chọn CSS đơn giản, sau đó nâng cao hơn, sau đó là các lớp giả, về cơ bản là các hàm khớp tích hợp, mạnh mẽ giúp rút gọn tìm kiếm thành thứ bạn đang tìm kiếm

I. Bộ chọn CSS đơn giản

ID

Id của phần tử trong XPATH được xác định bằng cách sử dụng. “[@id='example']” và trong CSS bằng cách sử dụng. “#” - ID phải là duy nhất trong DOM

ví dụ

XPath: //div[@id='example']
CSS: #example

Loại nguyên tố

Ví dụ trước cho thấy //div trong xpath. Đó là loại phần tử, có thể là đầu vào cho hộp văn bản hoặc nút, img cho hình ảnh hoặc "a" cho liên kết.  

Xpath: //input
Css: =input

con trực tiếp

Các trang HTML có cấu trúc giống như XML, với các trang con được lồng bên trong trang cha. Ví dụ: nếu bạn có thể định vị liên kết đầu tiên trong div, bạn có thể tạo một chuỗi để truy cập liên kết đó. Một con trực tiếp trong XPATH được xác định bằng cách sử dụng “/“, trong khi trên CSS, nó được xác định bằng cách sử dụng “>”.   

ví dụ

XPath: //div/a
CSS: div > a

Trẻ em hoặc Trẻ em phụ

Viết các div lồng nhau có thể gây mệt mỏi - và dẫn đến mã dễ gãy. Đôi khi bạn muốn mã thay đổi hoặc muốn bỏ qua các lớp. Nếu một phần tử có thể nằm bên trong một phần tử khác hoặc một trong các phần tử con của nó, thì phần tử đó được xác định trong XPATH bằng cách sử dụng “//” và trong CSS chỉ bằng một khoảng trắng

ví dụ

XPath: //div//a
CSS: div a

Lớp

Đối với các lớp, mọi thứ khá giống nhau trong XPATH. “[@class='example']” trong khi trong CSS nó chỉ là “. ”

ví dụ

XPath: //div[@class='example']
CSS: .example

II. Bộ chọn CSS nâng cao

Anh chị em tiếp theo

Điều này hữu ích để điều hướng danh sách các phần tử, chẳng hạn như biểu mẫu hoặc mục ul. Anh chị em tiếp theo sẽ yêu cầu Selenium tìm phần tử liền kề tiếp theo trên trang nằm trong cùng một trang gốc. Hãy hiển thị một ví dụ sử dụng biểu mẫu để chọn trường sau tên người dùng

 

 
 
 
Login 



 

Hãy viết một bộ chọn XPath và css sẽ chọn trường nhập sau “tên người dùng”. Điều này sẽ chọn đầu vào "bí danh" hoặc sẽ chọn một phần tử khác nếu biểu mẫu được sắp xếp lại

XPATH: //input[@id='username']/following-sibling:input[1]
CSS: #username + input

Giá trị thuộc tính

Nếu bạn không quan tâm đến thứ tự của các phần tử con, bạn có thể sử dụng bộ chọn thuộc tính trong selen để chọn các phần tử dựa trên bất kỳ giá trị thuộc tính nào. Một ví dụ điển hình là chọn phần tử 'tên người dùng' của biểu mẫu trên mà không cần thêm lớp

Chúng ta có thể dễ dàng chọn phần tử tên người dùng mà không cần thêm lớp hoặc id vào phần tử

XPATH: //input[@name='username']
CSS: input[name='username']

Chúng tôi thậm chí có thể xâu chuỗi các bộ lọc để cụ thể hơn với các bộ chọn của chúng tôi

Ở đây Selenium sẽ hoạt động trên trường đầu vào với name="login" và type="submit"

Chọn một trận đấu cụ thể

Bộ chọn CSS trong Selenium cho phép chúng ta điều hướng danh sách khéo léo hơn các phương pháp trên. Nếu chúng ta có một ul và chúng ta muốn chọn phần tử li thứ tư của nó mà không quan tâm đến bất kỳ phần tử nào khác, chúng ta nên sử dụng nth-child hoặc nth-of-type. Đứa con thứ n là một lớp giả. Trong CSS thẳng, điều đó cho phép bạn ghi đè hành vi của một số thành phần nhất định;

Cat
Dog
Car
Goat

Nếu chúng ta muốn chọn phần tử li thứ tư (Dê) trong danh sách này, chúng ta có thể sử dụng loại thứ n, sẽ tìm thấy li thứ tư trong danh sách. Lưu ý hai dấu hai chấm, một thay đổi gần đây về cách CSS xác định các lớp giả

Xpath: //input
Css: =input

Mặt khác, nếu chúng ta chỉ muốn lấy phần tử thứ tư nếu nó là phần tử li, chúng ta có thể sử dụng phần tử con thứ n được lọc sẽ chọn (Xe) trong trường hợp này

Xpath: //input
Css: =input

Lưu ý, nếu bạn không chỉ định loại con cho con thứ n, nó sẽ cho phép bạn chọn con thứ tư mà không cần quan tâm đến loại. Điều này có thể hữu ích trong việc thử nghiệm bố cục css trong selen

Xpath: //input
Css: =input

Trong XPATH, điều này sẽ tương tự như sử dụng [4]

Chuỗi phụ phù hợp

CSS có một tính năng thú vị là cho phép khớp chuỗi một phần bằng cách sử dụng ^=, $= hoặc *=. Tôi sẽ định nghĩa chúng, sau đó hiển thị ví dụ về từng loại

Xpath: //input
Css: =input

Liên kết có “id” bắt đầu bằng văn bản “id_prefix_”

Xpath: //input
Css: =input

Liên kết có “id” kết thúc bằng văn bản “_id_sufix”

Xpath: //input
Css: =input

Liên kết có “id” chứa văn bản “id_pattern”

Khả năng tương thích lớp giả

Một phiên bản trước của bài viết này tham khảo. chứa, một cách mạnh mẽ để khớp các phần tử có khối văn bản bên trong mong muốn. Đáng buồn thay, tính năng đó không còn được dùng nữa và không còn được hỗ trợ bởi Tiêu chuẩn W3C nữa. Tiêu chuẩn CSS Selector cấp 3 hiện tại được triển khai bởi tất cả các trình duyệt chính; . Tài liệu tiêu chuẩn đó có danh sách chi tiết các bộ chọn và lớp giả. Để có danh sách dễ quản lý hơn, hãy xem Tài liệu Mozilla có danh sách đầy đủ, tuyệt vời về các lớp psuedo. Đi sâu vào bất kỳ lớp giả nào và cuộn xuống để biết thông tin cụ thể về khả năng tương thích trong các trình duyệt khác nhau, bao gồm ví dụ này từ lớp giả nth-child()

Sauce Labs - Thử nghiệm Selenium trên Đám mây

Sauce Labs thực hiện các bài kiểm tra có thể chạy trên máy tính để bàn hoặc thiết bị cắm điện và chạy chúng trên đám mây. Nền tảng của chúng tôi giúp các nhà phát triển thử nghiệm các ứng dụng web và di động gốc và lai trên hơn 2400 nền tảng trình duyệt / hệ điều hành, bao gồm iOS, Android và Mac OS X. Sauce hỗ trợ Selenium, Appium và các khung thử nghiệm đơn vị JavaScript phổ biến, đồng thời tích hợp với tất cả các ngôn ngữ lập trình, khung thử nghiệm và hệ thống CI hàng đầu. Với tính năng quay video và ảnh chụp màn hình tích hợp của mọi trường hợp thử nghiệm, công cụ gỡ lỗi và tạo đường hầm an toàn cho thử nghiệm cục bộ hoặc có tường lửa, Sauce giúp cho các bộ thử nghiệm chạy, gỡ lỗi và mở rộng quy mô nhanh chóng và dễ dàng

5 bộ chọn trong CSS là gì?

Bộ chọn kiểu nào là thích hợp nhất?

Bộ chọn CSS nào có mức độ ưu tiên cao nhất?

Bộ chọn nào nhanh nhất?