Hướng dẫn what is the main difference between xpath and css selectors? - Sự khác biệt chính giữa bộ chọn xpath và css là gì?
Cả XPath và CSS đều là một trong những người định vị được sử dụng thường xuyên nhất trong selen. Mặc dù có các trình định vị khác như ID, tên, ClassName, TagName và văn bản liên kết, v.v., XPath và CSS được sử dụng khi không có thuộc tính duy nhất nào có sẵn để xác định các yếu tố. Show
Có một số khác biệt giữa XPath và CSS được liệt kê dưới đây -
Thí dụThực hiện mã với CSS. from selenium import webdriver #browser exposes an executable file #Through Selenium test we will invoke the executable file which will then #invoke actual browser driver = webdriver.Chrome(executable_path="C:\chromedriver.exe") # to maximize the browser window driver.maximize_window() #get method to launch the URL driver.get("https://www.tutorialspoint.com/index.htm") #to refresh the browser driver.refresh() # identifying the edit box with the help of css driver. find_element_by_css_selector("input[class='gsc-input']"). send_keys("Selenium") #to close the browser driver.close() Thực hiện mã với XPath from selenium import webdriver #browser exposes an executable file #Through Selenium test we will invoke the executable file which will then #invoke actual browser driver = webdriver.Chrome(executable_path="C:\chromedriver.exe") # to maximize the browser window driver.maximize_window() #get method to launch the URL driver.get("https://www.tutorialspoint.com/index.htm") #to refresh the browser driver.refresh() # identifying the edit box with the help of xpath driver. find_element_by_xpath("//input[@class='gsc-input']"). send_keys("Selenium") #to close the browser driver.close()
Cập nhật vào ngày 29 tháng 1-2020 07:38:10
Có một số khác biệt giữa bộ chọn XPath và CSS. Định dạng của XPath là // TagName [@Aperty = 'value'] trong khi định dạng của bộ chọn CSS là TagName [thuộc tính = 'value']. Chúng ta có thể đi qua cả về phía trước và lùi trong DOM, tức là chúng ta có thể chuyển từ cha mẹ sang phần tử con và từ con cái sang phần tử cha với XPath. Tuy nhiên, đối với CSS, chúng ta chỉ có thể đi qua từ cha mẹ sang con chứ không phải ngược lại. Về hiệu suất, CSS tốt hơn và nhanh hơn, trong khi XPath ở phía chậm hơn. Một XPath có thể có hai loại - tuyệt đối bắt đầu từ nút gốc và tương đối không cần phải bắt đầu từ gốc. Để đi qua phần tử thứ n, chúng ta phải đề cập đến [n] trong XPath, trong đó n là số chỉ mục. Đối với CSS, chúng ta phải đề cập đến loại thứ hai (N). Ví dụ, để có được đứa con Li thứ hai của cha mẹ UL, biểu thức CSS sẽ là ul li: nth-of-type (2). Trong khi XPath sẽ là ul/li [2]. Chúng ta có thể tạo một XPath với sự trợ giúp của văn bản có thể nhìn thấy trên phần tử bằng cách sử dụng hàm văn bản () trang. Tính năng này không có sẵn trong CSS. Chúng ta có hàm khởi động với () trong XPath được sử dụng để xác định một phần tử có giá trị thuộc tính bắt đầu bằng một văn bản cụ thể. Để đối phó với một kịch bản tương tự trong CSS, chúng ta phải sử dụng ký hiệu ^=. Ví dụ trong CSS, in css, input[title^='qa'] Ví dụ trong XPath, in xpath, //input[starts-with(@title, 'qa')]. [Ở đây đầu vào là tên thẻ và giá trị của thuộc tính tiêu đề bắt đầu bằng QA]. Chúng ta có hàm chứa () trong XPath được sử dụng để xác định một phần tử có giá trị thuộc tính chứa một văn bản một phần. Để đối phó với một kịch bản tương tự trong CSS, chúng tôi sử dụng biểu tượng *= ký hiệu Ví dụ trong CSS, in css, input[title*='nam'] Ví dụ trong XPath, in xpath, //input[contains(@title, 'nam')].
//input[starts-with(@title, 'qa')]. [Ở đây đầu vào là tên thẻ và giá trị của thuộc tính tiêu đề bắt đầu bằng QA]. Chúng ta có hàm chứa () trong XPath được sử dụng để xác định một phần tử có giá trị thuộc tính chứa một văn bản một phần. Để đối phó với một kịch bản tương tự trong CSS, chúng tôi sử dụng biểu tượng *= ký hiệu [Ở đây đầu vào là tên thẻ và giá trị của thuộc tính tiêu đề chứa NAM].WebElement m = driver.findElement(By.xpath("//div[@class = 'loc']")); WebElement n = driver.findElement(By.cssSelector("div[class = 'loc']")); Với ID thuộc tính, biểu thức CSS phải là TagName#ID. Ví dụ: đầu vào#loc [ở đây đầu vào là tên tagname và loc là giá trị của thuộc tính ID]. Quy tắc này không áp dụng cho XPath.import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import java.util.concurrent.TimeUnit; public class LocatorXpathvsCss{ public static void main(String[] args) { System.setProperty("webdriver.gecko.driver", "C:\Users\ghs6kor\Desktop\Java\geckodriver.exe"); WebDriver driver = new FirefoxDriver(); //implicit wait driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS); //URL launch driver.get("https://www.tutorialspoint.com/online_dev_tools.htm"); // identify element with xpath WebElement m=driver.findElement(By.xpath("//span[@class = 'cat-title']")); String str = m.getText(); // identify element with css WebElement n=driver. findElement(By.cssSelector("div.cat-punch-line span")); String s = n.getText(); System.out.println("Text obtained from xpath : " + str); System.out.println("Text obtained from css : " + s); driver.quit(); } } Với lớp thuộc tính, biểu thức CSS phải là TagName.Class giá trị thuộc tính. Ví dụ: input.xt [ở đây đầu vào là tên tagname và XT là giá trị của thuộc tính lớp]. Quy tắc này không áp dụng cho XPath.
Cú pháp
Sự khác biệt giữa các bộ chọn CSS và XPath là gì?XPath cho phép dòng chảy hai chiều, điều đó có nghĩa là cả hai cách có thể là cả hai cách từ cha mẹ đến con và con đến cha mẹ. CSS chỉ cho phép một luồng định hướng có nghĩa là 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.
Các bộ chọn CSS và định vị XPath có giống nhau trong selenium ide không?Không có sự khác biệt!Đây là hai từ cho cùng một.Thông thường khi nói đến CSS, chúng tôi bắt đầu giải quyết các trình định vị dưới dạng bộ chọn CSS.Nhưng bộ chọn CSS cũng là người định vị.! These are two words for the same. Typically when it comes to CSS, we start addressing the locators as CSS selectors. But CSS selectors are also locators.
Bộ chọn CSS có nhanh hơn XPath không?Ưu điểm của việc sử dụng bộ chọn CSS, nó nhanh hơn XPath.Nó dễ dàng hơn nhiều để học và thực hiện.Bạn có cơ hội tìm thấy các yếu tố của bạn cao.Nó tương thích với hầu hết các trình duyệt cho đến nay.It's faster than XPath. It's much easier to learn and implement. You have a high chance of finding your elements. It's compatible with most browsers to date.
Tại sao XPath được ưa thích hơn CSS?Bộ chọn CSS là các mẫu được sử dụng để chọn (các) phần tử được tạo kiểu.XPath, Ngôn ngữ đường dẫn XML, là ngôn ngữ truy vấn để chọn các nút từ tài liệu XML.Định vị các yếu tố với XPath hoạt động rất tốt với rất nhiều sự linh hoạt.XPath sử dụng các biểu thức đường dẫn để điều hướng qua các phần tử và thuộc tính trong tài liệu XML. |