Hướng dẫn what is the difference between css and xpath selectors? - sự khác biệt giữa bộ chọn css và xpath 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
Bộ chọn XPath và CSS nào tốt hơn trong selen?Ưu điểm và nhược điểm của hiệu suất của bộ chọn CSS là giống nhau 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 lưu lượng đơn hướng. Sử dụng bộ chọn CSS, chúng ta chỉ có thể đi từ cha mẹ sang con nhưng không phải từ trẻ đến cha mẹ, điều này có thể xảy ra với XPath.Performance is the same or faster compared to XPath. Easier to learn than XPath, easier to use. CSS Selector only allows unidirectional flow. Using a CSS Selector, we can only traverse from parent to child but not from the child to parent, which is possible with 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 hay XPath nhanh hơn?Ư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.CSS Selector
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.
Sự khác biệt giữa bộ chọn CSS là gì?và băm (#) 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. ID Selector (Hồi##): Trình chọn ID chọn thuộc tính ID của phần tử HTML để chọn một phần tử cụ thể.CSS selectors select HTML elements according to its id, class, type, attribute, etc. Id selector(“#”): The id selector selects the id attribute of an HTML element to select a specific element. |