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
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
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
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 nhauSelenium 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
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
Cú pháp XPathExpressionDescriptionnode_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
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
Cheatsheet để viết bộ định vị SeleniumLoạ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à CSSCú 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ảnBấ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ứ ncú 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 XPathcú pháp. XPATH/phụ huynh. tên thẻ Thí dụ. //*[title=”data-test”]/parent. div Tạo CSS Selector từ Tag và Class NameThay 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ọnHubSử 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. ChroPathChroPath 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ậnVậ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. |