Sự khác biệt giữa XPath và CSS Selector là gì?

định vị css nhanh hơn xpath?

css locator nhanh hơn xpath vì css locator chỉ di chuyển trong cây html theo hướng đi xuống, nhưng xpath di chuyển theo cả hướng lên và xuống

Show

Sự khác biệt giữa "/" và "//" trong XPath là gì?

Dấu gạch chéo đơn "/". Được sử dụng trong đường dẫn tuyệt đối

Dấu gạch chéo kép "//". Được sử dụng trong đường dẫn tương đối

Thứ tự ưu tiên sử dụng thiết bị định vị là gì?

Dưới đây là mức độ ưu tiên sử dụng các bộ định vị này

  1. Tôi

  2. Tên

  3. linkText / một phầnLinkText

  4. css

  5. xpath

Tại sao không nên sử dụng bộ định vị className và tagName?

Bởi vì tên lớp và tên thẻ có thể chỉ được sử dụng một lần trong một trang tại thời điểm phát triển tập lệnh tự động hóa, nhưng điều đó không an toàn, nhà phát triển có thể sử dụng cùng một thẻ và lớp bất kỳ lúc nào. Bạn sẽ tìm hiểu về tất cả các bộ định vị trong các chương tiếp theo

Khi nào chúng ta sử dụng bộ định vị LinkText và một phầnLinkText?

Công cụ định vị LinkText  nên được sử dụng khi văn bản của liên kết không đổi. bộ định vị partLinkText nên được sử dụng khi một phần nhất định của văn bản liên kết bị thay đổi mỗi khi trang được tải. tôi. e. đối với văn bản thay đổi động một phần, chúng tôi sử dụng bộ định vị một phầnLinkText

Khi nào chúng ta sử dụng bộ định vị id?

Khi mã nguồn html có thuộc tính id, thì chúng ta có thể sử dụng bộ định vị id. Và những gì chúng ta chuyển làm đối số cho bộ định vị iid là giá trị của thuộc tính id

Khi nào chúng ta sử dụng bộ định vị tên?

Khi mã nguồn html có thuộc tính tên, thì chúng ta có thể sử dụng bộ định vị tên. Và những gì chúng ta chuyển làm đối số cho bộ định vị tên là giá trị của thuộc tính tên

Làm thế nào để bạn đảm bảo trang yêu cầu được hiển thị hay không?

Chúng tôi có thể sử dụng các điểm kiểm tra sau để xác thực trang được yêu cầu có được hiển thị hay không

  1. sử dụng tiêu đề của trang

  2. sử dụng URL của trang

  3. sử dụng bất kỳ phần tử độc đáo nào trên trang

Chúng tôi có cả thuộc tính id và tên, chúng tôi thích bộ định vị nào hơn?

Chúng tôi thích id hơn công cụ định vị tên, vì id là duy nhất và tên có thể trùng lặp

Làm cách nào để chúng tôi xử lý các đối tượng thay đổi động trên trang web?

Bằng cách sử dụng xpath với hàm chứa khi giá trị thuộc tính hoặc văn bản thay đổi một phần. Nếu văn bản hoàn toàn thay đổi, chúng tôi xử lý tình huống này bằng cách sử dụng khái niệm xpath độc lập phụ thuộc

Khi tôi đang học cạo, tôi đã thực hiện nhiều hướng dẫn về nó. Một số hướng dẫn đã sử dụng XPath và những hướng dẫn khác đã sử dụng Bộ chọn CSS của chúa. Cho đến hôm nay tôi luôn dùng đến CSS vì nó là sự lựa chọn quen thuộc. Tất cả những gì tôi mới về XPath là Scrapy sử dụng nó theo mặc định và bất kỳ bộ chọn CSS nào cũng được chuyển đổi thành XPath đằng sau hậu trường. Là một người hoàn toàn mới vào thời điểm đó, tôi đã không suy nghĩ nhiều về nó. Than ôi, đã đến lúc tôi phải chìm sâu vào chủ đề này và hiểu sự khác biệt giữa hai loại bộ chọn này là gì

 

XPath

 

nó là gì

XPath là viết tắt của Đường dẫn XML. Nó sử dụng tài liệu XML và truy vấn nó để xác định các thành phần bên trong nó. Phần đường dẫn của XPath có nghĩa là chúng ta cần chỉ định đường dẫn từ đầu đến phần tử mong muốn

 

Ưu điểm của XPath

  • Cho phép điều hướng lên DOM khi tìm kiếm các phần tử
  • Linh hoạt hơn Bộ chọn CSS
  • Cho phép tìm kiếm toàn bộ hoặc một phần nội dung trong tên thành phần với từ khóa contains

 

Bộ chọn CSS

 

nó là gì

Bộ chọn CSS sử dụng các kiểu được chỉ định trong Cascading Style Sheet (CSS) để chọn các phần tử mong muốn. Hầu hết các trang web trực tuyến đều được tạo kiểu bằng CSS và điều đó khiến CSS Selector trở thành lựa chọn phổ biến của nhiều người

CSS dựa vào các thẻ, tên lớp và id trong số những thứ khác để chọn những gì chúng ta muốn. Điều này trái ngược với XPath sử dụng cấu trúc dạng cây để chọn phần tử

Bộ định vị trong Selenium được sử dụng để tìm một phần tử cụ thể trong các trang web. Chúng tôi có thể sử dụng chúng để tìm hầu hết mọi phần của trang web. Sau khi chúng tôi có biểu thức định vị xác định duy nhất một phần tử web cụ thể, chúng tôi có thể chuyển phần tử này tới đối tượng WebDriver và sau đó sử dụng các phương thức tích hợp khác nhau như click, send_keys, clear, v.v. , trong Selenium để tương tác với phần tử đó

Đó là một trong những khái niệm nền tảng trong kiểm thử tự động truyền thống. QA phải tìm hiểu về cách viết các biểu thức định vị tốt nhất để có quy trình làm việc nhanh hơn. Hầu hết các kỹ sư tự động hóa mới bắt đầu gặp khó khăn trong việc viết biểu thức định vị chính xác. Đến cuối bài viết này, bạn sẽ có thể viết các biểu thức CSS và XPath ngắn gọn, rõ ràng và mạnh mẽ trong thời gian ngắn nhất có thể

Trong bài viết này, chúng ta sẽ học cách viết các biểu thức rõ ràng, i. e. , bộ chọn XPath và CSS, rất nhanh chóng để có quy trình làm việc mượt mà hơn. Chúng ta cũng sẽ tìm hiểu về hai tiện ích mở rộng trình duyệt hữu ích tự động tạo bộ chọn CSS hợp lệ và XPath

Các loại định vị khác nhau

Selenium hỗ trợ tám loại bộ định vị khác nhau. className, name, id, tagName, linkText, partLinkText, XPath và bộ chọn CSS

Trong số tám bộ chọn này, className và tagName hiếm khi được sử dụng vì thông thường, trong một ứng dụng sản xuất, chúng ta sẽ thường tìm thấy nhiều bộ định vị trong một lớp hoặc tên thẻ nhất định. Ngay cả khi chúng tôi gặp một lớp hoặc thẻ được sử dụng cho một bộ định vị duy nhất, thì có khả năng cao điều này sẽ thay đổi trong bản cập nhật trong tương lai. linkText và partLinkText có thể được sử dụng tùy theo từng trường hợp

Bộ chọn XPath và CSS là những bộ định vị phần tử được sử dụng nhiều nhất vì những ưu điểm chung sau

  1. Chúng tôi không phải phụ thuộc vào một tên lớp hoặc tên thẻ và chúng tôi có thể tận dụng nhiều id và thẻ
  2. Chúng ta có thể duyệt từ cha mẹ đến con cái
  3. Chúng tôi có thể viết các biểu thức mạnh mẽ có thể chịu được các thay đổi của giao diện người dùng

XPath là gì?

XPath, đôi khi còn được gọi là đường dẫn XML, là một cú pháp truy vấn cho lược đồ XML. Nó được sử dụng trong nhiều ngôn ngữ lập trình như Java, C#, Python, JavaScript, v.v.

XPath được sử dụng trong các lược đồ XML, cho phép chúng tôi định vị các phần cụ thể của tài liệu. Các biểu thức XPath duyệt qua tài liệu XML theo cách mà nó có thể theo dõi từ nút đầu tiên đến bất kỳ thành phần bắt buộc nào trên trang web. Chúng tôi cũng có thể sử dụng nó cho mục đích tìm kiếm và xác thực nâng cao

Ưu điểm và nhược điểm của XPath

  • Tương thích rộng rãi với nhiều ngôn ngữ lập trình
  • Hỗ trợ cả thuộc tính XML và HTML
  • Chúng tôi có thể làm việc với bất kỳ nút nào có trong tài liệu XML và sử dụng các điều kiện khác nhau để chọn bộ định vị phù hợp
  • Biểu thức XPath trả về bất kỳ số lượng kết quả nào trong DOM, kể cả số không
  • Không cần phải đi qua từ nút trên cùng với biểu thức XPath. Nó hoạt động ở mọi cấp độ tài liệu
  • Trong bối cảnh lập trình, các biểu thức XPath không phải là thủ tục; . Điều quan trọng là vì trình tối ưu hóa truy vấn phải được tự do sử dụng các chỉ mục hoặc các cấu trúc khác để tìm kết quả một cách hiệu quả
  • XPath cho phép luồng hai chiều. Sử dụng XPath, chúng ta có thể duyệt theo cả hai cách, tôi. e. , từ cha mẹ đến con cái và con cái đến cha mẹ, điều này không thể thực hiện được trong CSS

Cú pháp XPath

ExpressionDescriptionnode_nameChọn tất cả các nút có tên này/Chọn từ nút gốc. Chọn nút hiện tại//Chọn các nút từ nút hiện tại khớp với các thuộc tính lựa chọn@Select. Chọn cha của nút hiện tại*Chọn bất kỳ phần tử nào node@*Chọn bất kỳ thuộc tính nào nodenode()Chọn bất kỳ nút nào

XPath cũng có các vị từ (luôn được đặt trong dấu ngoặc vuông) mà bạn có thể sử dụng để tìm bất kỳ nút cụ thể nào hoặc một nút có giá trị nhất định

ExpressionResult/audio/file[last()]Chọn tệp âm thanh cuối cùng là phần tử con của phần tử âm thanh/âm thanh/tệp[1]Chọn tệp âm thanh/âm thanh/tệp đầu tiên[vị trí()>4]Chọn tất cả các tệp âm thanh . 99]/titleChọn tất cả các thành phần tiêu đề của thành phần tệp của thành phần âm thanh có giá trị > 9. 99

 

Bộ chọn CSS là gì?

Bộ chọn CSS là biểu diễn chuỗi của các thẻ, lớp, thuộc tính và id HTML khác nhau. Đó là một biểu thức cho phép chúng tôi xác định duy nhất một phần tử web trong Selenium

Ưu điểm và nhược điểm của Bộ chọn CSS

  • Cú pháp đơn giản vì chúng bao gồm một phần tử duy nhất trong cấu trúc của chúng
  • 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

Tập lệnh tự động hóa có thể xử lý hầu hết các bộ định vị bằng cả bộ chọn XPath và CSS

Thực hành tốt nhất trong khi viết biểu thức định vị

Thông thường, bộ chọn CSS mạnh gần như XPath. Tuy nhiên, một số trình duyệt có thể không hỗ trợ đầy đủ tất cả các bộ chọn CSS mà bạn cần. Một lý do khác khiến bạn có thể muốn sử dụng riêng XPath có thể là tìm một phần tử bằng cách quay lại DOM (chỉ XPath mới hỗ trợ). Sử dụng các bộ định vị ngắn và mạnh mẽ sẽ đảm bảo tập lệnh tồn tại nhiều thay đổi giao diện người dùng sắp tới. Trong khi viết một biểu thức định vị, dù là XPath hay CSS, chúng ta nên xem xét các điểm sau

    • Biểu thức định vị phải khớp với phần tử được nhắm mục tiêu
    • Biểu thức định vị không được khớp với bất kỳ phần tử nào khác trong DOM
  • Không sử dụng bất kỳ thông tin nào có khả năng thay đổi trong tương lai
  • Luôn giữ các biểu thức định vị ngắn bằng cách sử dụng thông tin bắt buộc tối thiểu
  • Tránh sử dụng các biểu thức tuyệt đối, ví dụ
      • Biểu thức XPath tuyệt đối – /html/body/div[2]/div[1]/div/h4[1]/b/html[1]/body[1
      • Biểu thức CSS tuyệt đối –  html. thân hình. div. p. div. một
      • Vấn đề với biểu thức tuyệt đối là nếu bất kỳ nút nào trong số các nút thay đổi và trong trường hợp thêm nhiều anh chị em vào bất kỳ nút nào, chúng có xu hướng bị hỏng
  • Thay vào đó, hãy sử dụng các biểu thức tương đối, dễ viết và mạnh mẽ hơn, chẳng hạn
    • Biểu thức XPath tương đối –  //tagname[@attribute= 'value' ]
    • Biểu thức CSS tương đối – tagname[attribute= ‘value’ ]

Cheatsheet để viết bộ định vị Selenium

Loại định vịCú phápVí dụXPath//tagname[@attribute='value']“//input[@name='email']”CSS Selectortagname[attribute='value']“input[name='email']”IDNo cú pháp“id”

Chúng ta có thể chuyển các giá trị từ cột ví dụ vào các phương thức Selenium tương ứng sau đây

Trong đó trình điều khiển là đối tượng WebDriver trong Selenium, mã mẫu là trong Python

trình điều khiển. find_element_by_xpath( “//input[@name=’password’]” )

trình điều khiển. find_element_by_css_selector( “input[name=’password’]” )

trình điều khiển. find_element_by_id( “3qwetu” )

trình điều khiển. find_element_by_name( “phiếu giảm giá” )

trình điều khiển. find_element_by_class_name( “btn-success” )

trình điều khiển. find_element_by_link_text( “Menu Trợ giúp” )

trình điều khiển. find_element_by_partial_link_text( “người dùng chính” )

trình điều khiển. find_element_by_tag_name( “div” )

Biểu thức tiêu chuẩn để viết bộ chọn XPath và CSS

Cú pháp định vị XPath tùy chỉnh không có tên thẻ

Cú pháp. //tag_name[@attribute= ‘value’ ]

// cho phép chúng tôi chuyển sang một thẻ cụ thể và chúng tôi có thể sử dụng giá trị thuộc tính để lọc bộ định vị phù hợp

Ví dụ. //tag_name[@name = ‘tên người dùng’ ]

Cú pháp bộ chọn CSS tùy chỉnh không có tên thẻ

Việc sử dụng tên thẻ trong biểu thức CSS Selector là không bắt buộc. Chúng ta có thể sử dụng các giá trị thuộc tính và tên lớp trong dấu ngoặc vuông

Cú pháp. [attribute=’value’]

Ví dụ: [class=’error-msg’] trả về bộ định vị có thông báo lỗi lớp

Chúng ta cũng có thể sử dụng toán tử * để tìm các kết quả khớp từng phần

Ví dụ: [class*='data-test'] trả về tất cả các bộ định vị có tên lớp bắt đầu bằng data- .

Tạo XPath dựa trên văn bản

Bất cứ khi nào chúng ta cần xác thực văn bản trên trang web, cho dù đó là tiêu đề, tên sản phẩm hay thông báo lỗi – cú pháp sau đây có thể cực kỳ hữu ích

Cú pháp. //tagname[contains(text(), ‘actual-text’)]

Thí dụ. //span[contains(text(),’Cart’)] sẽ trả về bộ định vị cho Cart

Tạo XPath bằng cách duyệt qua các thẻ

Nếu có nhiều kết quả cho một thẻ cụ thể, chúng tôi có thể tận dụng các thẻ cha

Cú pháp. //tag_name[@attribute = ‘parent_tag/child_tag’]

Thí dụ. //div[@class=’product-action’]/apply_coupon

Tạo Bộ chọn CSS bằng cách duyệt qua con thứ n

cú pháp. tên thẻ. con thứ n(x)

Thí dụ. div. con thứ n(2)

Chọn Parent Locator từ Child sử dụng XPath

cú pháp. XPATH/phụ huynh. tên thẻ

Thí dụ. //*[title=”data-test”]/parent. div

Tạo CSS Selector từ Tag và Class Name

Thay thế khoảng trắng bằng dấu chấm (. ) để sử dụng nhiều hơn một tên lớp

cú pháp. tên thẻ. tên lớp

Thí dụ. đầu vào. Thanh tìm kiếm

Tiện ích mở rộng trình duyệt tốt nhất để tự động tạo biểu thức định vị

Bạn có thể sử dụng cheat sheet ở trên để viết các biểu thức định vị như bộ chọn XPath và CSS cho bất kỳ phần tử web nào. Trong một dự án tự động hóa trong thế giới thực, chúng tôi sẽ làm việc với nhiều trang web, yêu cầu Kỹ sư QA viết hàng trăm bộ định vị. Điều này trở nên rất tẻ nhạt và bực bội rất nhanh. Bạn có thể sử dụng các tiện ích mở rộng của trình duyệt đủ thông minh để tự động hóa việc này

1. Bộ chọnHub

Sử dụng tiện ích mở rộng SelectorsHub, bạn có thể tạo các biểu thức CSS và XPath trong vòng chưa đầy 5 giây. SelectorsHub là tiện ích mở rộng của Chrome tự động đề xuất các phiên bản khác nhau của biểu thức định vị bằng cách cho phép người dùng chọn các thuộc tính, văn bản, v.v.

2. ChroPath

ChroPath là một plugin hữu ích khác tự động tạo các biểu thức định vị. ChroPath nổi tiếng với việc phát triển các biểu thức XPath. Sử dụng ChroPath, chúng tôi có thể nhấp chuột phải vào bất kỳ trình định vị nào và sao chép XPath của nó từ menu ngay lập tức

Cả SelectorsHub và ChroPath đều hỗ trợ tất cả các trình duyệt chính. Với sự trợ giúp của tiện ích mở rộng trình duyệt, bạn có thể tạo ngay lập tức hầu hết các biểu thức bộ chọn định vị. Tuy nhiên, trong một số trường hợp, các tiện ích mở rộng tự động này có thể tạo ra các bộ định vị dài. Chúng ta có thể sử dụng cheat sheet trên để tối ưu hóa các bộ định vị như vậy

Sự kết luận

Vậy bạn thích loại biểu thức định vị nào hơn, Bộ chọn XPath hay CSS?

Hoặc, bạn có thể chỉ cần chuyển sang testRigor cho tất cả các nhu cầu tự động hóa thử nghiệm từ đầu đến cuối của mình và quên đi Bộ chọn CSS, XPath và gần như mọi thứ khác mà bạn vừa học

Nhưng bằng cách nào?

testRigor là một công cụ tự động hóa không có mã, nơi bạn liên quan đến bất kỳ thành phần nào trên màn hình từ góc nhìn của người dùng cuối. Bạn không sử dụng bất kỳ chi tiết triển khai nào, chẳng hạn như bộ định vị, điều này cũng khiến bài kiểm tra không quan tâm đến bất kỳ thay đổi hoặc cập nhật nào về vấn đề này

Toàn bộ lệnh kiểm tra tự động của bạn sẽ như thế này

enter "149 New Montgomery" into "Address" in the "From" section

hoặc

check that table at the row containing stored value "generatedId" and column "Status" contains "Approved"

Trông sạch sẽ, phải không? . Điều đó cũng có nghĩa là ngay cả khi toàn bộ khung lập trình cơ bản thay đổi, các bài kiểm tra vẫn sẽ vượt qua – trong trường hợp giao diện người dùng vẫn giữ nguyên

Sự khác biệt giữa bộ chọn XPath và CSS trong Java là gì?

Chúng ta có thể duyệt cả tiến và lùi trong DOM, i. e chúng ta có thể di chuyển từ phần tử cha sang phần tử con và cả từ phần tử con sang phần tử cha với xpath. Tuy nhiên đối với css, chúng ta chỉ có thể duyệt từ cha sang con chứ không thể ngược lại. Xét về hiệu suất, css tốt hơn và nhanh hơn, trong khi xpath chậm hơn .

Bộ chọn CSS nhanh hơn XPath như thế nào?

Xpath cho phép luồng hai chiều, nghĩa là quá trình truyền tải có thể theo cả hai chiều từ cha mẹ đến con cái và cả 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 .

Sự khác biệt giữa bộ chọn và CSS là gì?

và hash(#) cả hai đều được sử dụng làm bộ chọn CSS. Cả hai bộ chọn được sử dụng để chọn nội dung để đặt kiểu. Bộ chọn CSS chọn các phần tử HTML theo id, lớp, loại, thuộc tính, v.v. . bộ chọn id(“#”). Bộ chọn id chọn thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể.

XPath có phải là bộ chọn không?

Các loại bộ chọn thay thế . XPath định nghĩa một loại phân cấp các phần tử trong tài liệu. XML Path Language (XPath) is a syntax for locating elements in structured documents such as an XML document or web page. XPath defines a kind of hierarchy of elements in the document.