如何在Selenium中定位tagbutton（角度组件）？

Question

这是我试图定位的按钮的HTML，它在我看来是一个角度组件：

<tab-button class="tab-button _ngcontent-jne-2 _nghost-jne-3" focusitem="" role="tab" aria-selected="false" tabindex="-1" aria-disabled="false" aria-label="Offline Reporting">
    <!---->
    <div class="content displayed-value _ngcontent-jne-3">Offline Reporting</div>
    <!---->
    <material-ripple class="_ngcontent-jne-3">
        <div class="__acx-ripple" style="top: -103px; left: -45px; transform: translate(17px, -1px) scale(0.88156);"></div>
        <div class="__acx-ripple" style="top: -101px; left: -62px; transform: translate(34px, -3px) scale(0.88156);"></div>
    </material-ripple>
</tab-button>

注意，我想找到tab-button，它具有aria-label=Offline Reporting。以下是我所尝试的：

element = driver.find_element_by_xpath("//tab-button[@aria-label='Offline Reporting']")

element = driver.find_element_by_tag("tab-button")

element = driver.find_element_by_tag_name("tab-button")

element = driver.find_element_by_css_selector("tab-button")

以上这些都不起作用。你能指出正确的方法吗？我必须找到选项卡按钮（在众多按钮中），它的aria-label为脱机报告

快速编辑

请注意，我使用SeleniumWeb驱动程序也是出于同样的目的，并且我尝试加载的页面是一个有角度的页面。根据我的理解，内容在这里是动态呈现的，因此即使我可以在元素检查器中看到它，也无法通过find_element函数找到它

以下是相同的快照：

请注意，我已经尝试了当前答案中提到的所有内容。。。等待页面完全加载，即使页面完全加载，我也尝试了50秒的延迟，如下所示：

WebDriverWait(driver, 50).until(EC.visibility_of_element_located((By.XPATH, "//tab-button[contains(@class, 'tab-button') and @aria-label='Offline Reporting']")))

但这也以timeout告终。我试图通过这些行指出的一点是，这是一个动态呈现的页面，因此要处理它，需要一些其他中间件机制，如scrapy-selenium

Answer 1

尝试等待按钮变为可见并可单击：

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

button = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//tab-button[@aria-label='Offline Reporting']")))
button.click()

Answer 2

要定位文本为脱机报告的元素，可以使用以下任一Locator Strategies：

• 使用css_selector：

  element = driver.find_element_by_css_selector("tab-button.tab-button[aria-label='Offline Reporting']")
  

• 使用xpath：

  element = driver.find_element_by_xpath("//tab-button[contains(@class, 'tab-button') and @aria-label='Offline Reporting']")
  

---

由于元素是Angular元素，理想情况下，要定位元素，需要为element_to_be_clickable()诱导WebDriverWait，并且可以使用以下Locator Strategies之一：

• 使用CSS_SELECTOR：

  element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "tab-button.tab-button[aria-label='Offline Reporting']")))
  

• 使用XPATH：

  element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//tab-button[contains(@class, 'tab-button') and @aria-label='Offline Reporting']")))
  

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

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