Xpath với phong cách css

Cả xpath và css đều là một trong những công cụ định vị được sử dụng thường xuyên nhất trong Selenium. Mặc dù có các công cụ định vị khác như id, tên, tên lớp, tên thẻ và văn bản liên kết, v.v., xpath và css được sử dụng khi không có sẵn các thuộc tính duy nhất để xác định các phần tử

Có một số khác biệt giữa xpath và css được liệt kê dưới đây -

• Xpath cho phép luồng hai chiều, điều đó có nghĩa là quá trình truyền tải có thể theo cả hai cách từ cha mẹ đến con cái và con cái đến cha mẹ. Css chỉ cho phép một luồng định hướng có nghĩa là quá trình truyền tải chỉ từ cha mẹ sang con

• Xpath chậm hơn về hiệu suất và tốc độ. Css có hiệu suất và tốc độ tốt hơn xpath

• Xpath cho phép nhận dạng với sự trợ giúp của văn bản hiển thị xuất hiện trên màn hình với sự trợ giúp của hàm text(). Css không có tính năng này

• CSS tùy chỉnh có thể được tạo trực tiếp với sự trợ giúp của thuộc tính id và lớp. Đối với id, biểu thức css được biểu thị bằng # theo sau là id [ #<>. Đối với lớp, biểu thức css được biểu thị bằng. tiếp theo là lớp [. <>]. Xpath không có bất kỳ tính năng nào như thế này

• Biểu thức Xpath được biểu thị bằng [//tagname[@attribute = 'value']. Biểu thức css là sự đàn áp được biểu thị bằng [tagname[attribute = 'value']

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

  Tầng 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

  ________số 8_______

  Ở đâ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

  0

  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

  1

  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

  2

  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

  3

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

  Xpath: //input
  Css: =input

  4

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

  Xpath: //input
  Css: =input

  5

  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

  Làm cách nào để viết css XPath trong Selenium?

  Nhập “css=input[type='submit']” (giá trị định vị) trong Selenium IDE. Bấm vào nút Tìm. Nút “Đăng nhập” sẽ được tô sáng, xác minh giá trị của bộ định vị. Thuộc tính. Được sử dụng để tạo Bộ chọn CSS

  Tôi có nên sử dụng Bộ chọn XPath hoặc CSS không?

  Bộ chọn CSS có xu hướng hoạt động tốt hơn, nhanh hơn và đáng tin cậy hơn XPath trong hầu hết các trình duyệt. Chúng ngắn hơn nhiều và dễ đọc và dễ hiểu hơn.

  Tại sao chúng ta không thể sử dụng CSS Selector thay vì XPath?

  Hiệu suất bằng hoặc nhanh hơn so với XPath. Dễ học hơn XPath, dễ sử dụng hơn. Bộ chọn CSS chỉ cho phép luồng một chiều. Sử dụng Bộ chọn CSS, chúng tôi chỉ có thể duyệt từ cha sang con chứ không thể đi từ con sang cha mẹ, điều này có thể thực hiện được với XPath

  Làm cách nào để chuyển đổi XPath sang CSS Selector?

  Hướng dẫn sử dụng .

  Kéo và thả tệp của bạn hoặc sao chép và dán văn bản của bạn vào trình chỉnh sửa ở trên

  Biểu thức Xpath của bạn được tự động chuyển thành CSS Selector

  Nhấp vào nút "Tải xuống CSS" để tải xuống kết quả

  Bạn cũng có thể sao chép Bộ chọn CSS vào khay nhớ tạm bằng cách nhấp vào nút "Sao chép vào khay nhớ tạm"