當然，理解純CSS選擇器（CSS Selectors）對于進行UI自動化測試非常重要。CSS選擇器允許您通過元素的屬性、層級關系、類名、ID等來精準定位頁面上的元素。下面我將詳細講解CSS選擇器的常見用法，并結合您的需求提供具體的示例。
1. 基本選擇器
-
元素選擇器：選擇特定類型的HTML元素。
div { /* 選擇所有div元素 */ } -
ID選擇器：通過元素的
id屬性選擇單個元素。#stats-8306 { /* 選擇id為stats-8306的元素 */ } -
類選擇器：通過元素的
class屬性選擇元素。.canvas-class { /* 選擇所有具有class="canvas-class"的元素 */ }
2. 組合選擇器
-
后代選擇器：選擇某個元素內部的所有特定后代元素。
div.parent-class span { /* 選擇所有在div.parent-class內的span元素 */ } -
子選擇器：選擇某個元素的直接子元素。
div > span { /* 選擇所有div元素的直接子span元素 */ } -
相鄰兄弟選擇器：選擇緊接在另一個元素之后的同級元素。
div#stats-8306 + div { /* 選擇緊跟在div#stats-8306后面的div元素 */ } -
通用兄弟選擇器：選擇某個元素之后的所有同級元素。
div#stats-8306 ~ div { /* 選擇所有在div#stats-8306之后的div元素 */ }
3. 屬性選擇器
-
屬性存在選擇器：選擇具有特定屬性的元素。
[data-stats-id] { /* 選擇所有具有data-stats-id屬性的元素 */ } -
屬性值選擇器：選擇屬性值等于特定值的元素。
[data-stats-id="8306"] { /* 選擇data-stats-id屬性值為8306的元素 */ } -
包含文本的選擇器：CSS標準中沒有直接通過文本內容選擇元素的選擇器，但有些框架（如jQuery）支持
:contains偽類。在純CSS中，無法實現這一點，需要通過其他方式。
4. 偽類選擇器
偽類用于定義元素的特殊狀態。
-
:nth-of-type(n)：選擇同類型中的第n個元素。
div:nth-of-type(1) { /* 選擇第一個div元素 */ } -
:last-child：選擇父元素的最后一個子元素。
div:last-child { /* 選擇父元素中的最后一個div元素 */ }
5. 綜合示例
假設您的HTML結構如下：
<div data-stats-id="8306"><div>鮮時光</div><div><div class="solar-combo-chart"><canvas></canvas></div></div>
</div>
目標
定位data-stats-id="8306"下的文本為“鮮時光”的div之后的canvas元素。
CSS選擇器實現
由于純CSS無法通過文本內容直接選擇元素，我們需要依賴元素的層級和屬性來定位。
-
通過層級關系定位
canvas如果“鮮時光”的
div后面緊跟包含canvas的div，可以使用相鄰兄弟選擇器：div[data-stats-id="8306"] > div + div .solar-combo-chart canvas解釋：
div[data-stats-id="8306"]：選擇具有data-stats-id="8306"屬性的div。> div：選擇其直接子div（即“鮮時光”所在的div）。+ div：選擇緊隨其后的兄弟div（即包含canvas的div）。.solar-combo-chart canvas：在找到的div中選擇具有類名solar-combo-chart的子div中的canvas元素。
-
如果結構更復雜，使用通用兄弟選擇器
如果“鮮時光”的
div和包含canvas的div之間有不確定的層級，可以使用通用兄弟選擇器：div[data-stats-id="8306"] div:contains('鮮時光') ~ div .solar-combo-chart canvas注意：
:contains在標準CSS中不可用。因此，這種方法需要確保HTML結構允許使用其他選擇器。 -
通過明確的類名或屬性
如果“鮮時光”的
div有唯一的類名，可以更精準地定位：<div class="unique-class">鮮時光</div>對應的CSS選擇器：
div[data-stats-id="8306"] > .unique-class + div .solar-combo-chart canvas
6. 在UI自動化中的應用
在UI自動化測試中，CSS選擇器通常用于定位頁面元素，以便進行點擊、輸入等操作。以下是一些常見框架中使用CSS選擇器的示例：
-
Selenium（Python）：
from selenium import webdriverdriver = webdriver.Chrome() driver.get('your_website_url')# 定位canvas元素 canvas = driver.find_element_by_css_selector("div[data-stats-id='8306'] > div + div .solar-combo-chart canvas")# 進行操作，例如點擊 canvas.click() -
Cypress：
cy.get("div[data-stats-id='8306'] > div + div .solar-combo-chart canvas").should('exist').click(); -
Playwright：
const { chromium } = require('playwright');(async () => {const browser = await chromium.launch();const page = await browser.newPage();await page.goto('your_website_url');const canvas = await page.$("div[data-stats-id='8306'] > div + div .solar-combo-chart canvas");await canvas.click();await browser.close(); })();
7. 實用技巧
-
使用開發者工具驗證選擇器：
- 打開瀏覽器的開發者工具（通常按F12）。
- 在“Elements”面板中，右鍵點擊目標元素，選擇“Copy” > “Copy selector”（復制選擇器）。
- 或者在控制臺中使用
document.querySelector測試選擇器：
如果返回目標元素，說明選擇器正確。document.querySelector("div[data-stats-id='8306'] > div + div .solar-combo-chart canvas");
-
避免過于復雜的選擇器：
盡量保持選擇器的簡潔和可維護性。過于復雜的選擇器可能在HTML結構變化時容易失效。 -
優先使用唯一標識符：
如果元素有唯一的id或class，優先使用它們來定位，這樣更高效且穩定。
8. 總結
純CSS選擇器功能強大，能夠滿足大多數UI自動化測試中的元素定位需求。通過理解元素的結構、屬性和層級關系，您可以編寫精準且高效的選擇器來定位目標元素。以下是您可能需要記住的一些關鍵點：
- 使用
data-*屬性進行定位，因為它們通常用于存儲自定義數據，且具有較高的唯一性。 - 利用層級關系（如子選擇器和相鄰兄弟選擇器）來縮小選擇范圍。
- 盡量避免依賴文本內容進行定位，除非使用支持偽類的框架。
如果您有更具體的HTML結構或遇到特定的問題，請提供更多細節，我可以為您提供更有針對性的幫助！
