使用CSS選擇器和自定義屬性升級您的項目

本文最初由TestProject發布。感謝您支持使SitePoint成為可能的合作夥伴。

Selenium WebDriver 的元素選擇器是自動化框架的核心組件之一，也是與任何 Web 應用程序交互的關鍵。在本篇關於自動化元素選擇器的綜述中，我們將討論各種策略，探討其功能，權衡其優缺點，並最終推薦最佳選擇器策略——結合 CSS 選擇器的自定義屬性。

關鍵要點

• Selenium WebDriver 的元素選擇器對於與任何 Web 應用程序交互至關重要。最佳選擇器策略是結合 CSS 選擇器的自定義屬性，因為它兼顧易用性、多功能性、在線支持、文檔和性能。
• 自定義屬性和 CSS 選擇器允許自動化工程師定位特定元素，而無需創建複雜的元素選擇器。但是，這需要 QA 和開發團隊之間的協作，以添加可在應用程序中使用的自定義屬性。
• XPath 是一種用途廣泛且功能強大的元素選擇器策略，它可以選擇頁面中的任何元素，無論您是否有類和 ID 可用。但是，XPath 在 Internet Explorer 中的性能較差。
• ID 和類元素選擇器受應用程序結構變化的影響最小。但是，如果開發人員直接更改了自動化中使用的 ID 或類，則會影響您的測試。
• 使用標籤名稱、鏈接文本、部分鏈接文本和名稱作為元素選擇器策略的使用有限，不建議在整個自動化框架中廣泛採用。它們僅應在沒有其他選擇器選項可用（例如自定義標籤或 ID）的情況下使用。

Selenium 元素選擇器

選擇最佳的元素選擇器策略對於自動化工作的成功和易於維護至關重要。因此，在選擇選擇器時，應考慮易用性、多功能性、在線支持、文檔和性能等方面。認真考慮合適的選擇器策略將在未來通過易於維護的自動化帶來回報。

正如應考慮元素選擇器的技術方面一樣，也應考慮組織的文化。開發人員和 QA 之間的成熟協作文化將在自動化中實施元素選擇器時實現更高層次的成功。這不僅通過為軟件開發生命週期其他領域的協作奠定基礎而使組織受益，而且還超越了自動化工作本身。

所有代碼示例都將使用 Python 和 Selenium WebDriver 命令，但通常適用於任何編程語言和框架。

HTML 示例：

我將使用以下導航菜單的 HTML 代碼段作為每個部分中的示例：

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

不推薦：標籤名稱、鏈接文本、部分鏈接文本和名稱

我不會在這上面花費太多時間，因為它們的使用都非常有限。它們通常不是在整個自動化框架中廣泛採用的好選擇。它們解決了可以使用其他元素選擇器策略輕鬆解決的特定需求。僅當您有特定需求需要處理特殊情況時才使用這些。即使那樣，大多數特殊情況也不夠特殊到可以使用這些。您會在沒有其他選擇器選項可用（例如自定義標籤或 ID）的情況下使用這些。

示例：

使用標籤名稱，您可以選擇所有與您提供的標籤名稱匹配的大量元素。這用途有限，因為它僅在您需要選擇大量相同類型元素的情況下才有效。以下示例將返回示例 HTML 中的所有 4 個 div 元素。

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

您可以使用以下示例選擇鏈接。如您所見，它們只能定位錨點標籤以及這些錨點標籤的文本：

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

最後，您可以按名稱屬性選擇元素，但如您在示例 HTML 中看到的，沒有帶有名稱屬性的標籤。這在幾乎任何應用程序中都是一個常見問題，因為在每個 HTML 屬性中添加名稱屬性並非常見做法。如果主菜單元素具有這樣的名稱屬性：

<code class="language-python">driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")</code>

您可以這樣選擇它：

<code class="language-html"><div id="main-menu" name="menu"></div></code>

如您所見，這些元素選擇器策略的使用有限。以下方法都是更好的方法，因為它們更加通用和強大。

總結：標籤名稱、鏈接文本、部分鏈接文本和名稱

優點 缺點 易於使用 用途不廣泛 極其有限的使用 在某些情況下可能根本不適用

推薦：XPath

XPath 是一種用途廣泛且功能強大的元素選擇器策略。這也是我個人的偏好和最喜歡的。 XPath 可以選擇頁面中的任何元素，無論您是否有類和 ID 可用（儘管沒有類或 ID，它就難以維護，有時也很脆弱）。此選項特別通用，因為您可以選擇父元素。 XPath 還具有許多內置函數，允許您自定義元素選擇。

但是，通用性帶來了複雜性。鑑於 XPath 可以做很多事情，與其他元素選擇器策略相比，它的學習曲線也更陡峭。這可以通過輕鬆找到的優秀在線文檔來彌補。一個很好的資源是在 W3Schools.com 上找到的 XPath 教程。

還應注意，使用 XPath 時存在權衡。雖然您可以選擇父元素並使用非常通用的內置函數，但 XPath 在 Internet Explorer 中的性能較差。在選擇元素選擇器策略時，應考慮這種權衡。如果您需要能夠選擇父元素，則需要考慮它對 Internet Explorer 中的跨瀏覽器測試的影響。從本質上講，在 Internet Explorer 中運行自動化測試將花費更長時間。如果您的應用程序的用戶群沒有很高的 Internet Explorer 使用率，那麼這是一個不錯的選擇，因為您可能會考慮比其他瀏覽器更少地運行 Internet Explorer 中的測試。如果您的用戶群有大量的 Internet Explorer 使用率，則應僅在其他更好的方法不適合您的組織時才考慮 XPath。

示例：

如果您有選擇父元素的要求，則必須選擇 XPath。以下是如何操作：使用我們的示例，假設您想根據某個錨元素定位父 main-menu 元素：

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

此元素選擇器將定位 id 等於“menu”的錨點標籤的第一個實例，然後使用“/../”定位父元素。結果是您將定位 main-menu 元素。

總結：XPath

優點 缺點 可以選擇父元素 在 IE 中性能較差 高度通用 學習曲線略陡峭 大量在線支持

推薦：ID 和類

ID 和類元素選擇器是自動化中的兩個不同選項，並在應用程序中執行不同的功能。但是，對於考慮在自動化中使用哪個元素選擇器策略，它們的差異非常小，因此我們不需要分別考慮它們。在應用程序中，元素的“id”和“class”屬性（如果已定義）允許 UI 開發人員操作和設置應用程序的樣式。對於自動化，我們使用它來定位特定元素以在自動化中進行交互。

使用 ID 和類元素選擇器的一大好處是它們受應用程序結構變化的影響最小。假設您要創建一個依賴於少數元素和一些子元素鏈的 XPath 或 CSS 選擇器，當功能請求通過添加新元素中斷該鏈時會發生什麼？使用 ID 和類元素選擇器時，您可以定位特定元素，而不是依賴於頁面結構。您保留了自動化的穩健性，而不會對更改過於寬鬆。應通過創建側重於特定元素位置的測試用例來通過自動化檢測更改。更改不應破壞您的整個自動化套件。但是，如果開發人員直接更改了自動化中使用的 ID 或類，則會影響您的測試。

如果被測應用程序未將 ID 和類作為開發最佳實踐的一部分來實現，則此元素選擇器策略將不可用。如果 HTML 標籤沒有您可以在自動化中使用的 ID 和類，則此方法難以使用。

示例：

在我們的示例中，如果我們要選擇頂級菜單元素，則如下所示：

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

如果我們要選擇第一個菜單項，則如下所示：

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

總結：ID 和類

優點 缺點 易於維護 開發人員可能會更改它們，從而破壞自動化 易於學習 受頁面結構更改的影響最小

最佳：結合 CSS 選擇器的自定義屬性

如果您的 QA 組織與開發團隊建立了良好的協作關係，則您很可能能夠在自動化中使用這種最佳實踐方法。使用自定義屬性和 CSS 選擇器來定位元素對 QA 團隊和組織都有多重好處。對於 QA 團隊，這允許自動化工程師定位他們需要的特定元素，而無需創建複雜的元素選擇器。但是，這需要能夠添加自動化團隊可以在應用程序中使用的自定義屬性。為了利用這種最佳實踐方法，您的開發和 QA 團隊應合作實施此策略。

我想花一點時間指出 CSS 選擇器方法不依賴於自定義屬性。 CSS 選擇器可以像 XPath 一樣定位 HTML 文檔中的任何標籤和屬性。

現在讓我們看看這種方法包含什麼。為了最好地執行此操作，您的自動化團隊應該了解他們在自動化中想要定位的內容。與開發人員（最可能是前端工程師）合作，他們將製定一個自定義屬性模式，將其放置到自動化團隊需要連接的每個目標中。對於此示例，我們將“tid”屬性附加到目標元素。

這裡要強調的一個技術要點是 CSS 選擇器的一個限制。它們故意不允許像 XPath 一樣選擇父元素。這樣做是為了避免 Web 頁面上 CSS 樣式的無限循環。雖然這對網頁設計來說是一件好事，但這對於將其用作自動化元素選擇器策略來說是一個限制。幸運的是，可以通過開發人員實現的自定義屬性來避免此限制。 QA 應該請求適當的自定義屬性，以便無需選擇父元素。

如果您想在不使用自定義屬性的情況下選擇此策略，您仍然走在正確的軌道上。例如，您可以使用以下方法定位 Shop 子菜單中的鏈接：

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

此策略將使自動化工程師能夠創建易於維護且不會因 UI 中的不相關更改而中斷的可靠自動化。選擇此策略是最佳方法。它不僅將成為易於維護的自動化解決方案，而且還將鼓勵開發團隊和 QA 團隊之間的協作。

示例：

在我們的示例 HTML 中實現自定義屬性將產生如下結果：

<code class="language-python">driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")</code>

請注意某些元素中的新屬性。我們創建了一個不與任何標準 HTML 屬性衝突的新屬性，稱為“tid”。使用此自定義屬性，我們可以使用 CSS 選擇器來定位它：

<code class="language-html"><div id="main-menu" name="menu"></div></code>

假設您想選擇菜單中的所有鏈接，無論它是頂級菜單項還是子菜單。使用 CSS 選擇器，您可以創建高度通用的元素選擇器：

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

“*=”的作用是在任何元素的 tid 字段中對值“-link”進行通配符搜索。將其放在 #main-menu ID 說明符之後，它將元素的搜索範圍集中在主菜單內。

如果想在不使用自定義屬性的情況下選擇此策略，您仍然走在正確的軌道上。例如，您可以使用以下方法定位 Shop 子菜單中的鏈接：

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

此策略將使自動化工程師能夠創建可靠的自動化，易於維護且不會因 UI 中的不相關更改而中斷。選擇此策略是最佳方法。它不僅將成為易於維護的自動化解決方案，而且還將鼓勵開發團隊和 QA 團隊之間的協作。

總結：結合 CSS 選擇器的自定義屬性

優點 缺點 易於學習 在與開發團隊建立協作關係方面需要付出初步努力 大量在線支持 通用 在所有瀏覽器中性能優異

結論

在自動化框架中實施企業標準元素選擇器策略有一些不錯的選擇。應避免使用標籤名稱或鏈接文本等選項，除非它是您的唯一選項。 XPath、ID 和類選擇器是一條不錯的途徑。到目前為止，最佳方法是實現自定義屬性並使用 CSS 選擇器定位它們。這也鼓勵開發團隊和 QA 團隊之間的協作。

以下是並排比較的選項：

✓ – 是 / – 部分 ✗ – 否

	标签名称、链接文本（等）	XPath	ID 和类	结合 CSS 选择器的自定义属性
易于使用	✓	✓	✓	✓
在线支持	✓	✓	✓	✓
通用性	✗	✓	✗	✓
性能	✓	✗	✓	✓
易于维护	✗	✓	✓	✓
鼓励协作	✗	✗	✓	✓

關於 CSS 選擇器自定義屬性的常見問題

什麼是 CSS 選擇器自定義屬性？

CSS 選擇器自定義屬性是 CSS 中的一項強大功能，它允許開發人員根據元素的屬性值來選擇和設置元素的樣式。當您想對共享公共屬性但可能不共享相同標籤名稱或類的元素應用特定樣式時，這尤其有用。例如，您可以使用自定義屬性選擇器來設置所有具有“active”數據屬性的元素的樣式，而不管它們的標籤名稱或類如何。

如何使用 CSS 選擇器自定義屬性？

要使用 CSS 選擇器自定義屬性，您需要在 CSS 選擇器中使用方括號[]。在括號內，您指定要選擇的屬性和值。例如，要選擇所有具有“active”數據屬性的元素，您將使用選擇器[data-active]。然後，您可以將任何所需的樣式應用於這些元素。

可以將 CSS 選擇器自定義屬性與任何屬性一起使用嗎？

是的，您可以將 CSS 選擇器自定義屬性與任何屬性一起使用。這包括標準的 HTML 屬性（如“class”和“id”），以及您可能已添加到元素的任何自定義數據屬性。

CSS 屬性選擇器的不同類型有哪些？

有幾種類型的 CSS 屬性選擇器。最基本的類型是精確匹配選擇器，它根據其屬性值的精確匹配來選擇元素。還有一些選擇器用於匹配屬性值的開頭、結尾或任何部分。此外，還有一些選擇器用於匹配具有特定屬性的元素，而不管其值如何。

可以將 CSS 選擇器自定義屬性用於所有瀏覽器嗎？

所有現代瀏覽器（包括 Chrome、Firefox、Safari 和 Edge）都支持 CSS 選擇器自定義屬性。但是，它們可能不受這些瀏覽器的舊版本或其他不太常見的瀏覽器的支持。最好在多個瀏覽器中測試您的 CSS 以確保兼容性。

如何使用 CSS 選擇器自定義屬性來提高網站的性能？

CSS 選擇器自定義屬性可以通過減少您需要編寫的 CSS 量來幫助提高網站的性能。通過根據其屬性選擇元素，您可以一次性將樣式應用於多個元素，而無需為每個元素編寫單獨的 CSS。這可以使您的 CSS 更有效率且更易於維護。

可以將 CSS 選擇器自定義屬性與其他選擇器組合使用嗎？

是的，您可以將 CSS 選擇器自定義屬性與其他選擇器組合使用。例如，您可以將自定義屬性選擇器與類選擇器組合使用，以僅選擇具有特定類和特定屬性的元素。

CSS 選擇器自定義屬性的一些常見用例是什麼？

CSS 選擇器自定義屬性通常用於根據元素的狀態或功能來設置元素的樣式。例如，您可以使用自定義屬性選擇器來設置所有被禁用的按鈕或所有必需的表單字段的樣式。它們也可以用於主題設置，方法是根據 data-theme 屬性應用不同的樣式。

CSS 選擇器自定義屬性與其他 CSS 選擇器相比如何？

CSS 選擇器自定義屬性比許多其他 CSS 選擇器提供了更大的靈活性。雖然其他選擇器僅限於根據其標籤名稱、類或 ID 選擇元素，但自定義屬性選擇器可以根據任何屬性選擇元素。這使得它們成為設置複雜網頁的強大工具。

使用 CSS 選擇器自定義屬性有什麼缺點嗎？

使用 CSS 選擇器自定義屬性的一個潛在缺點是它們會使您的 CSS 更加複雜。如果您使用大量自定義屬性選擇器，則可能難以理解和維護您的 CSS。但是，通過仔細的計劃和組織，可以減輕這種情況。

以上是使用CSS選擇器和自定義屬性升級您的項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！