/ / / SELENIUM Bài 3: HTML Locator

SELENIUM Bài 3: HTML Locator

, Sửa

 

 I. HTML Locator là gì ?

Locator là cách xác định phần tử HTML trên web, giúp phân biệt được các phần tử UI trên website chúng ta cần test.

II. Các loại HTML Locator.

Có tổng cộng 8 loại locator:

  • Id
  • Name
  • Identifier 
  • Link Text
  • DOM 
  • CSS Selector 
  • XPath 
  • UI-element
Tuy nhiên trong bài viết này chúng ta chỉ để cập đến HTML Locator hay dùng đó là ID, Name, Identifier, Link Text, CSS Selector, Xpatch. Những cái còn lại các bạn có thể tìm hiểu thêm trên internet.


Hình 1: Các loại HTML Locator trong Selenium

1. Tìm theo Id.

Cách lấy Locator sử dụng ID dường như là cách làm đơn giản và thuận tiện nhất.

Hình 2: Id của element

    • Ưu điểm: Tìm theo Id rất là nhanh và đơn giản và  Id này là duy nhất, không sợ bị trùng lặp.
    • Nhược điểm: Không phải element nào cũng có Id.
    Lưu ý: Nếu trang nào định hướng cho chạy Automation Test thì Id của các element rất đầy đủ.

    2. Tìm theo Name.

    Thuộc tính Name cũng gần giống với ID. Mỗi phần tử trên trang web thường sẽ được gắn cho 1 cái tên.

    Hình 3: Name của element
    • Ưu điểm: Tìm theo name đơn giản và nhanh
    • Nhược điểm: 
            - Nhược điểm đầu tiên: khác với Id,  Name có thể bị trùng, cho nên khi tìm kiếm bằng name, kết              quả trả về sẽ có nhiều element có chung 1 name.  
            - Nhược điểm thứ hai:  đó là không phải element nào cũng có name để tìm theo name.

    3. Tìm theo Identifier.

    Có một số tool hỗ trợ tìm theo Identifier thì đó chính là tìm theo cả Id và Name, lúc này Tool nó sẽ tìm sẽ tìm theo Id hoặc name, nếu có thì tool sẽ tìm ra.

    4. Tìm theo Link Text.

    Link text là tìm kiếm các phần tử dạng link trên trang web dựa vào nội dung hiển thị của link đó. Các phần tử dạng link là các thẻ <a> trên trang html.

    Hình 4. Text của Link
    • Ưu điểm: Hữu ích khi chúng ta test điều hướng.
    • Nhược điểm: Chỉ tìm được  tới các thẻ <a> thôi còn các thẻ khác không tìm được, phải biết được text của link trước khi tìm.

    5. Tìm theo CSS Selector.

    Dựa vào đường dẫn CSS hoặc kết hợp nhiều CSS với nhau. Chúng ta có thể xác định được duy nhất hoặc nhiều phần tử element. 


    a. Tìm theo ClassName

    Cú pháp: .className
    Hình 5. Class name


    Ví dụ: <input type = "submit" class ="button" value ="Login">==$0
    Chúng ta thấy cái button login này là thẻ input có class là button, chúng ta có thể tìm đến cái element nào có class là "button" bằng cách là .button, nó sẽ trả về toàn bộ các class là button

    Một element có thể có nhiều class, nó cách nhau bởi 1 dấu cách trong element đấy, khi tìm các element đấy chúng ta có thể dùng cú pháp sau:

    .name1.name2:  Tìm element có cả class name1 và class name2
    .name1.<Dấu cách>.name2: Tìm element có class là name1, sau đó tìm tiếp element có class là name2 năm bên trong class name1, nằm bên trong ở đây có thể là con hoặc là cháu của element đấy.

    Hình 6. Ví dụ về class name
    Ví dụ ở đây cái element input là con của element span, element span lại là con cùa element div, element input đối với element div nó được coi là cháu của element div.
    Nếu chúng ta dùng .field-container.autofocus thì nó sẽ tìm đến các element có class là .field-container
    sau đó tìm đến element có thuộc tính là autofocus nó nằm trong cái thẻ div này.

    b. Tìm theo ID.

    Cú pháp:  #Tên ID

    c. Một số cú pháp đặc biệt.

    Dưới đây bảng tổng hợp các selector, tuy nhiên không phải cái nào chúng ta cũng dùng, các bạn có thể đọc tham khảo qua cho biết, những dòng in đệm là những cái thường dùng
    Giải thích từ khóa:
    Element: Thành phần
    Attribute: Thuộc tính


    Để tìm được một element chúng ta phải kết hợp nhiều syntax lại với nhau chứ hầu như không thể dùng một syntax nhỏ ở bên trên.

    6. Tìm theo Xpath.

    a. Ví dụ về một trang XML

    Một trang HTML có định dạng XML, nên có thể dùng Xpath để truy xuất đến các phần tử trên trang HTML.

    Mỗi phần tử trên trang HTML sẽ có rất nhiều đường dẫn trỏ đến nó. Để tìm hiểu sâu hơn về Xpath syntax, tham khảo link: https://www.w3schools.com/xml/xpath_syntax.asp

    Hình 7. Ví dụ về một trang XML

    b. Cách chọn các Node

    XPath sử dụng các biểu thức đường dẫn để chọn các Node trong XML. Node được chọn bằng cách đi theo một đường dẫn hoặc các bước. Các biểu thức đường dẫn hay dùng và hữu ích nhất được liệt kê dưới đây:

    Chúng ta có thể tìm theo phương pháp hồi quy, tìm đến cha của các node, đây là điểm mạnh của Xpath mà CSS Selector không có được. Dùng trong trường hợp tìm đến node không có gì đặc biệt, chúng ta có thể tìm đến các node anh em, rồi tìm đến node cha, rồi tìm đến node muốn tìm.

    Trong bảng dưới đây, đã liệt kê một số biểu thức đường dẫn và kết quả của các biểu thức:

    c. Predicates(Dự đoán)

    Dự đoán được sử dụng để tìm một nút cụ thể hoặc một nút có chứa một giá trị cụ thể.

    Dự đoán luôn được nhúng trong dấu ngoặc vuông.

    Trong bảng dưới đây, đã liệt kê một số biểu thức đường dẫn với các dự đoán và kết quả của các biểu thức:

    d. Lựa chọn những Node không xác định

    Các XPath wildcards có thể được sử dụng để chọn các nút XML không xác định.


    Trong bảng dưới đây, đã liệt kê một số biểu thức đường dẫn và kết quả của các biểu thức:

    e. Chọn một số đường dẫn

    Bằng cách sử dụng | trong một biểu thức XPath, có thể chọn một số đường dẫn.
    Trong bảng dưới đây, đã liệt kê một số biểu thức đường dẫn và kết quả của các biểu thức:


    f. Một số syntax cần lưu ý khi sử dụng Xpath:

    Sử dụng thuộc tính @

    Sử dụng @ để khai báo các attribute của phần tử element. Bạn xem ví dụ sau để hiểu về cách sử dụng @ như thế nào

    <input placeholder="Search User" value="" class="sb__input">

    Ở đây là 1 thẻ input có thuộc tính placehoder = "Search User". Ta có thể sử dụng @ để get được Xpath như sau

    Xpath = //input[@placeholder='Search User’]

    Trong thẻ input còn có thuộc tính class="sb__input". Tương tự ta có thể sử dụng

    Xpath = //input[@class='sb__input']

    Thao tác với chuỗi

    ·       Sử dụng text()

    <a href="/questions" class="text-white text-bold">Selenium</a>

    Ở đây là thẻ a, có text ="Selenium" Để sử dụng text() get Xpath cho element này bạn lưu ý phải copy hết đoạn text.

    Xpath = //a[text()=’Selenium’]

    ·       Sử dụng contains()

    Cũng gần giống với text() nhưng nó không cần thiết phải copy hết đoạn text, mà chỉ cần copy ngắn gọn 1 nội dung nào đó đủ để xác định được phần tử UI

    <a href="/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-3Q75wppeKWb" class="link">Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết</a>

    Thay vì phải copy hết đoạn text như cách dùng của text() thì khi sử dụng contains() bạn chỉ cần sử dụng text = "thủ thuật CSS" là cũng đủ để get được xpath cho element này

    Xpath = //a[contains(text(),'thủ thuật CSS')]

    g. Ưu điểm và nhược điểm Xpath

    • Ưu điểm: Xpath có thể tìm theo text, có thể tìm theo cha của nó
    • Nhược điểm: Rất là chậm, đặc biệt chậm trên IE, nên hạn chế dùng Xpath, nên sử dụng CSS Selector
    Lưu ý: Nên sử dụng Xpath tương đối, không nên sử dụng Xpatch tuyệt đối và tìm theo index vì trang web khi thay đổi thì bộ code test tự động sẽ không thể chạy được nữa.

    III. Công cụ CSS and Xpath checker




    Hình 8. Công cụ CSS and Xpath checker

    • Sau khi cài đặt xong chúng ta phải khởi động lại trình duyệt thì tool mới hoạt động, nó sẽ xuất hiện trên thanh extentions của Chrome và khi ta nhấn vào giao diện của nó sẽ như hình dưới, sẽ có 2 lựa chọn tìm theo CSS và tìm theo Xpatch checker, chúng ta có thể lựa cho một trong hai cách để xác định xem đường dẫn đến phần tử tìm muốn tìm là đúng hay chưa, khi chọn đúng nó sẽ xuất high light thành phần chúng ta chọn lên.


    Hình 9. Giao diện công cụ CSS and Xpath checker



    Hình 10. Giao diện công cụ CSS and Xpath checker khi đã chọn thành công phần tử là Logo Google

    • Lưu ý: Nên tìm những đặc điểm nào là duy nhất để tìm đến ví dụ trong hình là cái thẻ img có class name là lnXdpd và cái này là duy nhất, còn cái nào mà không có đặc điểm duy nhất thì chúng ta phải dò từ trên xuống dưới, ngoài vào trong thông qua các element bên ngoài của nó. Có rất nhiều đường đi đến đối tượng chúng ta muốn chọn, vì vậy nên chọn đường đi ngoài là ngắn nhất, tối ưu nhất
    • Công cụ này cũng tích hợp tính năng copy đường dẫn CSS selector và Xpatch(Copy Xpatch(đường dẫn tương đối) và Copy full Xpatch (đường dẫn tuyệt đối) sẵn cho chúng ta bằng cách nhấn chuột phải chọn inspect - nhấn vào dòng code của đối tượng - nhấn chuột phải - chọn copy - sau đó chọn copy theo các hình thức mong muốn. Tuy nhiên đường dẫn công cụ này cung cấp cho mình không phải lúc nào cũng tối ưu, chúng ta không nên phụ thuộc vào nó, tốt nhất là tự nên tìm thì sẽ tốt hơn sẽ nâng skill của chúng ta lên.
    • Nên hạn chế sử dụng các index kiểu nth-child(1), nth-child(2)... vì trang web nhiều khi sẽ thay đổi, nếu tìm như vậy bộ code của chúng ta sẽ không còn dùng được nữa.


    Hình 11. Cách copy đường dẫn mà công cụ CSS and Xpath checker cung cấp sẵn




    Giới thiệu về HIENDV94

    Mình là Hiển. Đây là blog ghi chép lại những thứ mình trải qua và học được hàng ngày, mình luôn luôn muốn học hỏi để trau dồi kinh nghiệm, hoàn thiện bản thân. Rất mong được làm quen mọi người. Hãy kết bạn với mình qua Facebook các bạn nhé.

    0 Bình luận:

    Đăng nhận xét

    Đăng ký: Đăng Nhận xét ( Atom )