在 Selenium 中依屬性找出元素

一、簡介

Selenium 提供了許多方法來定位網頁上的元素，我們經常需要根據元素的屬性來尋找元素。

屬性是可以添加以提供更多上下文或功能的附加資訊。它們大致可以分為兩類：

• 標準屬性：這些屬性是預先定義的並由瀏覽器識別。範例包括id 、 class 、 src 、 href 、 alt 、 title等。標準屬性具有預先定義的含義，並且廣泛用於不同的 HTML 元素。
• 自訂屬性：自訂屬性不是由 HTML 規範預先定義的，而是通常由開發人員根據其特定需求建立的。這些屬性通常以“ data- ”開頭，後面跟著描述性名稱。例如， data-id 、 data-toggle 、 data-target等。自訂屬性對於儲存與元素相關的附加資訊或元資料非常有用，它們通常用於 Web 開發中在 HTML 和 JavaScript 之間傳遞資料。

在本教程中，我們將深入研究如何使用 CSS 來精確定位網頁上的元素。我們將探索透過屬性名稱或描述來尋找元素，並提供完全匹配和部分匹配的選項。到最後，我們將成為輕鬆找到頁面上任何元素的大師！

2. 透過屬性名稱尋找元素

最簡單的場景之一是根據特定屬性的存在來尋找元素。考慮一個具有多個按鈕的網頁，每個按鈕都標記有一個名為「 data-action. ” 現在，假設我們要定位頁面上具有此屬性的所有按鈕。在這種情況下，我們可以使用[attribute]定位器：

driver.findElements(By.cssSelector("[data-action]"));

在上面的程式碼中， [data-action]將選擇頁面上具有 target 屬性的所有元素，我們將收到WebElements清單。

3. 透過屬性值查找元素

當我們需要定位具有唯一屬性值的特定元素時，我們可以使用 CSS 定位器 [attribute=value] 的嚴格匹配變體。這個方法允許我們找到屬性值精確匹配的元素。

讓我們繼續我們的網頁，其中按鈕具有“data-action”屬性，每個按鈕都分配了不同的操作值。例如， data-action='delete' 、 data-action='edit'等等。如果我們想要定位具有特定操作的按鈕，例如“刪除”，我們可以使用具有精確匹配的屬性選擇器：

driver.findElement(By.cssSelector("[data-action='delete']"));

4. 透過起始屬性值找出元素

在確切的屬性值可能有所不同但從特定子字串開始的情況下，我們可以使用另一種方法。

讓我們考慮這樣一個場景：我們的應用程式有許多彈出窗口，每個彈出窗口都有一個「接受」按鈕，並帶有名為“data-action”的自訂屬性。這些按鈕可能在共享前綴後附加不同的標識符，例如“btn_accept_user_pop_up” 、 “btn_accept_document_pop_up”等。我們可以使用[ attribute^=value ]定位器在基底類別中編寫通用定位器：

driver.findElement(By.cssSelector("[data-action^='btn_accept']"));

這個定位器將找到一個「data-action」屬性值從「btn_accept」開始的元素，因此我們可以為每個彈出視窗編寫一個帶有通用「Accept」按鈕定位器的基底類別。

5.透過屬性值結尾找元素

同樣，當我們的屬性值以特定後綴結尾時，讓我們使用[attribute$=value] 。想像一下，我們在頁面上有一個 URL 列表，並且想要獲取所有 PDF 文件引用：

driver.findElements(By.cssSelector("[href^='.pdf']"));

在此範例中，驅動程式將尋找“href”屬性值以“.pdf”結尾的所有元素。

6. 透過部分屬性值找出元素

當我們不確定屬性的前綴或後綴時，包含方法[attribute*=value]會很有幫助。讓我們考慮一個場景，我們想要取得引用特定資源路徑的所有元素：

driver.findElements(By.cssSelector("[href*='archive/documents']"));

在此範例中，我們將從存檔資料夾接收引用文件的所有元素。

7. 依特定類別尋找元素

我們可以透過使用元素的類別作為屬性來定位元素。這是一種常見的技術，尤其是在檢查元素是否已啟用、停用或已獲得其類別中反映的某些其他功能時。假設我們想要找到一個禁用的按鈕：

<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Accept</a>

這次，我們對角色使用嚴格匹配並包含對類別的匹配：

driver.findElement(By.cssSelector("[role='button'][class*='disabled']"));

在此範例中， “class”用作屬性定位器[attribute*=value] ，並在值“btn btn-primary btn-lg disabled”中偵測到“disabled”部分。

八、結論

在本教程中，我們探索了根據屬性定位元素的不同方法。

我們將屬性分為兩種主要類型：標準屬性，瀏覽器可以識別並具有預先定義的含義；自訂屬性，由開發人員創建以滿足特定需求。

使用 CSS 選擇器，我們學習如何根據屬性名稱、值、前綴、後綴甚至子字串有效地找到元素。了解這些方法為我們提供了強大的工具來輕鬆定位元素，使我們的自動化任務更加順利和有效率。

與往常一樣，所有程式碼範例都可以在 GitHub 上取得。