ใช้งาน Chain Locator และ Element Data Locator บน Robot Framework Selenium

Robot Framework Selenium Library ล่าสุดที่ใช้งานอยู่ที่ version 6.0 รองรับการใช้งาน Locator ที่น่าสนใจหลายตัวเช่น Chain Locator, Element data-* attribute รวมถึง Web Element โดยก่อนที่เราจะใช้งาน feature ใหม่ๆได้อย่าลืมรันคำสั่งในการอัพเดท Selenium library ซะก่อนนะครับ

pip install --upgrade robotframework-seleniumlibrary

ถ้าพร้อมแล้ว เรามาลองเล่น และดูจุดเด่นของ Locator แต่ละแบบไปด้วยกันเลยครับ

Selenium Chain Locator

Chain locator ไม่ใช่ locator ประเภทใหม่ แต่เป็นการขยายขอบเขตการใช้งาน Locator เดิมที่เรามีอยู่แล้ว ให้มาใช้งานร่วมกันได้

โดยเราสามารถนำ Locator ที่มีอยู่มาเรียงต่อกันเพื่อช่วยในการหา Unique Locator เนื่องจากเราไม่สามารถจะมีการใส่ ID หรือ Test ID ไปในทุกๆที่ได้ การใช้งาน locator อื่นๆให้มีประสิทธิภาพจึงเป็นหัวใจสำคัญในการทำ Automated Testing นั่นเอง

โดย Chain locator เราต้องดึงจุดเด่นของ locator แต่ละแบบออกมา มาดูตัวอย่างด้านล่างกันเลย

จาก UI ด้านบน เราต้องการ Search คำว่า JavaScript และถ้าเกิดไม่มี ID ที่ text box ที่ใช้สำหรับกรอก search text ล่ะ

เราสามารถใช้ chain locator มาช่วยได้ โดยใช้ ID ในการหา Tag ที่เป็น Tag parent ออกมาก่อน แล้วค่อยใช้ CSS มาหาแบบเจาะจงอีกที

วิธีนี้จะช่วยลดปัญหาที่ locator เปลี่ยนเวลาที่ Dev มีปรับแก้หน้า UI ได้ดีกว่าการใช้ CSS อย่างเดียวนั่นเอง

<div id="searchBox-wrapper" class="mt-2 row">
   <div class="text-left col-md-8 col-sm-12">
      <div class="mb-3 input-group">
         <input autocomplete="off" placeholder="Type to search" type="text" class="form-control">
         <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2">
               <span>
                  <svg stroke="currentColor" fill="currentColor" stroke-width="0">
                     <path fill-rule="evenodd" clip-rule="evenodd"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd"></path>
                  </svg>
               </span>
            </span>
         </div>
      </div>
   </div>
   <div class="text-right col-md-4 col-sm-12"><button id="login" type="button" class="btn btn-primary">Login</button></div>
</div>

*** Settings ***
Library     SeleniumLibrary


*** Test Cases ***
Demo chain locator
    Open Browser    https://demoqa.com/books    browser=chrome
    Maximize Browser Window
    Input Text    id:searchBox-wrapper >> css:input    JavaScript

Element Data Locator

นอกจาก chain locator แล้ว ยังมี Element Data Locator เป็น Locator Strategy ที่ใช้ในการหา Element ที่มี attribute data-* ต่างๆ เช่น data-test-id, data-testid

ซึ่ง test id เป็น Locator ที่แนะนำมากที่สุด สำหรับการใช้ระบุ Locator เวลาเขียน Automated test เพราะเป็น attribute ที่แยกออกมาสำหรับการเทสโดยเฉพาะ จึงมั่นใจได้ว่า locator ที่เราใช้จะไม่ถูกปรับเปลี่ยนจาก Dev นั่นเอง

Input Text		data:testId:searchInput         My demo

นอกจากอัพเดทของ Selenium Library แล้ว Robot Framework 6 ก็มีอัพเดทอีกเพียบตามมาอ่านเลย คลิก

ถ้าสนใจอ่านการใช้งานแบบละเอียดสามารถดูได้ที่ Selenium Library Keywords Document

สนใจเรียนรู้แบบเจาะลึก

Robot Framework Selenium

Web Automated Test ด้วย

Robot Framework และ Selenium 6