Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Bộ chọn CSS là gì?

Các bộ chọn CSS trong selen là các mẫu chuỗi được sử dụng để xác định một phần tử dựa trên sự kết hợp của thẻ HTML, ID, lớp và thuộc tính. Việc định vị bởi các bộ chọn CSS trong Selenium phức tạp hơn các phương pháp trước đó, nhưng đây là chiến lược định vị phổ biến nhất của người dùng Selenium tiên tiến vì nó có thể truy cập ngay cả những yếu tố không có ID hoặc tên.

Bộ chọn CSS trong selen có nhiều định dạng, nhưng chúng tôi sẽ chỉ tập trung vào các định dạng phổ biến nhất. Các loại định vị CSS khác nhau trong selenium ide

  • Tag và Id
  • Tag và lớp học
  • Tag và thuộc tính
  • Tag, lớp và thuộc tính
  • Văn bản bên trong

Khi sử dụng chiến lược này, chúng tôi luôn có tiền tố hộp đích với CSS CSS =, như sẽ được hiển thị trong các ví dụ sau.

Tag và ID - Bộ chọn CSS

Một lần nữa, chúng tôi sẽ sử dụng hộp văn bản email Facebook Facebook trong ví dụ này. Như bạn có thể nhớ, nó có một ID của email, và chúng tôi đã truy cập nó trong phần định vị của ID ID. Lần này, chúng tôi sẽ sử dụng bộ chọn Selenium CSS có ID trong việc truy cập vào chính yếu tố đó.

Cú pháp

css=tag#id

  • Tag = thẻ HTML của phần tử đang được truy cập
  • # = dấu băm. Điều này sẽ luôn luôn có mặt khi sử dụng bộ chọn Selenium CSS có ID
  • id = id của phần tử đang được truy cập

Hãy nhớ rằng ID luôn đi trước một dấu hiệu băm (#).

Bước 1. Điều hướng đến www.facebook.com. Sử dụng Firebug, kiểm tra hộp email hoặc hộp văn bản điện thoại. Navigate to www.facebook.com. Using Firebug, examine the “Email or Phone” text box.

Tại thời điểm này, hãy lưu ý rằng thẻ HTML là đầu vào đầu vào và ID của nó là email của email. Vì vậy, cú pháp của chúng tôi sẽ là CSS CSS = Input#Email.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Bước 2. Nhập CSS CSS = Input#Email vào hộp mục tiêu của Selenium IDE và nhấp vào nút Tìm. Selenium IDE sẽ có thể làm nổi bật yếu tố đó.Enter “css=input#email” into the Target box of Selenium IDE and click the Find button. Selenium IDE should be able to highlight that element.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Tag và lớp - Bộ chọn CSS

Bộ chọn CSS trong selen bằng thẻ HTML và tên lớp tương tự như sử dụng thẻ và ID, nhưng trong trường hợp này, một dấu chấm (.) Được sử dụng thay vì dấu băm.

Cú pháp

css=tag.class

  • Tag = thẻ HTML của phần tử đang được truy cập
  • # = dấu băm. Điều này sẽ luôn luôn có mặt khi sử dụng bộ chọn Selenium CSS có ID
  • id = id của phần tử đang được truy cập

Hãy nhớ rằng ID luôn đi trước một dấu hiệu băm (#). Go to the demo page http://demo.guru99.com/test/facebook.html and use Firebug to inspect the “Email or Phone” text box. Notice that its HTML tag is “input” and its class is “inputtext.”

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Bước 1. Điều hướng đến www.facebook.com. Sử dụng Firebug, kiểm tra hộp email hoặc hộp văn bản điện thoại. In Selenium IDE, enter “css=input.inputtext” in the Target box and click Find. Selenium IDE should be able to recognize the Email or Phone text box.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Tại thời điểm này, hãy lưu ý rằng thẻ HTML là đầu vào đầu vào và ID của nó là email của email. Vì vậy, cú pháp của chúng tôi sẽ là CSS CSS = Input#Email.. Using Firebug, inspect the Password text box in Facebook and notice that it has the same name as the Email or Phone text box.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Bước 2. Nhập CSS CSS = Input#Email vào hộp mục tiêu của Selenium IDE và nhấp vào nút Tìm. Selenium IDE sẽ có thể làm nổi bật yếu tố đó.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Tag và lớp - Bộ chọn CSS

Bộ chọn CSS trong selen bằng thẻ HTML và tên lớp tương tự như sử dụng thẻ và ID, nhưng trong trường hợp này, một dấu chấm (.) Được sử dụng thay vì dấu băm.

Cú pháp

css=tag[attribute=value]

  • Tag = thẻ HTML của phần tử đang được truy cập
  • # = dấu băm. Điều này sẽ luôn luôn có mặt khi sử dụng bộ chọn Selenium CSS có ID
  • id = id của phần tử đang được truy cập
  • Hãy nhớ rằng ID luôn đi trước một dấu hiệu băm (#).

Bước 1. Điều hướng đến www.facebook.com. Sử dụng Firebug, kiểm tra hộp email hoặc hộp văn bản điện thoại. Navigate to Mercury Tours’ Registration page http://demo.guru99.com/test/newtours/register.php and inspect the “Last Name” text box. Take note of its HTML tag (“input” in this case) and its name (“lastName”).

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Tại thời điểm này, hãy lưu ý rằng thẻ HTML là đầu vào đầu vào và ID của nó là email của email. Vì vậy, cú pháp của chúng tôi sẽ là CSS CSS = Input#Email. In Selenium IDE, enter “css=input[name=lastName]” in the Target box and click Find. Selenium IDE should be able to access the Last Name box successfully.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Bước 2. Nhập CSS CSS = Input#Email vào hộp mục tiêu của Selenium IDE và nhấp vào nút Tìm. Selenium IDE sẽ có thể làm nổi bật yếu tố đó.. This behavior is similar to locating elements using CSS selectors with the same tag and class.

Tag và lớp - Bộ chọn CSS

Cú pháp

css=tag.class[attribute=value]

  • Tag = thẻ HTML của phần tử đang được truy cập
  • # = dấu băm. Điều này sẽ luôn luôn có mặt khi sử dụng bộ chọn Selenium CSS có ID
  • id = id của phần tử đang được truy cập
  • # = dấu băm. Điều này sẽ luôn luôn có mặt khi sử dụng bộ chọn Selenium CSS có ID
  • id = id của phần tử đang được truy cập
  • Hãy nhớ rằng ID luôn đi trước một dấu hiệu băm (#).

Bước 1. Điều hướng đến www.facebook.com. Sử dụng Firebug, kiểm tra hộp email hoặc hộp văn bản điện thoại. Go to the demo page http://demo.guru99.com/test/facebook.html and use Firebug to inspect the ‘Email or Phone’ and ‘Password’ input boxes. Take note of their HTML tag, class, and attributes. For this example, we will select their ‘tabindex’ attributes.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Tại thời điểm này, hãy lưu ý rằng thẻ HTML là đầu vào đầu vào và ID của nó là email của email. Vì vậy, cú pháp của chúng tôi sẽ là CSS CSS = Input#Email.  We will access the ‘Email or Phone’ text box first. Thus, we will use a tabindex value of 1. Enter “css=input.inputtext[tabindex=1]” in Selenium IDE’s Target box and click Find. The ‘Email or Phone’ input box should be highlighted.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Bước 3. Để truy cập hộp đầu vào mật khẩu, chỉ cần thay thế giá trị của thuộc tính Tabindex. Nhập CSS CSS = input.InputText [Tabindex = 2] trong hộp đích và nhấp vào nút Tìm. Selenium IDE phải có khả năng xác định hộp văn bản mật khẩu thành công.To access the Password input box, simply replace the value of the tabindex attribute. Enter “css=input.inputtext[tabindex=2]” in the Target box and click on the Find button. Selenium IDE must be able to identify the Password text box successfully.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Văn bản bên trong - Bộ chọn CSS

Như bạn có thể nhận thấy, các nhãn HTML hiếm khi được cung cấp ID, tên hoặc thuộc tính lớp. Vì vậy, làm thế nào để chúng ta truy cập chúng? Câu trả lời là thông qua việc sử dụng các văn bản bên trong của họ. Các văn bản bên trong là các mẫu chuỗi thực tế mà nhãn HTML hiển thị trên trang.Inner texts are the actual string patterns that the HTML label shows on the page.

Cú pháp

css=tag:contains("inner text")

  • Tag = thẻ HTML của phần tử đang được truy cập
  • văn bản bên trong = văn bản bên trong của phần tử

Bước 1. Điều hướng đến trang chủ của Mercury Tours http://demo.guru99.com/test/newtours/ và sử dụng Firebug để điều tra nhãn Mật khẩu mật khẩu. Hãy lưu ý thẻ HTML của nó (đó là FONT FONT trong trường hợp này) và nhận thấy rằng nó không có thuộc tính lớp, ID hoặc tên. Navigate to Mercury Tours’ homepage http://demo.guru99.com/test/newtours/ and use Firebug to investigate the “Password” label. Take note of its HTML tag (which is “font” in this case) and notice that it has no class, id, or name attributes.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Bước 2. Loại CSS = Phông chữ: Chứa (mật khẩu mật khẩu: Tiết) vào hộp mục tiêu Selenium IDE và nhấp vào Tìm. Selenium IDE sẽ có thể truy cập nhãn mật khẩu như trong hình ảnh bên dưới.Type css=font:contains(“Password:”) into Selenium IDE’s Target box and click Find. Selenium IDE should be able to access the Password label as shown in the image below.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Bước 3. Lần này, hãy thay thế văn bản bên trong bằng cách Bos Boston, để mục tiêu của bạn giờ sẽ trở thành CSS CSS = phông chữ: Chứa (Hồi Boston Hồi). Nhấp vào Tìm. Bạn nên nhận thấy rằng nhãn của Boston Boston đến San Francisco, trở nên nổi bật. Điều này cho bạn thấy rằng Selenium IDE có thể truy cập một nhãn dài ngay cả khi bạn chỉ chỉ ra từ đầu tiên của văn bản bên trong của nó.This time, replace the inner text with “Boston” so that your Target will now become “css=font:contains(“Boston”)”. Click Find. You should notice that the “Boston to San Francisco” label becomes highlighted. This shows you that Selenium IDE can access a long label even if you just indicated the first word of its inner text.

Hướng dẫn difference between xpath and css guru99 - sự khác biệt giữa xpath và css guru99

Bản tóm tắt

Cú pháp để định vị bằng cách sử dụng bộ chọn CSS

Phương phápCú pháp mục tiêuThí dụ
Tag và IdCSS = Tag#IDCSS = đầu vào#Email
Tag và lớp họcCSS = Tag.ClassCSS = input.InputText
Tag và thuộc tínhcss = tag [thuộc tính = value]css = input [name = lastName]
Tag, lớp và thuộc tínhcss = tag. class [thuộc tính = value]CSS = input.InputText [Tabindex = 1]

Sự khác biệt giữa CSS và XPath 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.

Cái nào tốt hơn để sử dụng CSS hoặc XPath?

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

Tại sao CSS được ưa thích hơn XPath?

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.Dưới đây là một số lý do, động cơ XPath khác nhau trong mỗi trình duyệt, do đó làm cho chúng không nhất quán.IE không có động cơ XPath gốc, do đó Selen đã tiêm động cơ XPath của riêng mình để tương thích API của nó.

Cái nào nhanh hơn CSS hoặc XPath?

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