You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

使用CSS选择器获取闭合Span标签后的文本

用Selenium CSS选择器获取Angular生成的项目名称文本

嘿,作为刚接触Selenium和Angular的新手,我完全懂你想定位到{{project.projectName}}对应文本的需求!咱们先拆解你的HTML结构,然后一步步来解决问题。

首先,Angular的*ngFor渲染后,你的DOM结构会变成类似这样(假设project.id是1,projectName是"My Project"):

<ul class="projects">
  <li>
    <a routerLink="/detail/1">
      <span class="badge">1</span> My Project
    </a>
    <button class="delete" title="delete project" (click)="delete(project)">x</button>
  </li>
  <!-- 更多循环生成的li项... -->
</ul>

注意:{{project.projectName}}是直接作为文本节点存在于<a>标签内部的,和<span class="badge">同级,CSS选择器没办法直接选中这个文本节点(CSS只能选中元素,不能选文本节点)。不过我们可以通过以下步骤来获取目标文本:

方法1:定位<a>元素后提取文本

先通过CSS选择器定位到包含项目名称的<a>元素,获取它的完整文本后,再去掉前面的badge部分。

定位所有项目的<a>元素

如果你想遍历所有项目名称,可以用这个CSS选择器:

ul.projects li a

以Python的Selenium代码为例:

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
# 等待Angular异步渲染完成(非常重要,避免元素找不到)
driver.implicitly_wait(10)

# 获取所有项目的a元素
project_links = driver.find_elements(By.CSS_SELECTOR, 'ul.projects li a')

for link in project_links:
    # 获取完整文本,比如 "1 My Project"
    full_text = link.text
    # 分割文本,去掉前面的badge部分,得到项目名称
    project_name = full_text.split(' ', 1)[1]
    print(project_name)

定位单个特定项目的<a>元素

如果你想定位某个特定id的项目,可以结合routerLink属性写CSS选择器:

ul.projects li a[routerLink="/detail/1"]

把这里的1替换成你要找的project.id值,再按上面的方式提取文本即可。

方法2:结合JavaScript提取文本节点

如果badge的格式不固定(比如id是多位数),分割字符串可能不太可靠,你可以用JavaScript直接获取<a>标签下的目标文本节点:

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.implicitly_wait(10)

# 定位到目标a元素
project_link = driver.find_element(By.CSS_SELECTOR, 'ul.projects li a[routerLink="/detail/1"]')
# 执行JS获取文本节点内容
project_name = driver.execute_script("""
    const aElement = arguments[0];
    // 过滤出a元素下的文本节点
    const textNodes = Array.from(aElement.childNodes).filter(node => node.nodeType === Node.TEXT_NODE);
    // 取出项目名称对应的文本节点(第二个节点,第一个是换行/空格)
    return textNodes[1].textContent.trim();
""", project_link)
print(project_name)

重要提示

Angular是单页应用,页面内容是异步渲染的,所以在定位元素前一定要等待元素加载完成,可以用implicitly_wait或者显式等待(WebDriverWait),避免出现元素找不到的问题。

内容的提问来源于stack exchange,提问作者DialUp

火山引擎 最新活动