web自动化学习-初识selenium、元素定位对象和定位方法

一、 selenium介绍及安装

驱动浏览器自动化的工具包，包括如下三部分内容：

• selenium IDE：录制工具，支持火狐和谷歌录制，稳定性差，一般不用
• selenium webdriver：第三方库，用来驱动浏览器的，结合代码来使用）
• selenium grid：分布式，可以让webdriver脚本运行在不同环境上的配置工具

1.安装第三方库

pip install selenium 更新时加-U参数

2.web自动化环境

操作浏览器

浏览器（IE、Firefox、Chrome）
人 >手动操作浏览器
代码 >直接操作浏览器
代码 >驱动程序 >浏览器
打开一个浏览器 每个浏览器都有一个驱动程序（ieserverDriver、chromedriver、geckdriver）
指令：客户端执行，执行指令（地址+端口，服务端）

驱动下载

驱动程序要和浏览器版本匹配，下载地址：http://npm.taobao.org/mirrors/chromedriver/
下载完成后，将驱动放置在配置过环境变量的路径下，例如：python的安装路径

二、元素定位的对象

1.关于html

selenium web网页自动化的实质是功能自动化
前端：html + css + js

• html：页面的内容表达，标签对（标签名）固定，是定义好的一套统一的标准，一个HTML页面中，有很多元素，元素有三个特征：标签名、属性、文本内容
• css：样式风格
• js：页面动态处理和用户响应

一个HTML页面中，有很多标签对，也叫做元素。 形如：
<标签名></标签名>
<标签名 属性名=值 属性名=值 属性名=值></标签名>
<标签名 属性名=值 属性名=值 属性名=值>文本内容</标签名>

在页面众多的元素中，如何找一个符合条件的元素

• 列举特征
• 在页面元素中，一个个去遍历匹配

2.元素的属性

style：内联样式，直接在元素上通过style属性来设置样式，display:none 隐藏属性不显示
input元素的属性：

• id （首要的元素定位方式）：在当前页面中，id属性值不会重复；唯一的，特殊情况下是动态生成的
• class 类：设置一个样式，class值不是唯一的，一个元素可以有多个class值，中间由空格隔开
• name：不唯一，重复度不是很高，弱于id的第二种元素定位方式
• type 设置输入类型，单选radio、复选checkbox、上传文件file等等

h1~h6元素：标题的大小
img元素：图片，src 属性指图片来源，alt属性指
a元素：链接，有href属性
div块级元素：专门用来分块的，独立的一块，独立换行
span：放一些文本
p：存放一些文本
ul 、li、table(th、td、tr)：表格相关
from元素：表单
select 以及option元素：下拉列表相关
iframe元素：网页元素，网页内层套了一个网页（HTML嵌套HTML），有src属性指向的页面，frameorder属性等
textarea元素：富文本，多文本域

资源管理窗口

HTML弹框表达：可以在HTML中直接定位到；
js弹窗表达：优先级高，不需要定位，示例可以通过console操作一些js语句，例如：alert(“hello,world!”)；confirm(“123”)；prompt(“请输入认证信息：”) 可以看到一些不同的js弹窗样式。

3.元素的状态

存在 ：存在于HTML中
可见： 在存在的前提下，有可见或不可见；例如页面上已经写了的元素可以设置不可见，通过其他方式的触发来调出来
可用： 在可见的前提下，可用或不可用；例如有个输入框，可以设置允许输入或者禁止输入

三、HTML网页中八大元素定位

元素定位：在整个HTML页面中，从顶层节点开始遍历，根据元素的特色，找到指定元素的过程

1.根据元素的一个特征来定位，六种

• id：元素的id属性，可以唯一定位

• class：元素的class属性

• tag：元素的标签名

• name：元素的name属性，仅次于id，唯一性较高的

• link_text：根据a元素的文本内容，完全匹配

• partial_link_text：根据a元素的文本内容，包含匹配

  """
  find_element_by_xxx :返回的是第一个遇到的元素，返回的唯一元素是WebElement对象
  find_elements_by_xxx:返回页面中所有匹配表达式的元素，返回结果是一个列表，成员是WebElement对象
  """
  
  # id
  driver.find_element_by_id("kw")
  driver.find_elements_by_id("kw")
  # class
  driver.find_element_by_class_name("s_ipt") # 只支持一个class值
  driver.find_elements_by_class_name("s_ipt")
  # tag_name
  driver.find_element_by_tag_name("input")
  driver.find_elements_by_tag_name("input")
  # name
  driver.find_element_by_name("wd")
  driver.find_elements_by_name("wd")
  # link_text
  driver.find_element_by_link_text("hao123")
  driver.find_elements_by_link_text("hao123")
  # partial_link_text
  driver.find_element_by_partial_link_text("123")
  driver.find_elements_by_partial_link_text("123")
  

2.根据元素的多种特征及关系来定位（万能定位），两种

2.1 xpath定位

driver.find_elements_by_xpath('//*[@id="leftcolumn"]/a[12]').click()

绝对定位：/ 开头；父节点/子节点；从根节点开始，一直到当前节点。节点顺序/节点位置

• 绝对路径：从根目录开始，一直到当前位置

相对定位：// 开头

• 相对路径：相对于前面节点。若// 在开头，就是相对于整个HTML

  定位原则：1.不依靠节点顺序和节点位置；2.只要能够找到匹配特征的元素即可
  定位辅助工具：F12后通过ctrl+f查找匹配
  相对定位表达式：
  01.//标签名[@属性名=值] # 精准匹配属性值
  02.//标签名[text()=值] # 精准匹配文本
  03.//标签名[contains(@属性名,值)] # 部分匹配属性值
  04.//标签名[contains(text(),值)] # 部分匹配文本值
  05.//* [contains(@,值)] # 标签名和属性名都可以用 ，表示匹配所有，第一个* 代表从根节点开始匹配，第二个* 表示任意属性，直到找到符合条件的数据
  06.组合条件,逻辑(and、or) //标签名[text()=值 and @属性名=值 and contains(text(),值)]
  07.层级：//祖先节点//要找的节点 ，祖先节点后用//代表从其下开始找，比用/更稳定，
  示例：//div[@id=“u1”]//a[test()=“登录”];
  08.轴定位：通过元素的兄弟姐妹、子孙、父母；轴运算；其中查找中有id尽量用id

语法：已知的元素/轴名称::标签名称[特征元素] # 注意此处轴名称前是 /

轴名称有如下几种：

• ancestor：祖先节点，包括父节点

• parent：父节点

• preceding：当前元素节点标签之前的所有节点

• preceding-sibling：当前元素节点标签之前的所有兄弟节点

• following：当前元素节点标签之后的所有节点

• following-sibling：当前元素节点标签之后的所有兄弟节点

  用法示例：
  a. //标签名称[@属性=值]/parent::标签名称[@属性=值]
  b. //标签名称[text()=值]/preceding-sibling::特征属性
  c. //p[@title=“01”]/following-sibling::p[@class=“name”]
  页面显示为一个表格样式的数据列，需要通过组合来定位元素
  d. //span[text()=“测试”]/ancestor::a/following-sibling::p//div

2.2 css selector：css选择器

driver.find_element_by_class_name('#leftcolumn > a:nth-child(12)').click()

https://www.w3school.com.cn/cssref/css_selectors.asp

如上几类定位方式最终调用的都是
find_element(by=By.定位类型, value=name)
用法示例：
driver.find_element(By.XPATH, ‘//[@id=“leftcolumn”]/a[12]’).click()
或者
loc=(By.XPATH, '//[@id=“leftcolumn”]/a[12]’)
driver.find_element(*loc).click()

3.定位过程

• 确认要找的元素

• 通过F12查看元素特征

• 代码操作浏览器，示例

  from time import sleep
  
  from selenium import webdriver
  
  # 打开浏览器
  driver = webdriver.Chrome()
  # 窗口最大化
  driver.maximize_window()
  # 访问某一地址
  driver.get("https://www.baidu.com/")
  # 通过定位表达式，遍历去找到对应的元素
  element = driver.find_element_by_id("kw")  # WebElement对象,既有属性又有行为
  print(element)
  print(element.tag_name)
  # 在找到的元素中，输入文本
  element.send_keys("百度网盘")
  sleep(3)
  # 关闭当前窗口
  driver.close()
  # 关闭浏览器，关闭会话
  driver.quit()
  

find_element方法

from selenium.webdriver.common.by import By
……
loc=(By.XPATH,'定位信息')
driver.find_element(*loc)
driver.close()