自动化实战：CSS 定位怎么写才稳定？

从稳定属性、属性匹配、范围控制到影刀里的文字定位、唯一性验证和排错路线，整理网页自动化中更可维护的 CSS 定位方法。

刚开始学自动化，CSS 定位很容易被讲成“背几个语法”。真实项目里更重要的问题是：这个选择器能不能长期命中正确元素，失效后能不能快速知道原因。

本文面向网页自动化场景，尤其是影刀编码版常见的 browser.find_by_css()、browser.find_all_by_css() 和 browser.find_by_xpath()。临时操作可以只求能用；交给 RPA 长期运行时，定位必须像代码一样可读、可验证、可维护。

稳定定位到底在解决哪几层问题？

只会写选择器，解决的是“能否命中”；能把范围、唯一性和页面上下文一起考虑，才是在解决自动化稳定性。

基础选择器怎么选，才不会一开始就走偏？

基础语法不需要死背。先判断元素有没有“表达功能的稳定特征”，再决定用 id、class 还是属性。

<input
id="username"
class="login-input"
name="username"
placeholder="请输入用户名"
type="text"
/>

六种属性匹配分别该在什么时候用？

页面没有干净的 id 或专用测试属性时，关键不是立即改用长路径，而是识别属性值中哪一部分稳定。

<div class="comments--ChxC7GEN">评价区</div>

批量选择器可以先拿到候选，再按文本、状态或其它属性筛选：

rows = browser.find_all_by_css('tr[data-order-id^="202607"]', timeout=10)

关系选择器和伪类，什么时候是在帮忙，什么时候在添风险？

关系选择器负责表达“元素在哪个容器、哪一层、哪个相邻位置”；伪类负责表达“元素是什么状态或位置”。它们解决的问题不同。

写一个选择器时，应该按什么顺序下手？

不要从浏览器复制路径开始。把定位当成一次从业务区域到唯一元素的逐层诊断。

这张定位仪就是写代码时的检查顺序：先确认范围和稳定特征，再组合，最后把数量验证写进程序。

CSS、XPath 和 get_text() 应该怎么分工？

CSS 是主力定位方式，但不是唯一方式。只有显示文字稳定时，硬凑 CSS 往往会把问题复杂化。

按文字直接定位：

button = browser.find_by_xpath(
    '//button[normalize-space(.)="提交订单"]',
    timeout=10,
)
button.click()

先限定弹窗，再按文字筛选：

buttons = browser.find_all_by_css(".order-dialog button", timeout=10)

for button in buttons:
    if button.get_text().strip() == "提交订单":
        button.click()
        break
else:
    raise RuntimeError('未找到文本为“提交订单”的按钮')

怎样验证唯一性，并判断“找不到”到底是哪一层出了问题？

先在开发者工具中确认 HTML 和匹配数量，再进入影刀运行环境。这样可以把“选择器语法”和“页面状态”分开排查。

selector = '.order-dialog button.submit:not([disabled])'
elements = browser.find_all_by_css(selector, timeout=10)

if len(elements) == 0:
  raise RuntimeError(f"未找到元素：{selector}")

if len(elements) > 1:
  raise RuntimeError(f"定位不唯一：{selector}，数量={len(elements)}")

elements[0].click()

坏定位应该怎样一步步改造成可维护定位？

改造方向不是“换一个更复杂的语法”，而是减少结构依赖，增加业务语义，并让结果可验证。

动态 class 的数量验证：

areas = browser.find_all_by_css('div[class*="comments--"]', timeout=10)

if len(areas) != 1:
    raise RuntimeError(f"评价区定位不唯一，当前数量={len(areas)}")

如果弹窗没有 data-action，但文字稳定，可以退回 CSS 候选加文字筛选：

buttons = browser.find_all_by_css(".order-dialog button", timeout=10)

for button in buttons:
    if button.get_text().strip() == "确认":
        button.click()
        break
else:
    raise RuntimeError("未找到弹窗里的确认按钮")

学完后，怎样确认自己已经能独立写稳定定位？

先完成两道练习，再用能力验收条逐项检查。答案不是唯一目标，能解释为什么稳定才算掌握。

<div class="login-panel">
<input name="account" placeholder="请输入账号">
<input name="password" type="password">
<button class="login-button" data-action="login">登录</button>
</div>

input[name="account"]
input[name="password"]
button[data-action="login"]

<div class="order-dialog">
<div class="row" data-order-id="20260713001">
  <span class="status pending">待处理</span>
  <button class="btn btn-primary">处理</button>
</div>
<div class="row" data-order-id="20260713002">
  <span class="status done">已完成</span>
  <button class="btn btn-primary">查看</button>
</div>
</div>

.order-dialog .row[data-order-id="20260713001"] button.btn-primary