使用 Selenium 和 Python 查找存在 data-tb-test-id 属性而不是 id 的元素

Posted 2023-02-15

【中文标题】使用 Selenium 和 Python 查找存在 data-tb-test-id 属性而不是 id 的元素

【英文标题】：Find an element where data-tb-test-id attribute is present instead of id using Selenium and Python

【发布时间】：2019-11-27 19:07:15

【问题描述】：

我正在尝试使用 Selenium 找到一个元素，但我没有得到它。按照 html 代码：

<div aria-disabled="false"
     data-tb-test-id="DownloadCrosstab-Button"
     role="button"
     tabindex="0"
     style="font-size: 12px; font-weight: normal; color: rgba(0, 0, 0, 0.7); display: inline-block; padding: 0px 24px; position: relative; text-align: center; border-style: solid; border-width: 1px; border-radius: 1px; height: 24px; line-height: 22px; min-width: 90px; box-sizing: border-box; outline: none; white-space: nowrap; user-select: none; cursor: default; background-color: rgba(0, 0, 0, 0); border-color: rgb(203, 203, 203); margin-top: 8px; width: 100%; -webkit-tap-highlight-color: transparent;"
>Tabela de referência cruzada</div>

我尝试了以下代码：

x = browser.find_element_by_id("Downloadcrosstab")
x = browser.find_element_by_link_text("Downloadcrosstab-Button")
x = browser.find_element_by_class_name('Crosstab')

但我得到了同样的错误：

NoSuchElementException: no such element: Unable to locate element: "method":"css selector","selector":".Crosstab"
  (Session info: chrome=75.0.3770.142)

【问题讨论】：

属性data-tb-test-id不一样id所以不能通过id获取

上面没有id（更不用说一个值为Downloadcrosstab），也没有class="Crosstab"，所以我不知道为什么会期望by_class_name去工作。同样，这里根本没有链接，所以按链接文本搜索也没有意义。

该元素没有任何 ID、任何链接文本或任何类。此外，您要查找的文本与元素中的任何内容都不匹配。

【参考方案1】：

该元素似乎是一个动态元素，并确定您需要诱导 WebDriverWait 以使所需的元素可点击的元素，您可以使用以下任一方法解决方案：

使用CSS_SELECTOR：

x = WebDriverWait(browser, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div[data-tb-test-id='DownloadCrosstab-Button'][role='button']"))).click()

使用XPATH：

x = WebDriverWait(browser, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[@data-tb-test-id='DownloadCrosstab-Button' and text()='Tabela de referência cruzada']")))

注意：您必须添加以下导入：

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

注意：您可以在Selenium “selenium.common.exceptions.NoSuchElementException” when using Chrome找到相关讨论

【参考方案2】：

我实际上喜欢为我的测试定位器添加一个自定义 html 属性。

然后您可以使用 xpath 来定位它们，例如 //*[@data-tb-test-id="DownloadCrosstab-Button"]

【讨论】：

对于这种情况下的特定实例，我认为 xpath 绝对是正确的方法。更不用说有一个名为“xpath helper”的谷歌浏览器扩展来让这些更快！ chrome.google.com/webstore/detail/xpath-helper/…

@Taku_ 对于特定情况没有必要，我见过一些项目可以这样做。他们在开发/测试团队之间定义了命名策略，以便他们可以轻松编写测试。他们甚至用这个做 TDD

【参考方案3】：

使用 CSS 选择器，特别是像这样的属性选择器：

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

x = browser.find_element_by_css_selector('[data-tb-test-id="DownloadCrosstab-Button"]')

这应该选择一个其data-tb-test-id 设置为DownloadCrosstab-Button 的项目。如果这个元素不是唯一的，它会给你它的第一次出现，所以在这种情况下你需要一个更具体的选择器