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

本文详细介绍了三种网页元素定位技术: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)
### 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、付费专栏及课程。

余额充值