如何用Python3的Selenium匹配outerHTML中的translate=subscriptions属性

目标元素的outerHTML #

<a class="btn btn-info ng-scope" translate="subscriptions" href="javascript:;" ng-class="{selected:tab=='subscriptions'}" ng-click="selectTab('subscriptions')">Subscriptions</a>

注意：页面中有多个元素使用相同类名btn btn-info ng-scope。

尝试过的定位代码 #

• WebDriverWait(driver,default_wait).until(EC.presence_of_element_located((By.CSS_SELECTOR,"a.btn.btn-info.ng-scope[@translate='Subscriptions']"))).click()
• WebDriverWait(driver,default_wait).until(EC.presence_of_element_located((By.CSS_SELECTOR,"a.ng-click[selectTab='subscriptions']"))).click()
• WebDriverWait(driver,default_wait).until(EC.presence_of_element_located((By.CSS_SELECTOR,"a[translate='subscriptions']"))).click()
• WebDriverWait(driver,default_wait).until(EC.presence_of_element_located((By.translate,"subscriptions"))).click()
• WebDriverWait(driver,default_wait).until(EC.presence_of_element_located((By.CSS_SELECTOR,"a.translate.subscriptions"))).click()
• driver.findElement(By.cssSelector "#translate" ).click()
• WebDriverWait(driver,default_wait).until(EC.presence_of_element_located((By.XPATH,".//*[@translate='subscriptions']"))).click()
• WebDriverWait(driver,default_wait).until(EC.presence_of_element_located((By.XPATH,"//*[text()='Subscriptions']"))).click() // 网站中Subscriptions标签显示为大写S
• WebDriverWait(driver,default_wait).until(EC.presence_of_element_located((By.XPATH,"//*[contains(text(),'Subscriptions')]"))).click() // 网站中Subscriptions标签显示为大写S

问题分析与正确定位方案 #

错误原因拆解 #

1. CSS选择器写法错误：
   • a.btn.btn-info.ng-scope[@translate='Subscriptions']：CSS属性选择无需加@，且属性值大小写不匹配（原属性为小写subscriptions，此处写为大写）
   • a.ng-click[selectTab='subscriptions']：ng-click是属性而非类，正确写法应为a[ng-click="selectTab('subscriptions')"]
   • a.translate.subscriptions：误将translate属性当作类名，此写法匹配的是带translate、subscriptions类的元素，与需求不符
   • #translate：#是ID选择器，目标元素无id="translate"属性，完全不匹配
2. WebDriver不存在By.translate这种定位策略
3. 基于text()的XPath匹配易受页面渲染、空格或隐藏文本影响，稳定性较差

正确定位代码 #

方案1：CSS选择器精准匹配translate属性

WebDriverWait(driver, default_wait).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "a[translate='subscriptions']"))
).click()

替换presence_of_element_located为element_to_be_clickable更稳妥，确保元素可点击后再执行操作

方案2：结合类名与translate属性（进一步缩小范围）

WebDriverWait(driver, default_wait).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "a.btn.btn-info.ng-scope[translate='subscriptions']"))
).click()

方案3：XPath精准匹配属性

WebDriverWait(driver, default_wait).until(
    EC.element_to_be_clickable((By.XPATH, "//a[@translate='subscriptions']"))
).click()

方案4：通过ng-click属性定位（若该点击方法唯一）

WebDriverWait(driver, default_wait).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "a[ng-click=\"selectTab('subscriptions')\"]"))
).click()

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