Hướng dẫn xpath and css selector examples - ví dụ về bộ chọn xpath và css
|
Để thực hiện bất kỳ hoạt động nào trên phần tử như nhấp hoặc nhập vào một phần tử, chúng ta cần xác định vị trí phần tử đó. Rất đơn giản để định vị các phần tử nếu HTML DOM có 'ID' hoặc 'tên' và chúng là những người định vị an toàn nhất để sử dụng. Như chúng ta biết, luôn luôn tốt hơn để sử dụng ID và tên để xác định vị trí các yếu tố sẽ hoạt động chắc chắn. Bạn không cần tìm kiếm bất kỳ trình định vị nào khác nếu có ID hoặc tên duy nhất có trong ứng dụng của bạn. Show Nhưng với các ứng dụng được thiết kế bằng các khung JavaScript hiện đại như Angular, React và Vue.js không có các yếu tố web thích hợp trong DOM. Nó luôn luôn rất quan trọng để làm cho các tập lệnh kiểm tra trở nên mạnh mẽ với các trình định vị đáng tin cậy không phá vỡ cho đến khi những thay đổi được thực hiện. Trong nhiều trường hợp như thế này, chúng tôi phụ thuộc vào các phần tử định vị bởi CSS hoặc XPath. Mặc dù chúng tôi có một số trình cắm trình duyệt để tạo bộ chọn XPath hoặc CSS, nhưng chúng không hữu ích nhiều trong các ứng dụng thời gian thực. Chúng ta hãy tìm các ví dụ XPath để sử dụng ID và tên hiệu quả với các kết hợp Nếu HTML trông giống như dưới đây: Chúng ta có thể sử dụng như dưới đây: Trong XPath chúng ta có thể sử dụng theo những cách khác nhau 1. Với ID: - 2. Với tên - Trong CSS, chúng tôi có thể sử dụng như dưới đây: 1. Với ID - Tất cả các cú pháp trên là đơn giản. Chúng ta có thể trực tiếp sử dụng chúng bằng cách sử dụng ID hoặc tên định vị tên. Xác định phần tử bằng nhiều thuộc tính Ở đây bằng cách sử dụng XPath / CSS, chúng ta có thể kết hợp hai trình định vị khi cần thiết, hãy xem cách chúng ta có thể đạt được. Sử dụng XPath: - Dựa trên chỉ mục, chúng ta có thể xác định đường dẫn là Chúng ta cũng có thể xác định bằng cách sử dụng thuộc tính giá trị Tương tự với CSS Chúng ta cũng có thể xác định XPath với thuộc tính 'kiểu' XPath Cách truy cập các yếu tố trẻ em trực tiếp bằng cách sử dụng XPath Một đứa trẻ trong XPath được đại diện với một "/". Ví dụ XPath cho các yếu tố trẻ em: Cách truy cập các yếu tố con bằng cách sử dụng bộ chọn CSS Trong CSS, đứa trẻ được chỉ định bằng " Và đôi khi, nếu phần tử không phải là con trực tiếp, có thể là phần tử nằm trong một phần tử khác. Trong những trường hợp như vậy, chúng ta có thể sử dụng hai dấu gạch chéo để phù hợp với bất kỳ mã con nào cho XPath. Ví dụ cho XPath là Cách khớp trên văn bản bằng trình định vị CSS và XPath Bây giờ chúng ta hãy xem xét các ví dụ cho 'văn bản'. Khi làm việc với văn bản, chúng ta sẽ có hai kịch bản, một là 'chính xác' và một kịch bản khác là 'chứa'. Như tên mô tả, 'chính xác' sẽ cố gắng tìm khớp chính xác và chứa vẻ ngoài cho nhiều trận đấu. Chúng ta có thể sử dụng như thế này //buttonour/='log trong '] là XPath để tìm ra phần tử chứa chính xác' đăng nhập '. Nếu HTML như dưới đây: Chúng tôi tìm thấy phần tử bằng cách sử dụng XPath là Những điều trên có thể được thực hiện bằng cách sử dụng CSS là Làm việc với liên kết / thẻ neo Các liên kết có thẻ neo, chúng tôi có thể áp dụng giống như chúng tôi đã áp dụng cho 'văn bản', sự khác biệt duy nhất ở đây là chúng tôi nên thêm thẻ neo. Chúng ta chỉ có thể sử dụng dưới dạng 'Link = Quên mật khẩu của bạn?', Sử dụng XPath chúng ta nên sử dụng AS //a [.='forgot Mật khẩu của bạn? ']] Chúng ta cũng có thể chỉ định văn bản một phần của liên kết AS // A [chứa (văn bản (), 'quên')]. Điều này cũng có thể được viết dưới dạng //a [Concontains(..'forgot ')]. Chúng tôi đã thay thế 'text ()' bằng 'dấu chấm'. Trong CSS, chúng tôi viết lại chúng là Một số lần chúng ta có thể cần phải làm việc với các URL với các thuộc tính HREF. XPath cũng có thể được sử dụng thay vì tìm văn bản liên kết Bạn có thể tìm thấy thêm về XPath trong chi tiết hướng dẫn XPath và CSS Bộ chọn XPath và CSS là gì?Về cơ bản, bộ chọn CSS kết hợp bộ chọn phần tử và giá trị bộ chọn có thể xác định các phần tử cụ thể trên trang web.Giống như XPath, bộ chọn CSS có thể được sử dụng để xác định vị trí các phần tử web mà không cần ID, lớp hoặc tên.the CSS Selector combines an element selector and a selector value that can identify particular elements on a web page. Like XPath, CSS selector can be used to locate web elements without ID, class, or Name.
Ví dụ về bộ chọn CSS là gì?Tất cả các bộ chọn đơn giản CSS. Bộ chọn CSS trong selen với ví dụ là gì?Summary. Tôi có thể sử dụng XPath trong CSS không?Chúng tôi tìm thấy phần tử bằng cách sử dụng XPath AS // Div [chứa (Text (), 'Trang web Demo!')] Hoặc // Div [chứa (Text (), 'Trang web Demo!')]css = div: chứa ('trang web demo!')The above can be done using css as css=div:contains('Demo Website!') |
