如何使用XPath获取切换式复选框的当前显示标签文本？

问题背景 #

现有如下HTML结构：

<span data-v-086f077a="" data-v-bf29e118="" class="toggle undefined-undefined small">
<span data-v-086f077a="" class="toggle-label"></span>
<input data-v-086f077a="" type="checkbox" id="tracked-item-toggle-0">
<label data-v-086f077a="" for="tracked-item-toggle-0"><span data-v-086f077a="" class="on-text">Tracked</span>
<span data-v-086f077a="" class="off-text">Not Tracked</span>
</label>
</span>

点击checkbox会切换显示“Tracked”或“Not Tracked”文本，但切换时DOM代码本身无变化。需要获取当前显示的文本，判断是否需要将其切换为“Tracked”（切换操作使用XPath：//span[@class='toggle undefined-undefined small']）。此前使用的XPath表达式//label[@for='tracked-item-toggle-0' and ./span[contains(.,'Not Tracked')]]无论文本是否显示都能匹配到，无法区分状态。

解决方案 #

这类文本切换通常通过CSS的display: none或visibility: hidden控制元素可见性，因此可以结合元素的可见状态来筛选：

1. 判断当前是否显示“Not Tracked”（需要切换的场景）：

//label[@for='tracked-item-toggle-0']/span[@class='off-text' and not(contains(@style,'display:none'))]

如果页面用visibility:hidden控制隐藏，可调整为：

//label[@for='tracked-item-toggle-0']/span[@class='off-text' and not(contains(@style,'display:none')) and not(contains(@style,'visibility:hidden'))]

2. 判断当前是否显示“Tracked”（无需切换的场景）：

//label[@for='tracked-item-toggle-0']/span[@class='on-text' and not(contains(@style,'display:none'))]

如果用Selenium等自动化工具，还可以直接调用元素的is_displayed()方法判断，示例（Python）：

off_text_element = driver.find_element(By.XPATH, "//label[@for='tracked-item-toggle-0']/span[@class='off-text']")
if off_text_element.is_displayed():
    # 当前显示Not Tracked，执行切换
    toggle_element = driver.find_element(By.XPATH, "//span[@class='toggle undefined-undefined small']")
    toggle_element.click()

原理说明 #

由于DOM结构未发生变化，两个文本对应的span元素始终存在，仅通过文本内容匹配会同时命中两个元素。必须结合元素的可见状态筛选，才能准确识别当前显示的文本。

内容的提问来源于stack exchange，提问作者Ed Newman