在chrome-console中进行xpath/css/js定位

最新推荐文章于 2025-04-28 15:27:03 发布
最新推荐文章于 2025-04-28 15:27:03 发布
阅读量7k 收藏 23
点赞数 5
分类专栏： UI自动化测试 文章标签： UI console 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jamieblue1/article/details/101075193
版权
本文详细介绍了三种网页元素定位技术：Xpath、CSS选择器和JS定位。涵盖了Xpath的绝对定位与相对定位、通配符使用、亲戚标签定位等；CSS选择器的基本格式、常用符号及属性筛选；JS定位的DOM对象操作方法。适合前端开发者和自动化测试工程师学习。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录


一、Xpath

console中调用xpath的基本格式：$x("xpath表达式")

1.1 绝对定位与相对定位

  • 绝对定位：$x("/xpath表达式")
  • 相对定位：$x("//xpath表达式")

在这里插入图片描述

在这里插入图片描述

1.2 通配符与不包含筛选

属性@
在这里插入图片描述
通配符*
在这里插入图片描述
不包含not()
在这里插入图片描述
包含contains()
在这里插入图片描述

1.3 Xpath函数运算的简单实用

注意：xpath函数有很多，这里只是列举了一些简单的函数，若查看其他函数，请看xpath官方文档；

定位时去除空格
例：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
去除空格

在这里插入图片描述
统计元素个数
例：统计行数为2行的元素个数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

筛选name以dl开头：starts-with(name(), ‘dl’)
筛选字符串长度等于2的：string-lenth(name())=2

1.4 各种亲戚标签的定位

父标签parent::
比如定位div父标签parent::div
在这里插入图片描述
在这里插入图片描述

子标签child

哥哥标签preceding-sibling::
在这里插入图片描述
弟弟标签following-sibling::
在这里插入图片描述
后代标签descendant::

在这里插入图片描述
在这里插入图片描述
祖先标签ancestor::
在这里插入图片描述

二、css选择器

2.1 基本格式

console中调用css的基本格式：$("css表达式")或者$$("css表达式")
谷歌插件：SelectorGadget

2.2 常用符号

.点，代表每个标签class的属性为xx
在这里插入图片描述
在这里插入图片描述

#，代表整个标签中有个元素的id为xx
在这里插入图片描述
在这里插入图片描述

,逗号，代表谁和谁
在这里插入图片描述
空格，代表所有的后代标签
在这里插入图片描述
>大于号，代表所有的儿子标签，不包括孙子标签

在这里插入图片描述
在这里插入图片描述

2.3 CSS选择器的属性筛选

属性筛选
在这里插入图片描述

在这里插入图片描述
区别：xpath中带@，css中不带@

属性中带空格怎么筛选？
在这里插入图片描述

在这里插入图片描述

区别：xpath中class带空格直接写空格，css中用.点代替

包含某些字符的属性怎么筛选？

在这里插入图片描述

以某些字符开头的属性怎么筛选？
在这里插入图片描述

三、js定位

console里面执行javascript代码，操作dom对象。

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
在这里插入图片描述

  1. 通过id获取
    document.getElementById(“id”)
  2. 通过name获取
    document.getElementsByName(“Name”) 返回的是list
  3. 通过标签名选取元素
    document.getElementsByTagName(“tag”)
  4. 通过CLASS类选取元素
    document.getElementsByClassName(“class”)
    兼容性：IE8及其以下版本的浏览器未实现getElementsByClassName方法
  5. 通过CSS选择器选取元素
    document.querySelectorAll(“css selector")
    兼容性：IE8及其以下版本的浏览器只支持CSS2标准的选择器语法
    在这里插入图片描述

【举例代码】

js = 'document.getElementById("helloId").click();'

driver.execute_script(js)
【大模型应用开发 动手做AI Agent】LlamaIndex和基于RAG的AI开发
AI天才研究院
05-27 1244
随着人工智能技术的飞速发展,大语言模型(Large Language Models, LLMs)在各个领域得到了广泛应用。LLMs通过从大规模文本语料中学习,可以生成连贯、自然的文本,完成复杂的自然语言处理任务。然而,LLMs仍然存在知识储备有限、推理能力不足等问题。为了进一步增强LLMs的能力,学术界和工业界开始探索LLMs与其他技术的结合,比如知识图谱、检索增强生成(Retrieval-Augmented Generation, RAG)等。
LlamaIndex-01-starter
mitujx的博客
06-23 696
在创建文档时，您还可以附加有用的元数据。添加到文档中的任何元数据都将复制到从其相应源文档创建的节点。默认情况下，我们使用OpenAI的模型。您可以选择在构建索引时使用另一个LLM。根据所使用的索引，我们使用默认提示词模板来构建索引（以及插入/查询）。LlamaIndex的核心使命是为大型语言模型（LLM）和您的私人外部数据提供接口。在过去的几个月中，它已成为最受欢迎的开源框架之一，用于LLM数据增强（上下文增强生成），适用于各种用例：问答、摘要、结构化查询等。
LlamaIndex快速构建RAG解决大模型的幻觉问题
weixin_41688410的博客
02-10 1688
LlamaIndex 是一个开源框架，用于快速构建检索增强生成（RAG）应用。它可以帮助开发者将检索组件（如向量数据库）与语言生成模型（如 LLM）结合，高效地处理和检索文档数据，从而生成更准确、更有依据的内容在生成式 AI 的快速发展中，大模型的幻觉问题一直是制约其广泛应用的关键挑战之一。幻觉现象不仅降低了模型输出的可信度，还可能在实际应用中引发严重后果。为了解决这一问题，检索增强生成（RAG）技术应运而生，通过结合信息检索和语言生成，显著提升了生成内容的准确性和可靠性。
LlamaIndex 项目安装和配置指南
gitblog_09487的博客
09-13 947
LlamaIndex 项目安装和配置指南 llama_index 项目地址: https://gitcode.com/gh_mirrors/lla/llama_index ...
llamaIndex使用简讲
qq_47003799的博客
03-05 1074
llamaIndex构建RAG基本流程分解概述，组件简讲。
llamaindex-RAG实例
Loss
03-19 281
从modelscope上下载deepseek-r1:1.5b。测试两次，出现幻觉问题。
使用LlamaIndex构建RAG
wengad的博客
10-05 1322
LlamaIndex是一个数据框架，它主要用于连接大型语言模型（LLMs）与外部数据源，例如API、PDF文档、SQL数据库等。这个框架的设计目的是为了增强LLM的能力，使其能够理解和生成更准确、更有上下文关联的文本，尤其是在涉及私人数据或特定领域知识的情况下。LlamaIndex通过创建索引结构来组织和访问数据，这样可以更高效地检索相关信息并将其提供给LLM。这些索引可以是列表索引、向量索引、树索引或关键词索引等，具体取决于数据类型和需求。
【书生浦语大模型实战营第三期】基础岛 InternLM + LlamaIndex RAG 实践
weixin_40574825的博客
08-04 1037
llamaindex+Internlm2 RAG实践。
【从零开始系列】Qwen2.5 & Llama-Factory：开源语言大模型+训练平台——（超详细、最新版）一篇文章解决：环境搭建 =＞ 微调训练 =＞ 本地部署
qq_58718853的博客
01-13 5993
使用llama-factory大语言模型微调高效平台，对qwen2.5官方预训练模型进行微调并部署
LLM之RAG之LlaMAIndex：llama-index(一块轻快构建索引来查询本地文档的数据框架神器)的简介、安装、使用方法之详细攻略
头部AI社区如有邀博主AI主题演讲请私信—心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，专注，谦虚，自律，反思，成长，还算比较正能量的博主，公益免费传播…内心特别想在AI界做出一些可以推进历史进程影响力的技术(兴趣使然，有点小情怀，也有点使命感呀
11-06 5658
​ LLM之RAG之LlaMAIndex：LlamaIndex(一块轻快构建索引来查询本地文档的数据框架神器)的简介、安装、使用方法之详细攻略 目录 LlamaIndex的简介 LlamaIndex的安装 LlamaIndex的使用方法 LlamaIndex的简介 LlamaIndex是一个数据框架，用于基于LLM的应用程序摄取、构建和访问私有或特定领域的数据。它可以在Python(这些文档)和Typescript中使用。 LLM提供了人与数据之间的自然语言接口。广泛
最强开源大模型炸场！全网独一份AI大模型学习实践资源...（待会删）
Y525698136的博客
08-07 1417
最强开源大模型炸场！全网独一份AI大模型学习实践资源...（待会删）
LlamaIndex 实现 RAG （一）
hawk2014bj的博客
08-22 1546
本文简单实现 RAG 的流程，并实现了可视化页面，关于文档的切分以及 RAG 不同组件的详细讲解，会在后续文章继续分享。代码地址：https://gitcode.com/hawk2014bj/llamaindex/overview源代码也可以从资源中下载。
使用 LlamaIndex 构建 RAG 应用程序
最新发布
分享各种技术文章，给大家带来不一样的视野。
04-28 691
LlamaIndex（原名 GPTIndex）是一个用于构建 LLM 驱动应用程序的 Python 框架。它充当自定义数据源和大型语言模型之间的桥梁，简化了数据提取、索引和查询。LlamaIndex 内置支持各种数据源、矢量数据库和查询接口，是 RAG 应用的一体化解决方案。它还能与 LangChain、Flask 和 Docker 等工具无缝集成，使其在实际应用中具有高度的灵活性。在此处探索 LlamaIndex 的官方 GitHub 存储库。
【RAG 实践】LlamaIndex 快速实现一个基于 OpenAI 的 RAG
VLyb
07-13 1599
一个使用 LlamaIndex 实现的 RAG demo
基于Llamaindex的本地向量与大模型RAG搭建流程
大数据，大模型，服务器，技术、架构，方案
11-19 1333
本文展示了 Llamaindex + Chunk + Local Embed +Ollama + RAG 的全流程代码。这里设置了 Ollama 作为语言模型，并指定了其 API 的基础 URL、使用的模型名称以及请求超时时间。这里查询的是关于“dify 的开源协议”的信息。从指定目录中读取文档，并使用设置好的嵌入模型和分词器将这些文档转换为向量存储索引。嵌入模型，用于将文本转换为向量表示。
快速开始使用LlamaIndex: 从安装到OpenAI集成
ppoojjj的博客
06-18 1837
如果您不使用OpenAI，或者希望进行更有选择性的安装，可以根据需要安装单个包。例如，对于本地设置和HuggingFace嵌入，安装命令可以是：sh。
LlamaIndex环境配置
qq_51907069的博客
01-18 622
llamaindex环境的各个包的版本
llama_index，一个超强的 Python 库！
涛哥聊Python
07-25 1996
llama_index库是一个功能强大且易于使用的索引和检索工具，能够帮助开发者高效地处理各种类型的数据。通过支持基本的索引和检索功能、复杂查询、分页检索和索引分析，llama_index库能够满足各种信息检索需求。本文详细介绍了llama_index库的安装方法、主要特性、基本和高级功能，以及实际应用场景。希望本文能帮助大家全面掌握llama_index库的使用，并在实际项目中发挥其优势。无论是在文档管理系统、客户评论分析还是学术文献检索中，llama_index库都将是一个得力的工具。
llamaindex 多模态RAG
02-05
### LlamaIndex 多模态 RAG 实现 LlamaIndex 支持多种数据类型的接入与处理，这使得它成为构建多模态检索增强生成（RAG）系统的理想选择[^1]。为了实现这一目标，LlamaIndex 结合了不同种类的数据连接器、索引机制以及强大的查询引擎。 #### 数据连接器支持多样化输入源 对于多模态数据的支持始于数据收集阶段。LlamaIndex 的数据连接器可以从多个异构资源中提取信息，包括但不限于APIs、PDF文档、SQL数据库等。这意味着无论是文本还是多媒体文件中的内容都可以被纳入到后续的分析流程之中。 #### 统一化的中间表示形式 一旦获取到了原始资料之后，下一步就是创建统一而高效的内部表达方式——即所谓的“中间表示”。这种转换不仅简化了下游任务的操作难度，同时也提高了整个系统的性能表现。尤其当面对复杂场景下的混合型数据集时，良好的设计尤为关键。 #### 查询引擎助力跨媒体理解能力 借助于内置的强大搜索引擎组件，用户可以通过自然语言提问的形式轻松获得所需答案；而对于更复杂的交互需求，则提供了专门定制版聊天机器人服务作为补充选项之一。更重要的是，在这里实现了真正的语义级关联匹配逻辑，从而让计算机具备了一定程度上的‘认知’功能去理解和回应人类意图背后所蕴含的意义所在。 #### 应用实例展示 考虑到实际应用场景的需求多样性，下面给出一段Python代码示例来说明如何利用LlamaIndex搭建一个多模态RAG系统： ```python from llama_index import GPTSimpleVectorIndex, SimpleDirectoryReader, LLMPredictor, PromptHelper, ServiceContext from langchain.llms.base import BaseLLM import os def create_multi_modal_rag_system(): documents = SimpleDirectoryReader(input_dir='./data').load_data() llm_predictor = LLMPredictor(llm=BaseLLM()) # 假设已经定义好了具体的大型预训练模型 service_context = ServiceContext.from_defaults( chunk_size_limit=None, prompt_helper=PromptHelper(max_input_size=-1), llm_predictor=llm_predictor ) index = GPTSimpleVectorIndex(documents, service_context=service_context) query_engine = index.as_query_engine(similarity_top_k=2) response = query_engine.query("请描述一下图片里的人物表情特征") print(response) ``` 此段脚本展示了从加载本地目录下各类格式文件开始直到最终完成一次基于相似度排序后的top-k条目返回全过程。值得注意的是，“query”方法接收字符串参数代表使用者想要询问的内容，而在后台则会自动调用相应的解析模块并结合先前准备好的知识库来进行推理计算得出结论。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值