đị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
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
Tên
linkText / một phầnLinkText
css
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
sử dụng tiêu đề của trang
sử dụng URL của trang
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
- 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ẻ
- Chúng ta có thể duyệt từ cha mẹ đến con cái
- 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