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

Bộ định vị trong Selenium là một trong những lệnh mạnh nhất. Lý tưởng nhất là khối xây dựng của các tập lệnh tự động hóa Selenium. Nó giúp xác định vị trí các thành phần GUI thông qua đó có thể thực hiện nhiều hành động của người dùng

• TÔI
• Tên
• Văn bản liên kết
• Văn bản liên kết một phần
• Tên thẻ
• Tên lớp
• Bộ chọn CSS
• Xpath

Sử dụng các bộ định vị trên trong Selenium WebDriver, bạn có thể định vị các phần tử thông qua cú pháp “findElement/findElements”

1. Trình định vị ID

ID là tùy chọn định vị nhanh nhất, an toàn nhất và phải luôn là lựa chọn đầu tiên của bạn. ID được coi là duy nhất cho từng phần tử. Trình định vị ID nhanh hơn vì gốc của nó, nó gọi tài liệu. getElementById() được nhiều trình duyệt tối ưu hóa rất nhiều. Ngay cả ID cũng giúp tìm phần tử web duy nhất

2. Định vị tên

Công cụ định vị tên xuất hiện sau ID. Nếu phần tử web nào chưa có thuộc tính ID, chúng ta có thể sử dụng thuộc tính tên nếu có. Tên không thể là duy nhất mọi lúc. Nếu có nhiều tên, Selenium sẽ luôn thực hiện hành động trên phần tử khớp đầu tiên

3. Trình định vị văn bản liên kết

Nó chủ yếu dựa trên tình hình. Việc truy cập các liên kết bằng cách sử dụng văn bản liên kết chính xác của chúng được thực hiện thông qua By. phương thức linkText(). Tuy nhiên, nếu có hai liên kết có văn bản liên kết rất giống nhau thì Selenium sẽ thực hiện hành động trên phần tử khớp đầu tiên với liên kết

4. Bộ định vị văn bản liên kết một phần

Nó chủ yếu dựa trên tình hình. Truy cập các liên kết bằng cách sử dụng một phần văn bản liên kết của chúng được thực hiện bằng cách sử dụng By. một phầnLinkText() phương pháp. Nếu bạn chỉ định một phần văn bản liên kết có nhiều kết quả phù hợp, thì chỉ kết quả phù hợp đầu tiên mới được truy cập

5. Trình định vị tên thẻ

Nó chủ yếu dựa trên tình hình. Tên thẻ là một phần của cấu trúc DOM trong đó mọi thành phần trên trang được xác định thông qua thẻ như thẻ đầu vào, thẻ nút, thẻ neo, v.v. Mỗi thẻ có nhiều thuộc tính như ID, tên, lớp giá trị, v.v.

6. Trình định vị tên lớp

Nó chủ yếu dựa trên tình hình. Trình định vị tên lớp giúp định vị phần tử được xác định thông qua thuộc tính lớp. Thuộc tính lớp không cần phải là duy nhất như id

7. Bộ định vị CSSSelector

Bộ chọn CSS là tùy chọn tốt nhất nếu phần tử web không có ID và tên. CSS nhanh hơn XPath. CSS dễ đọc hơn XPath. Nó cũng cải thiện hiệu suất. Nó rất tương thích trên các trình duyệt. Nó rất hữu ích khi chúng tôi muốn thử nghiệm ứng dụng của mình trên nhiều trình duyệt vì công cụ CSS nhất quán trong tất cả các trình duyệt. CSS là tốt nhất cho IE vì XPath không phải lúc nào cũng hoạt động trong IE

8. Trình định vị XPath

Xác định vị trí một phần tử bằng cách sử dụng biểu thức XPath. Nó là chậm nhất trong số tất cả các bộ định vị. Nhưng nó cung cấp cho bạn những cách đáng tin cậy để định vị các phần tử web. 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 giữa các trình duyệt. Điều đó có nghĩa là nếu bạn viết XPath cho ứng dụng của mình trong trình duyệt Chrome, nó có thể không hoạt động trên IE

Trong ảnh chụp màn hình trước, bạn có thể thấy hai tùy chọn cho XPath – XPath và Full XPath. Phần trước đã trình bày cách tạo một XPath đầy đủ.  

Nếu XPath được chọn thay vì XPath đầy đủ trong ví dụ trên, thì XPath mà chúng tôi nhận được như sau

Vì vậy, có gì sai với Full XPath? . Điều này sẽ không luôn luôn như vậy, mặc dù. Ví dụ: nếu cùng một phương pháp được thực hiện để tạo XPath đầy đủ cho mục lục của bất kỳ trang Wikipedia nào, thì XPath đầy đủ sẽ giống như thế này

/html/body/div[3]/div[3]/div[5]/div[1]/div[2]/ul/li[1]/a/span[2]

Có ba vấn đề chính với XPath này

1. Nó không thể đọc được và không thể bảo trì

2. Nó quá cứng nhắc. Ngay cả khi chỉ có một thay đổi nhỏ, chẳng hạn như biểu ngữ thông tin bổ sung ở đầu trang, XPath này sẽ bị hỏng

3. XPath đầy đủ sẽ đi qua từng nút và làm cho nó chậm lại

Đó là lý do tại sao chúng ta cần tìm hiểu XPath ngắn hơn, nhanh hơn và dễ đọc hơn. Hãy bắt đầu với khối xây dựng đầu tiên – ký tự gạch chéo. Trong khi một dấu gạch chéo đơn chọn nút con, thì dấu gạch chéo kép chọn tất cả các nút phù hợp, bất kể chúng ở đâu trong tài liệu

Ví dụ: để tìm tất cả các thẻ trong tài liệu, biểu thức XPath sẽ như sau

Tương tự, để tìm tất cả các

các thẻ, XPath sẽ như sauTrong tài liệu1. html đang được thảo luận, chỉ có một

nhãn. Điều này có nghĩa là XPath mà chúng ta đã tạo trước đó, /html/body/h2 có thể đơn giản là //h2. Khối xây dựng tiếp theo là dấu hoa thị. Ký tự này được sử dụng như một thẻ đại diện sẽ khớp với mọi phần tử. Ví dụ, nếu chúng ta muốn lấy danh sách tất cả các phần tử là con của mộtphần tử, không có dấu hoa thị, XPath sẽ như sauTương tự, để chọn tất cả cáccác phần tử là con của, chúng ta có thể sử dụng XPath nàyTuy nhiên, nếu chúng ta muốn chọn tất cả các phần tử là con của mộtphần tử, chúng ta có thể sử dụng dấu hoa thị. XPath sẽ như sauBạn nên sử dụng cái này vì nó có thể khớp với nhiều phần tử nếu các điều kiện khác không được thêm vào. Các điều kiện này được thêm vào bằng cách sử dụng dấu ngoặc vuông và được gọi là vị ngữVị ngữ trong XPath

Vị ngữ được viết trong ngoặc vuông. Ở dạng đơn giản nhất, đây chỉ là một con số

Ví dụ: XPath sau sẽ khớp với hai thẻ neo

Nếu chúng ta thêm một số trong dấu ngoặc vuông, chúng ta có thể chỉ định phần tử nào sẽ chọn. Ví dụ bạn muốn chọn thẻ anchor đầu tiên thì XPath sẽ như sau

Lưu ý rằng nút đầu tiên là 1, không phải 0, giống như trong hầu hết các ngôn ngữ lập trình

Chúng ta cũng có thể sử dụng các hàm trong ngoặc vuông. Ví dụ: để lấy thẻ cuối cùng, chúng ta có thể viết XPath này

Còn nhiều chức năng nữa sẽ được đề cập ngay sau đây. Trước đó, chúng ta sẽ xem cách lấy văn bản từ các phần tử

Lấy văn bản từ các phần tử

XPath //h2 trả về phần tử. Hãy xem cách chúng ta có thể trích xuất văn bản, hay nói cách khác, một giá trị nguyên tử từ các phần tử.  

Văn bản thường được chứa giữa phần mở đầu và phần kết thúc. Ví dụ

Welcome to XPath

Để trích xuất văn bản này, có thể sử dụng hàm XPath text(). Ví dụ: XPath sau đây sẽ trả về văn bản bên trong phần tử h2

Để trích xuất giá trị của bất kỳ thuộc tính nào, hãy sử dụng ký hiệu @ với tên thuộc tính. Ví dụ: hãy xem xét thẻ neo này

Visit our Blog

Để trích xuất giá trị của thuộc tính href, hãy sử dụng @href trong XPath

Điều này sẽ nhận được văn bản https. //oxylabs. io/blog

Chúng ta cũng có thể sử dụng các bộ chọn thuộc tính trong các vị từ XPath. Ví dụ, XPath này sẽ chọn tất cả

các phần tử trong đó giá trị của thuộc tính id là tiêu đề. \

Nếu bạn muốn tìm một phần tử chứa văn bản cụ thể, bạn có thể tìm kiếm bằng cách sử dụng hàm text() trong ngoặc vuông

Lưu ý rằng điều này sẽ tìm kiếm một trận đấu hoàn chỉnh. Nếu bạn muốn tìm một phần khớp, hãy sử dụng chức năng chứa. Chức năng này sẽ là tiêu chí quan trọng giúp bạn quyết định giữa XPath và CSS

Đây là tất cả về những điều cơ bản của XPath. Trong phần tiếp theo, bạn sẽ tìm hiểu lĩnh vực chính mà XPath thực sự mạnh mẽ

Ưu điểm của việc sử dụng XPath

Khi làm việc với bất kỳ HTML hoặc DOM nào, có thể có ba trục chính. Đây là tổ tiên, con cháu và anh chị em ruột. Mặc dù có thể chọn anh chị em và con cháu bằng CSS, nhưng chỉ XPath mới có khả năng đi lên tổ tiên

Lấy ví dụ này

   Oxylabs

Trong ví dụ này, nếu chúng ta phải trích xuất giá trị của thuộc tính href của thẻ, chúng ta có thể xác định vị trí thẻ span và đi lên một cấp để tìm thẻ

Lưu ý việc sử dụng. để đi lên một cấp. Điều này là không thể khi sử dụng Bộ chọn CSS

Hơn nữa, để khớp một phần, CSS có. chứa toán tử nhưng hiện đã không được dùng nữa. Nó có thể hoạt động với một vài công cụ cụ thể nhưng sự hỗ trợ không được đảm bảo

Mặt khác, hàm XPath contains() được hỗ trợ phổ biến. Tóm lại, nếu bạn muốn duyệt qua DOM, XPath là lựa chọn duy nhất của bạn. Nếu bạn muốn thực hiện khớp một phần, một lần nữa, XPath có thể là lựa chọn duy nhất của bạn

Bộ chọn CSS là gì?

Bộ chọn CSS là phần đầu tiên của quy tắc CSS. CSS là một tập hợp các thành phần và quy tắc thông báo cho trình duyệt biết phần tử HTML nào phải được định vị và áp dụng với các thuộc tính CSS

HTML hiếm khi được cung cấp mà không có CSS ​​hoặc Cascading Style Sheet. Nếu có nhu cầu thay đổi giao diện của bất kỳ thành phần HTML nào, cách phổ biến nhất để làm điều đó là áp dụng một kiểu cho nó – có thể đơn giản như thay đổi màu văn bản hoặc có thể phức tạp hơn nếu bạn đang sử dụng hoạt ảnh

Trong cả hai trường hợp, bước đầu tiên sẽ là xác định vị trí phần tử. Khi một phần tử được định vị, các kiểu có thể được áp dụng bằng CSS. Để xác định vị trí các phần tử, bộ chọn CSS được sử dụng. Bộ chọn CSS được phát triển vì những lý do hoàn toàn khác nhau, nhưng chúng phục vụ cùng một mục đích – chọn phần tử

Bây giờ bạn đã có ý tưởng về bộ chọn XPath và CSS là gì, chúng ta sẽ xem cách XPath và CSS được tạo ra và khi nào bạn nên sử dụng cái này thay vì cái kia

Làm cách nào để tạo bộ chọn CSS?

Bắt đầu với bộ chọn CSS rất dễ dàng. Bộ chọn CSS có thể sử dụng tên thẻ, id, lớp (giả) hoặc thuộc tính. Xem xét yếu tố này

XPath vs CSS

Dưới đây là một số ví dụ về bộ chọn CSS cho thẻ này

• h2 – Chọn theo tên phần tử. Thẻ đại diện là *

• #header – Sử dụng # để chỉ định id

• ưa thích - Sử dụng một khoảng thời gian để chỉ định lớp

• [name="ctrl"] – Sử dụng bất kỳ thuộc tính nào trong ngoặc vuông

Chúng có thể được kết hợp quá. Ví dụ

h2#header chọn

các phần tử có id làm tiêu đềĐể chọn con, toán tử > được sử dụng. Để chọn anh chị em đầu tiên + toán tử được sử dụng. Để chọn tất cả anh chị em, ~ được sử dụng. Dưới đây là một vài ví dụdiv > a – chọn các phần tử là con củadiv a – chọn các phần tử là hậu duệ của div + a – chọn phần tử đầu tiên sau adiv ~ a – Chọn tất cả các phần tử sau aNếu bạn biết những điều này, bạn sẽ có thể xử lý hầu hết các tình huống

Ưu điểm của việc sử dụng Bộ chọn CSS

Điều tốt nhất về bộ chọn CSS là chúng dễ học và dễ bảo trì

Bộ chọn CSS được hỗ trợ bởi tất cả các thư viện kiểm tra và quét web – Selenium, Beautiful Soup (Python), Scrapy (Python), Cheerio (JavaScript) và Puppeteer (JavaScript)

Lưu ý rằng Beautiful Soup không hỗ trợ XPath. CSS Selector là lựa chọn duy nhất trong trường hợp này

Các trình duyệt cũ hơn như Internet Explorer không hỗ trợ CSS đầy đủ. Tuy nhiên, hiện nay, trình duyệt hỗ trợ đầy đủ Bộ chọn CSS;

Bộ chọn CSS cũng nhanh hơn XPath. Tuy nhiên, lưu ý rằng sự khác biệt rất nhỏ nên nó hoàn toàn không quan trọng trong thế giới thực

So sánh CSS với XPath

Quyết định giữa XPath và CSS có thể giống như một nhiệm vụ khó khăn. Hãy xem bảng dưới đây để so sánh

CSS có nhanh hơn XPath không?

CSS nhanh hơn XPath bao nhiêu?

Tại sao XPath được ưu tiên hơn CSS?

Công cụ định vị nào nhanh nhất trong Selenium?