Hướng dẫn what is the difference between xpath and css selectors? - sự khác biệt 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ố.

Có một số khác biệt giữa XPath và CSS được liệt kê dưới đây -

  • 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.

  • XPath cho phép nhận dạng với sự trợ giúp của văn bản có thể nhìn thấy xuất hiện trên màn hình với chức năng trợ giúp của văn bản (). CSS không có tính năng này.

  • CSS tùy chỉnh có thể được tạo trực tiếp với sự trợ giúp của ID và lớp thuộc tính. Đối với ID, biểu thức CSS được biểu thị bằng # theo sau là ID [ #. Đối với lớp, biểu thức CSS được đại diện bởi. tiếp theo là lớp [.]. XPath không có bất kỳ tính năng như thế này.

  • Biểu thức XPath được biểu thị bằng [// tagName [@Attribution = 'value']. Biểu thức CSS là đàn áp được biểu thị bằng [tagName [usult = 'value'].

  • Có hai loại XPath - Tuyệt đối và tương đối. Nhưng CSS không có loại như vậ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()

Hướng dẫn what is the difference between xpath and css selectors? - sự khác biệt giữa bộ chọn xpath và css là gì?

Cập nhật vào ngày 29 tháng 1-2020 07:38:10

  • Câu hỏi và câu trả lời liên quan
  • Sự khác biệt giữa readline () và readlines () trong selen với python là gì?
  • Sự khác biệt chính giữa bộ chọn XPath và CSS trong selenium là gì?
  • Sự khác biệt giữa sự chờ đợi ngầm và rõ ràng trong selen với Python là gì?
  • Sự khác biệt giữa các phương thức đóng () và thoát () trong selen với python là gì?
  • Sự khác biệt giữa các phương thức switch_to_default_content () và switch_to.parent_frame () trong selenium với python là gì?
  • Sự khác biệt giữa các phương thức current_window_handle và window_handles trong selenium với python là gì?
  • Xpath trong selen với python là gì?
  • Sự khác biệt giữa Xpath tương đối và tuyệt đối trong selenium là gì?
  • Xpath trong selen là gì?
  • Sự khác biệt giữa các mô -đun Python của JSON và SimpleJson là gì?
  • Sự khác biệt giữa selen và dưa chuột
  • Sự khác biệt và điểm tương đồng giữa các bộ dữ liệu và danh sách trong Python là gì?
  • Sự khác biệt giữa hình ba chiều và nhiếp ảnh là gì?
  • Sự khác biệt giữa C ++ và Java là gì?
  • Sự khác biệt giữa C và Java là gì?


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

Cú pháp

WebElement m = driver.findElement(By.xpath("//div[@class = 'loc']"));
WebElement n = driver.findElement(By.cssSelector("div[class = 'loc']"));

Thí dụ

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();
   }
}

Đầu ra

Hướng dẫn what is the difference between xpath and css selectors? - sự khác biệt giữa bộ chọn xpath và css là gì?

Hướng dẫn what is the difference between xpath and css selectors? - sự khác biệt giữa bộ chọn xpath và css là gì?

Cập nhật vào ngày 06 tháng 4 năm 2021 10:57:45

  • Câu hỏi và câu trả lời liên quan
  • Sự khác biệt giữa Xpath tương đối và tuyệt đối trong selenium là gì?
  • Sự khác biệt giữa jQuery (bộ chọn) và $ (bộ chọn) là gì?
  • Sự khác biệt giữa XPath và CSS trong selen với Python là gì?
  • Sự khác biệt giữa selen và tự động hóa là gì?
  • Sự khác biệt giữa mocha và selenium là gì?
  • Xpath trong selen là gì?
  • Sự khác biệt giữa khóa chính MySQL và ràng buộc duy nhất là gì?
  • Sự khác biệt giữa selenium webdriver và testng là gì?
  • Sự khác biệt giữa Selenium RC và WebDriver là gì?
  • Sự khác biệt giữa getWindowHandle () và getWindowHandles () trong selenium là gì?
  • Sự khác biệt giữa selen 2 và selen 3 là gì?
  • Sự khác biệt giữa selen 1 và selen 2 là gì
  • Xpath trong selen với python là gì?
  • Sự khác biệt giữa "." và bộ chọn "#" trong CSS
  • Sự khác biệt giữa Assert và xác minh trong selenium là gì?

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

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.css is better and faster, while xpath is on a slower side.

Bộ chọn XPath hoặc CSS tốt hơn là gì?

Ư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.

Tại sao chúng ta thích XPath hơn bộ chọn CSS?

Ưu điểm của việc sử dụng XPath XPath cho phép bạn điều hướng DOM khi tìm kiếm các phần tử để kiểm tra hoặc cạo.Nó tương thích với các trình duyệt cũ (hoặc tại thời điểm xuất bản, bao gồm các phiên bản cũ hơn của Internet Explorer, mà một số tập đoàn vẫn sử dụng).Tạo trong XPath linh hoạt hơn trong bộ chọn CSS.XPath allows you to navigate up the DOM when looking for elements to test or scrape. It's compatible with old browsers (or it was at time of publishing—including older versions of Internet Explorer, which some corporations still use). Creating in XPath is more flexible than in CSS Selector.

Điều gì phân biệt XPath với các bộ chọn CSS về khả năng?

Xin chào Ushma, sự khác biệt chính giữa các bộ chọn XPath và CSS là, với XPath, chúng ta có thể đi qua cả về phía trước và lùi trong khi bộ chọn CSS chỉ di chuyển về phía trước.Mặc dù các bộ chọn CSS hoạt động tốt hơn nhiều so với XPath và nó được ghi nhận rõ ràng trong cộng đồng Selenium.with the XPath we can traverse both forward and backward whereas CSS selector only moves forward. Although CSS selectors perform far better than Xpath and it is well documented in Selenium community.