在手動測試中，我們是透過眼睛看，看完後透過滑鼠點擊元件，鍵盤輸入文字來來執行我們的測試，但是在自動化測試中，我們需要透過腳本來達成以上的行為，因此本章節將會介紹說，在腳本中我們如何”看”到元件，因為元素定位是成功進行測試的關鍵。無論是點擊按鈕、輸入文字，還是驗證元素的存在，測試腳本都必須能夠準確地找到網頁上的特定元素。因此，了解並掌握不同的元素定位方式是進行高效、可靠的 Web 自動化測試的基礎。

透過開發者工具找尋元件

我們可以透過瀏覽器提供的開發者工具來輔助我們視覺化抓取元件，透過點選右鍵後選擇檢查或是鍵盤 F12 來開啟瀏覽器的開發者模式，開啟後我們在 Elements 的 Tab 中可以看到這個網頁的 DOM，我們便會透過這個工具來抓取我們要互動的元件，開啟後的樣式如下：

箭頭選取元件

這邊有個小技巧，透過點擊開發者工具畫面左上方的箭頭，這時候我們指到哪個元件，右邊的 DOM 便會調整到對應到位置，點擊後便會顯示該元件的相關資料，接著我們便可以透過這個 DOM 來解析出元件的定位點，讓我們可以順利的抓取。

搜尋元件

除了透過箭頭點擊之外，如果我們想要透過 css 選擇器或是 xpath 尋找元件時，可以透過搜尋的方式來尋找，在右側的開發者工具中，我們透過鍵盤選曲 ctrl + F，變化開起搜尋的方框，在那個輸入框我們可以輸入我們想搜尋的元件定位方法來幫助我們尋找到元件。

元件定位方法

元件定位的方法有很多，接著下面我們列舉出幾種方法，在測試開發中，我們可以根據當前頁面的狀況，選擇最適合的方法。

ID定位

• 說明：ID 是 HTML 元素中唯一的標識符，因此用ID進行定位是最直接、最可靠的方式，然而這個方法需要仰賴測試與開發之間的協做，如何在開發時將 id 撰寫入 HTML 中便是一個需要溝通的議題。
• 使用方式：在Robot Framework中，可以使用id=前綴來進行定位。

Click Element    id=submit-button

Name定位

• 說明：如果網頁元素設置了name屬性，可以通過該屬性進行定位。這種方法適合用在表單元素上。
• 使用方式：使用name=前綴來定位元素。

Input Text    name=username    my_username

Class Name 定位

• 說明：通過元素的class屬性進行定位，適合用在具有相同樣式的多個元素上。不過，當同一class屬性應用在多個元素時，這種方式的精確性會下降。
• 使用方式：使用class=前綴來定位。

Click Element    class=btn-primary

Tag Name定位

• 說明：通過元素的HTML標籤進行定位，如div、input等。這種方法通常與其他定位方式結合使用，因為單獨使用標籤名可能會定位到多個元素，會是我們可以請開發的夥伴在標籤中埋進 qa-test='button_login'這例行的 tag 來協助我們快速定位。
• 使用方式：使用tag=前綴來定位。

Click Element    tag=h1

CSS Selector 定位

• 說明：CSS 選擇器是一種強大且靈活的定位方式，允許通過層級結構、屬性選擇、偽類等方式來定位元素。它的靈活性使其成為很多測試人員的首選。
• 使用方式：直接使用CSS選擇器語法。

Click Element    css=div.container > ul > li:first-child

CSS Selector 其實有許多更彈性的操作，可以幫助我們在測試上更好的尋找文件，但是由於實在太多了，因此在下面我們只列出幾點做舉例，關於更多的使用方式可以上網查詢：

XPath 定位

關於 XPath 的話又可以說很多啦，XPath（XML Path Language）是一種用來在 XML 文檔中定位元素的語言，由於 HTML 是一種特殊的XML，因此 XPath 也廣泛應用於 Web 自動化測試中。XPath 允許通過元素的層級、屬性、索引、文本內容等方式來定位網頁上的元素，使其成為一種強大而靈活的定位工具，最一開始 XPath 的目的是用在作為一個通用於 XPointer 與 XSLT 間的語法魔行，但是很快就被大家用來當作查詢語言囉。

XPath的基本語法包括以下幾種形式：

• 絕對路徑：從根節點開始，逐級定位到目標元素。
  • 範例：/html/body/div[1]/ul/li[2]/a
• 相對路徑：從某個元素開始，使用相對位置來定位。
  • 範例：//div[@class='container']/ul/li[2]/a
• 屬性選擇：通過元素的屬性來定位。
  • 範例：//input[@type='text']
• 文本選擇：通過元素的文本內容來定位。
  • 範例：//button[text()='Submit']

使用方式為透過xpath=前綴來定位元素。

Click Element    xpath=//button[text()='Submit']

上述提到這麼多的選擇方式，那該如何選擇呢？

1. 優先使用ID：因為ID通常是唯一的，使用 ID 定位能夠確保最高的穩定性，否則當今天前端畫面做修改時，極有可能會影響到其位置，導致測試失敗，這樣會需要一直維護測試腳本，對於資源的投入就會很大了
2. 考慮元素的穩定性：選擇那些在頁面變動或樣式變更後依然穩定的定位方式，例如 XPath 或 CSS選擇器
3. 簡單與精確之間的平衡：如果可以，選擇簡單的定位方式，如 Name 或 Class。但在需要更精確定位時，CSS 選擇器和 XPath 會更適合
4. 可維護性：確保使用的定位方式能夠方便維護，過於複雜的XPath或CSS選擇器可能難以理解和修改

結語

掌握多種元素定位方式是 Web 自動化測試成功的基礎。根據不同的需求選擇合適的定位方式，不僅能提高測試的精確性，還能增強測試的穩定性和可維護性。在實際應用中，靈活運用這些技巧，將有助於創建更高效、可靠的自動化測試方案。