array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助（Microsoft Help Viewer）的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v；报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文（变量对象，作用域链，this）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记：快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习（二）Flotr2，雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树（Expression）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例：事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 基于Python的Web自动化（Selenium）之元素定位 - 爱码网

基于Python的Web自动化（Selenium）之元素定位

一、页面概况

其实上次我们一个简单的脚本是如下页面：

基于Python的Web自动化（Selenium）之元素定位

这其实就是百度的首页，在这张页面上有输入框、按钮和文字链接，还有一些图片、页面底部的文字，以及一些设置下拉框等。自动化要做的就是模拟鼠标和键盘来操作这些元素，或单击，或输入等。通过前端工具，可以看到页面上的元素都是由一行行代码组成的，它们之间有层级的组织起来，每个元素有不同的标签名和属性值。WebDriver就是通过这些信息找到不同的元素。

二、元素概况

基于Python的Web自动化（Selenium）之元素定位

点击中间文本框

有两种方式查看页面元素：

基于Python的Web自动化（Selenium）之元素定位

基于Python的Web自动化（Selenium）之元素定位鼠标右键点击查看元素

如何获取？

一、综述

1、WebDriver提供了8种元素定位方法，在Python语言中，所对应方法如下：

1.1第一种对应方式

基于Python的Web自动化（Selenium）之元素定位

1.2第二种对应方式（By定位元素）

前提是需要导入相应的类：from selenium.webdriver.common.by import By

基于Python的Web自动化（Selenium）之元素定位

二、详解

百度首页的前端代码：

基于Python的Web自动化（Selenium）之元素定位

以输入框和“百度一下”为例：

基于Python的Web自动化（Selenium）之元素定位

基于Python的Web自动化（Selenium）之元素定位

1、id定位

find_element_by_id("kw")

find_element_by_id("su")

或者

find_element(By.ID,"kw")

find_element(By.ID,'"su")

2、name定位

find_element_by_name("wd")

或者

find_element(By.NAME,"wd")

3、class定位

find_element_by_class_name("s_ipt")

或者

find_element(By.CLASS_NAME,"s_ipt")

4、tag定位

find_element_by_tag_name("input")

或者

find_element(By.TAG_NAME,"input")

5、link定位

link定位与前面介绍的几种定位方法有所不同，它专门用来定位文本链接，例如：

基于Python的Web自动化（Selenium）之元素定位

find_element_by_link_text("新闻")

或者

find_element(By.LINK_TEXT,"新闻")

以上几个都可以使用此方式。

6、partial link定位

此定位方式和link定位类似，不过有些文本链接会比较长，这个时候就可以取文本的一部分定位，只要这一部分信息可以唯一的标示这个链接即可，例如：

基于Python的Web自动化（Selenium）之元素定位

长链接文本

find_element_by_partial_link_text("新闻大发现")

或者

find_element(By.PARTIAL_LINK_TEXT,"新闻大发现")

7、xpath定位

xpath定位方式比较多，是一种在XML文档中定位元素的语言。因为HTML可以看作XML的一种实现，所以Selenium可以使用这种强大的语言在Web应用中定位元素。

7.1绝对路径定位

参考百度首页前端代码，可以找到输入框：

基于Python的Web自动化（Selenium）之元素定位

find_element_by_xpath("/html/body/div/div/div[5]/div/div/form/span/input")

或者

find_element (By.XPATH,"/html/body/div/div/div[5]/div/div/form/span/input")

7.2利用元素属性定位

这里就说一中简单的方式，百度首页右击检查定位到元素所在前端代码位置，然后右击选择"copy XPath"：


基于Python的Web自动化（Selenium）之元素定位

find_element_by_xpath("//*[@id="kw"]")

或者

find_element (By.XPATH,"//*[@id="kw"]")

xpath不限于所写方式，还有一些复杂定位方式（组合定位），遇到难以定位时可以使用。

8、CSS定位

CSS(Cascading Style Sheets)是一种语言，用来描述HTML和XML文档的表现。

基于Python的Web自动化（Selenium）之元素定位

百度首页输入框

8.1class定位

find_element_by_class_name(".s_ipt")

或者

find_element_by (By.CSS_SELECTOR,".s_ipt")

点号(.)表示通过class属性来定位元素。

8.2id定位

find_element_by_class_name("#kw")

或者

find_element_by (By.CSS_SELECTOR,"#kw")、

井号(#)表示通过id属性来定位元素。

基于Python的Web自动化（Selenium）之元素定位

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode