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

XPath trong Selenium WebDriver được sử dụng để tìm một phần tử trên trang web. Có hai loại XPath. 1) Tuyệt đối & 2) Tương đối. chúng ta sẽ học các phương thức Xpath Chứa (), Sử dụng OR & AND, Hàm bắt đầu, Văn bản (), Trục XPath, Theo dõi, Tổ tiên, Con, Tiền tố, Anh chị em theo dõi, Cha mẹ, Bản thân, Hậu duệ

Có một số trường hợp không thể sử dụng XPath thông thường để tìm một phần tử. Trong tình huống như vậy, chúng ta cần các chức năng khác nhau từ truy vấn xpath. Có một số chức năng XPath quan trọng như XPath chứa, cha mẹ, tổ tiên, anh chị em theo dõi, v.v. Với sự trợ giúp của các chức năng này, bạn có thể tạo các biểu thức XPath phức tạp

Có nhiều cách để xác định duy nhất một thành phần web trong trang web, chẳng hạn như ID, Tên, Tên lớp, Văn bản liên kết, Văn bản liên kết một phần, Tên thẻ và XPATH. Cú pháp lệnh FindElement. Lệnh Selenium Find Element lấy đối tượng By làm tham số và trả về một đối tượng kiểu list WebElement trong Selenium

Những người ủng hộ CSS nói rằng nó dễ đọc hơn và nhanh hơn (đặc biệt là khi chạy với Internet Explorer). Trong khi những người ủng hộ XPath cho rằng nó có khả năng duyệt trang (trong khi CSS thì không thể). Với sự phân chia như vậy, thật khó để xác định cách tiếp cận tốt nhất cho bạn và nhóm của bạn

Xin chào Ushma, sự khác biệt chính giữa Bộ chọn XPath và CSS là, với XPath, chúng ta có thể di chuyển cả về phía trước và phía sau trong khi bộ chọn CSS chỉ di chuyển về phía trước. Mặc dù bộ chọn CSS hoạt động tốt hơn nhiều so với Xpath và nó cũng được ghi lại trong cộng đồng Selenium. Nó có những ưu điểm sau so với XPath như. Các công cụ Xpath khác nhau trong mỗi trình duyệt, do đó khiến chúng không nhất quán

Bộ chọn trong CSS có thể là – bộ chọn phần tử;

Bộ chọn là các mẫu khớp với các phần tử trong cây và như vậy tạo thành 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. Truy cập để biết thêm W3. Bộ chọn tổ chức Css

• CSS có nhiều lợi thế hơn Xpath
• CSS nhanh hơn và đơn giản hơn nhiều so với Xpath
• Trong IE Xpath hoạt động rất chậm, trong khi Css hoạt động nhanh hơn khi so sánh với Xpath

Nhấn vào đây để xem ví dụ so sánh với xpath và css

cú pháp

tagName[attributename=attributeValue]
Example 1: input[id=email]
Example 2: input[name=email][type=text]

Trong CSS có hai ký tự đặc biệt có vai trò quan trọng

1. dấu chấm(. ) đề cập đến lớp.
Cú pháp.

css=input.submitbtn

Ví dụ: nếu bên dưới là html cho nút ký

 Log in
 

Trong html trên có nhiều lớp được sử dụng cho một nút duy nhất. Làm việc như thế nào trong tình huống như vậy???
Dưới đây là các ví dụ để làm việc với các lớp. Nếu bạn quan sát, chúng tôi đã kết hợp nhiều lớp để làm việc. Vì lớp không phải là duy nhất như ID, chúng tôi có thể yêu cầu tham gia hai lớp và tìm phần tử chính xác.

Bộ chọn lớp CSS so khớp các phần tử dựa trên nội dung của thuộc tính lớp của chúng. Trong ví dụ dưới đây

css=input.submitbtn

8 là giá trị thuộc tính lớp

Example 1: css=.primary-btn
Example 2: css=.btn.primary-btn
Example 3: css=.submit.primary-btn

Ở trên có thể được viết như dưới đây trong Selenium

WebElement ele1 = driver.findElement(By.cssSelector(".primary-btn"));
WebElement ele2 = driver.findElement(By.cssSelector(".btn.primary-btn"));
WebElement ele3 = driver.findElement(By.cssSelector(".submit.primary-btn"));

Băm (#) đề cập đến Id

Ví dụ

css=input[id=email]

Cái trên có thể được viết lại thành

css=input#destination

Ví dụ về bộ định vị CSS sử dụng thuộc tính ID và Class

/* cú pháp bên dưới sẽ tìm nút thẻ "đầu vào" chứa thuộc tính "id=email" */

css=input[id=email]

Trong selen chúng ta có thể viết nó như

WebElement Email = driver.findElement(By.cssSelector("input[id=email]"));
Email.SendKeys("[email protected]");

Bạn có thể sử dụng Selenium IDE để xác minh xem mã định danh có hoạt động tốt hay không. Nếu phần tử đã được xác định, nó sẽ đánh dấu trường và mã html bằng màu Vàng

Cú pháp dưới đây sẽ tìm thấy thẻ "đầu vào" chứa thuộc tính

css=input.submitbtn

9 và

 Log in
 

0. Một lần nữa ở đây, chúng tôi đã thêm nhiều thuộc tính mà thẻ đầu vào có. Đối với tên người dùng, chúng tôi sẽ có loại văn bản là 'văn bản' và đối với mật khẩu, loại văn bản sẽ là 'mật khẩu'

css=input.submitbtn

2

Dưới đây là cú pháp sử dụng Thẻ đầu vào và thuộc tính lớp. Nó sẽ tìm thẻ đầu vào chứa thuộc tính lớp "submitButton"

css=input.submitbtn

0

Vui lòng tìm ảnh chụp màn hình dưới đây với ví dụ

Sử dụng bộ định vị CSS, chúng ta cũng có thể định vị các phần tử có chuỗi con. Điều này thực sự hữu ích khi có id được tạo động trong trang web

Có các ký tự đặc biệt quan trọng trong bộ chọn css.
1. Ký hiệu '^', đại diện cho văn bản bắt đầu trong một chuỗi.
2. Biểu tượng '$' đại diện cho văn bản kết thúc trong một chuỗi.
3. Ký hiệu '*' biểu thị chứa văn bản trong một chuỗi.

Bộ định vị CSS cho kết quả khớp chuỗi con (Bắt đầu, kết thúc và chứa văn bản) trong Selenium
/*Nó sẽ tìm thấy thẻ đầu vào chứa thuộc tính 'id' bắt đầu bằng văn bản 'ema'. Email bắt đầu bằng 'ema' */

css=input.submitbtn

1

Nếu bạn xóa biểu tượng và cố gắng tìm phần tử có cùng chuỗi con, nó sẽ hiển thị lỗi là "không tìm thấy bộ định vị". Chúng ta có thể quan sát lỗi trong ảnh chụp màn hình bên dưới. một với lỗi và một với thành công

/*Nó sẽ tìm thẻ đầu vào chứa thuộc tính 'id' kết thúc bằng văn bản 'ail'. Email kết thúc bằng 'mail' */

css=input.submitbtn

2

/* Nó sẽ tìm thẻ đầu vào chứa thuộc tính 'id' chứa văn bản 'mai'. Email chứa 'mai' */

css=input.submitbtn

3

Trình định vị phần tử CSS sử dụng Bộ chọn con

/* Đầu tiên nó sẽ tìm thẻ Form theo đường dẫn còn lại để định vị nút con. */

css=input.submitbtn

4

Bộ định vị phần tử CSS sử dụng các bộ chọn liền kề
/* Công cụ này sẽ cố gắng định vị thẻ "đầu vào" nơi có một thẻ "đầu vào" khác trên trang. ví dụ dưới đây sẽ chọn thẻ liền kề đầu vào thứ ba.

css=input.submitbtn

5

Bộ chọn CSS để chọn phần tử đầu tiên

Chúng ta có thể làm điều này theo hai cách. -

Đầu tiên sử dụng

 Log in
 

1 - đại diện cho phần tử đầu tiên trong số các phần tử anh chị em của loại phần tử của nó và

 Log in
 

2 khớp với các phần tử của một loại nhất định, dựa trên vị trí của chúng trong một nhóm các phần tử anh chị em

Hãy để chúng tôi xem một ví dụ về điều này bằng cách sử dụng html

css=input.submitbtn

6

Để chọn phần tử đầu tiên có lớp 'đỏ', bộ chọn css phải là

 Log in
 

3 và sử dụng loại thứ n, css phải là

 Log in
 

4

Bộ chọn CSS để chọn phần tử cuối cùng

Sử dụng bộ chọn

 Log in
 

5, chúng tôi có thể nhắm mục tiêu lần xuất hiện cuối cùng của một phần tử trong vùng chứa của nó. chúng ta hãy xem ví dụ dưới đây với html. -

css=input.submitbtn

7

Trong ví dụ trên, nếu chúng ta muốn chọn ' hello test example3', bộ chọn css phải là

 Log in
 

6

• ‹ Hướng dẫn XPath cho Selenium
• Firefox Not Connected Exception trong Selenium ›

Hướng dẫn Selenium.  

Hướng dẫn Selenium

Thẻ.  

Xpath

css

ví dụ css

Ví dụ Xpath

Bình luận

Đăng bởi Gayatri vào Thứ Ba, 23/09/2014 - 09. 51

Cách xác định hình ảnh trên web bằng bộ chọn css cho dòng html này

Trang chủ chính của trang web thủy ngân và muốn xác thực hình ảnh ngoài cùng bên trái "Chuyến tham quan sao Thủy"

Tôi đã thử với xpath và css, không được. Xin hãy giúp tôi về điều này

• Đáp lại

Được gửi bởi Người xem vào Thứ Sáu, 03/10/2014 - 05. 10

Bạn có thể nhờ sự trợ giúp của thẻ hình ảnh và viết cả css và xpath.
css=img[alt='Mercury Tours'] và
Xpath - //img[@alt='Biểu trưng Facebook']

Hy vọng điều này hoạt động

• Đáp lại

Đăng bởi naresh vào Thứ Ba, 10/04/2016 - 02. 30

ở đây trong ví dụ trên để viết bộ định vị CSS duy nhất, không có tên lớp hoặc ID duy nhất để chúng tôi không thể viết bộ định vị CSS duy nhất, nếu trong trang cụ thể đó chỉ tồn tại một thẻ hình ảnh duy nhất thì bạn có thể viết bộ chọn css làm trình điều khiển. findElement(By. cssSelector(img)); . findElement(By. cssSelector(img[alt~="Chuyến tham quan sao Thủy"]));

• Đáp lại

Đăng bởi Manoj vào Chủ Nhật, 29/07/2018 - 11. 21

Xin chào
Bạn có thể vui lòng giải thích biểu tượng (~) này sẽ làm gì trong css không.

• Đáp lại

Đăng bởi dinesh vào Thứ Ba, 30/09/2014 - 03. 25

làm ơn gửi tất cả các tài liệu

• Đáp lại

Đăng bởi Priya vào Thứ Sáu, 12/12/2014 - 00. 57

Xin chào,
Làm cách nào để lấy css và xpath cho mã html sau đây?

• Đáp lại

Đăng bởi Ravish vào Thứ Hai, 17/10/2016 - 21. 46

Xin chào,
Hãy thử cái này
Dành cho xpath.
//div[@class='validation-summary-errors']/li

• Đáp lại

Đăng bởi Anand vào Thứ Hai, 02/03/2015 - 00. 00

Điều này rất hữu ích với tôi. Cảm ơn bạn

• Đáp lại

Đăng bởi karthi vào Thứ bảy, 06/06/2015 - 02. 48

Đơn giản và Đẹp, PLZ ngày càng đưa ra nhiều ví dụ hơn

• Đáp lại

Đăng bởi Tarun vào Thứ Tư, 27/01/2016 - 23. 58

Cách viết css cho văn bản hiển thị. cho người yêu cũ.
xpath cho sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds'] sẽ là //a[text()='Birds']
Tương tự như vậy, chúng ta có thể làm như thế nào .

• Đáp lại

• 1
• 2
• tiếp theo
• Cuối cùng

Thêm nhận xét mới

Tên của bạn

Vấn đề

Nhận xét *

Thông tin thêm về định dạng văn bản

MÃ NGẪU NHIÊN

Câu hỏi này là để kiểm tra xem bạn có phải là khách truy cập của con người hay không và để ngăn việc gửi thư rác tự động

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

Tại sao CSS Selector nhanh hơn XPath trong Selenium?

Bộ chọn CSS trong Selenium là gì?

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