python+selenium的笔记

一、选择元素的基本方法

I 通过WebDriver对象选择元素

1.根据元素的id属性选择元素

  • input元素内容中,有属性id,id属性是用来html中标记该元素的,而且id是html中唯一的。如果元素有id,根据id选择元素是最高效的。
    在这里插入图片描述
    上图是百度搜索框,元素id的值为kw,下面代码,可以通过自动化在浏览器访问百度,并搜索子明
    from selenium import webdriver 
    
    # 创建 WebDriver 对象
    driver = webdriver.Edge(executable_path='msedgedriver.exe的绝对路径')
    
    # 调用WebDriver对象的get方法可以让浏览器打开指定网址
    driver.get('https://www.baidu.com')
    
    # 根据id选择元素,返回的就是该元素对应的WebElement对象
    element = driver.find_element_by_id('kw')
    """
    上面代码发起一个请求通过浏览器驱动转发给浏览器,告诉它,需要选择一个id为 kw 的元素。浏览器找到id为kw的元素后,
    将结果通过浏览器驱动返回给自动化程序,所以find_element_by_id 方法会返回一个WebElement 类型的对象。我们就是
    通过这个WebElement对象,操控对应的界面元素。
    """
    
    # 比如输入字符串到 这个 输入框里
    element.send_keys('子明\n')  # 如果没有\n的话,就要使用如下语句
    #element = driver.find_element_by_id("su").click()
    

【注】 如果你想在请求的时候用options参数来配置20年发行用chrome内核为主的Edge,比如添加代理,设置编码,直接option = webdriver.EdgeOptions(),然后使用option.add_argument()方法是行不通的,本人也遇到这种问题,后来看到大佬博客解其惑,博客链接奉上:https://blog.csdn.net/g28757/article/details/109363717

2.根据元素的class属性选择元素

  • input元素内容中,也有class属性,class 属性就用来标志着元素类型
    在这里插入图片描述
    还是百度搜索框,元素class的值为’s_ipt’,下面代码,可以通过自动化在浏览器访问百度,并搜索子明
    from selenium import webdriver
    
    # 创建 WebDriver 对象
    driver = webdriver.Edge(executable_path='msedgedriver.exe的绝对路径')
    
    driver.get('https://www.baidu.com')
    
    # 根据class选择元素
    element = driver.find_element_by_class_name('s_ipt')
    
    element.send_keys('子明\n')
    

3.根据tag(标签)名选择元素

  • 对于那些只有标签的元素挺好用的,后面京东图书那个例子能体现出来在这里插入图片描述
    为了演示,还是选择百度的搜索框
    from selenium import webdriver
    # 创建 WebDriver 对象
    driver = webdriver.Edge(executable_path='msedgedriver.exe的绝对路径')
    
    driver.get('https://www.baidu.com')
    
    # 根据tag名选择元素
    """
    这里要注意,input标签这么多,此时如果用driver.find_element_by_tag_name(),那么只能返回整个html页面的第一个input标签元素,
    而driver.find_elements_by_tag_name()才能以列表的形式返回所有的元素。这2个方法还有个区别就是,
    前者没找到元素会抛出NoSuchElementException 异常,而后者只会返回空列表
    """
    element = driver.find_elements_by_tag_name('input')
    element[7].send_keys('子明\n')
    

【注】:肯定会有人会问element[7]怎么来的,首先在浏览器页面检查元素,通过ctrl+F 搜索input标签(这个搜索框不仅可以搜索元素,还可以写css表达式,Xpath表达式),然后发现百度搜索框的input是第8个元素,那么在返回的列表中的索引是7,所以就有了element[7]

在这个搜索框也可以验证是否有某个元素,CSS Selector 的语法是否正确,xpath表达式是否正确等,大大减少了bug

II 通过WebElement对象选择元素

  • WebDriver 对象选择元素的范围是 整个 web页面,而WebElement对象选择元素的范围是该元素的内部,这是两者的区别,比如获取京东图书所有分类:
    在这里插入图片描述
    from selenium import webdriver
    
    # 创建 WebDriver 对象
    driver = webdriver.Edge(executable_path='msedgedriver.exe的绝对路径')
    
    driver.get('https://book.jd.com/booksort.html')
    
    # 限制选择元素的范围是 tag 为 em 元素的内部
    element = driver.find_elements_by_tag_name('em')
    for i in element:
      print(i.text)
    

二、操控元素的基本方法

I 点击元素

  • click()方法,前面也提过,补充一点:调用 WebElement对象的 click 方法去点击元素的时候, 浏览器接收到自动化命令,点击的是该元素的中心点位置

II 输出框

  • send_keys() ,如果输入框已有内容,可以调用clear方法清除
    element = wd.find_element_by_id("input")
    
    element.clear() # 清除输入框已有的字符串
    element.send_keys('子明') # 输入新字符串
    

III 获取元素信息

1.获取文本信息

  • 通过WebElement对象的 text 属性,可以获取元素展示在界面上的文本内容。

【注】如果元素没有展示在页面上,或者没有完全展示在界面上,这个使用text属性获取文本内容肯定会有问题,出现这种情况,可以尝试 element.get_attribute(‘innerText’) ,或者 element.get_attribute(‘textContent’)

2.获取元素属性

  • get_attribute() 方法 来获取元素的属性值
    # 以百度搜索框为例
    element = driver.find_element_by_id('kw')
    print(element.get_attribute('class'))
    

3.获取整个元素对应的HTML

  • 要获取整个元素对应的HTML文本内容,可以使用 element.get_attribute(‘outerHTML’),如果只是想获取某个元素 内部 的HTML文本内容,可以使用 element.get_attribute(‘innerHTML’)

4.获取输出框里面的文字

  • 对于input输入框的元素,要获取里面的输入文本,用text属性是不行的,可以使用 element.get_attribute(‘value’)

三、frame切换/窗口切换

I frame

在这里插入图片描述

  • 这是QQ邮箱的html页面,在html语法中,frame元素或者iframe元素的内部会包含一个被嵌入的另一份html文档。我们是不能直接操作被嵌套在里面的元素的,要先切换到嵌套的html里面,使用 WebDriver 对象的 switch_to 属性
# driver.switch_to.frame(iframe_reference)
# frame_reference可以是frame元素的属性name或者ID 

driver.switch_to.frame(mainFrame)
  • 进去了,怎么切回来呢?
driver.switch_to.default_content()

II 窗口

  • 在网页上操作的时候,我们经常遇到,点击一个链接或者按钮,就会打开一个新窗口 ,但是我们的 WebDriver对象对应的还是老窗口,自动化操作也还是在老窗口进行,这个时候需要切换窗口
# 使用Webdriver对象的switch_to属性的 window方法
driver.switch_to.window(handle)
# 但是WebDriver对象有window_handles 属性,这是一个列表对象,里面包括了当前浏览器里面所有的窗口句柄。
# 这个时候需要用点小技巧去解决,用微软bing搜索当例子
for handle in driver.window_handles:
    # 先切换到该窗口
    wd.switch_to.window(handle)
    # 得到该窗口的标题栏字符串,判断是不是我们要操作的那个窗口
    if 'Bing' in driver.title:
        # 如果是,那么这时候WebDriver对象就是对应的该该窗口,正好,跳出循环,
        break

四、选择框的处理

I radio框

在这里插入图片描述

  • radio框选择选项,直接用WebElement的click方法,模拟用户点击就可以了。
# 默认是第三个和第五个,现在选择第一个和第五个
from selenium import webdriver
import time

driver = webdriver.Edge(executable_path='msedgedriver.exe的绝对路径')

driver.get('https://www.html5tricks.com/demo/css3-styled-checkbox-radiobox/index.html')

# 这个地方用到了后面的知识,有人就会问,为啥要用css表达式呢,不用普通方法,客官不急,咱往后看再回来看
element = driver.find_element_by_css_selector('[for=rad]')

# 这个地方选择睡眠2秒,因为在我们进行网页操作的时候,有的元素内容不是可以立即出现的,可能会等待一段时间
"""
比如 百度搜索一个词语,我们点击搜索后,浏览器需要把这个搜索请求发送给百度服务器,百度服务器进行处理后,把搜索结果返回给我们。
所以从点击搜索到得到结果,需要一定的时间,只是通常百度服务器的处理比较快,我们感觉好像是立即出现了搜索结果。因为我们的代码执行的速度比百度
服务器响应的速度快,可能就会报selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element:
 {"method":"id","selector":"1"}的错误,而等待记载时间只是导致这个错误之一,下面会给一些方法去解决这个问题,1.检查程序是否写错 
 2.是否需要切换iframe 3.是否需要加等待时间 4.是否需要用js的方法来scroll滚动条 5.涉及到check的话check是否可以点击的。
"""
time.sleep(2)
element.click()

【注】那到底设置多长时间合理呢?太短1s,可能解决不了问题,太长20s,浪费大量时间。Selenium提供了一个合理的解决方案:当发现元素没有找到的时候, 并不立即返回 找不到元素的错误。而是周期性(每隔半秒钟)重新寻找该元素,直到该元素找到,或者超出指定最大等待时长,这时才 抛出异常(如果是 find_elements 之类的方法, 则是返回空列表)。

# Selenium 的 Webdriver对象有个方法叫 implicitly_wait,该方法接受一个参数,用来指定最大等待时长时间
driver.implicitly_wait(5)  # 每隔半秒寻找一次元素,最多等待5秒

但是是不是time.sleep()就没作用了呢?在一些场景还是得用到,比如:你想详细的看到元素被操作的过程

II checkbox框

在这里插入图片描述

  • 对checkbox进行选择,也是直接用 WebElement 的 click 方法,模拟用户点击选择。需要注意的是,要选中checkbox的一个选项,必须先获取当前该复选框的状态 ,如果该选项已经勾选了,就不能再点击。否则反而会取消选择。
from selenium import webdriver
import time

driver = webdriver.Edge(executable_path='msedgedriver.exe的绝对路径')

driver.get('https://www.html5tricks.com/demo/css3-styled-checkbox-radiobox/index.html')

# 第一个勾选
element = driver.find_element_by_css_selector('[for=chk]')

time.sleep(1)
element.click()

# 第二个不勾选
element = driver.find_element_by_css_selector('[for=chk2]')

time.sleep(1)
element.click()

III select框

1.基本方法

在这里插入图片描述

对于Select 选择框, Selenium 专门提供了一个 Select类 进行操作。

from selenium import webdriver
from selenium.webdriver.support.ui import Select  # 导入select类

driver = webdriver.Edge(executable_path='msedgedriver.exe绝对路径')

driver.get('https://www.jq22.com/yanshi20815')

driver.switch_to_frame("iframe")

# 创建Select对象
s = Select(driver.find_element_by_id("id_select"))

# 基本方法
# 1.根据选项的value属性值选择元素,例:<option value="湖南">湖南</option>
s.select_by_value('湖南')

# 2.根据选项的次序(从0开始选择元素), 例: 江苏是第二个,选中江苏
s.select_by_index(1)

# 3.根据选项的可见文本选择元素, 例:<option value="湖南">湖南</option>
s.select_by_visible_text('湖南')  # 第二个湖南

# 4.根据选项的value属性值去除选中元素
s.deselect_by_value("湖南")

# 5.根据选项的次序去除选中元素
s.deselect_by_index(1)

# 6.根据选项的可见文本去除选中元素
s.deselect_by_visible_text("湖南")

# 7.去选中所有元素(没有参数)
s.deselect_all()

2.select单选框

from selenium import webdriver
from selenium.webdriver.support.ui import Select  # 导入select类

driver = webdriver.Edge(executable_path='msedgedriver.exe绝对路径')

driver.get('https://www.jq22.com/yanshi20815')

driver.switch_to_frame("iframe")

# 创建Select对象
s = Select(driver.find_element_by_id("id_select"))

# 通过select对象选中湖南
s.select_by_value("湖南")

3.select多选框

from selenium import webdriver
from selenium.webdriver.support.ui import Select  # 导入select类

driver = webdriver.Edge(executable_path='msedgedriver.exe的绝对路径')

driver.get('https://www.jq22.com/yanshi20815')

driver.switch_to_frame("iframe")

# 创建Select对象
s = Select(driver.find_element_by_id("id_select"))

# 清除已经选到的(唯一一个多选不同于单选的细节)
s.deselect_all()

# 通过select对象选中湖南,江苏,江西 
s.select_by_value("湖南")
s.select_by_value("江苏")
s.select_by_value("江西")

五、css表达式

I 原理

  • 1.在选择框那一部分就用到了css表达式,那是因为如果我们要选择的元素没有id、class 属性,或者有些我们不想选择的元素也有相同的 id、class属性值,这个时候就用到了CSS selector 语法选择元素。
  • 2.通过 CSS Selector 选择单个元素的方法

    find_element_by_css_selector(CSS Selector参数)

  • 3.选择所有元素的方法

    find_elements_by_css_selector(CSS Selector参数)

II 根据tag名,id,class,其他属性选择元素

# 百度搜索框为例
from selenium import webdriver

driver = webdriver.Edge(executable_path='msedgedriver.exe绝对路径')

driver.get('https://www.baidu.com/')

# 1.根据id属性 选择元素的语法是在id号前面加上一个井号: #id值
element = driver.find_element_by_css_selector("#kw")
element.send_keys('子明\n')

# 2.根据class属性选择元素的语法是在 class 值前面加上一个点: .class值
element = driver.find_element_by_css_selector(".s_ipt")
element.send_keys('子明\n')

# 3.根据tag名选择元素的CSS Selector语法非常简单,直接写上tag名
element = driver.find_elements_by_css_selector("input")
element[7].send_keys('子明\n')

# 4.根据其他属性来选择元素,语法是用一个方括号 [] 
element = driver.find_element_by_css_selector("[name='wd']")  # 根据name属性
element.send_keys('子明\n')

III 选择子元素和后代元素

在这里插入图片描述

  • 1.from后面的第一个span是其子元素,后面的span都是其后代元素(相邻才是直接子元素,隔代便是后代子元素,比如后面的一排input,而后代元素包括后代子元素)
  • 2.选择子元素的语法(可以多层选择)

    元素1 > 元素2 > 子元素3

  • 3.选择后代元素的语法,一个或多个空格隔开

    元素1 元素2

IV 按次序选择

from selenium import webdriver
import time

driver = webdriver.Edge(executable_path='msedgedriver.exe绝对路径')

driver.get('https://www.baidu.com/')
driver.implicitly_wait(3)
# 1.父元素的第几个子节点,nth-child (还是以百度搜索框为例)
# input:nth-child(2)会有2个结果,很奇怪的是,如果你用find_element×××竟然返回的是后面一个,具体情况俺也不太清楚
# input是节点类型限制,tag名为input的第二个子节点,也是是其他元素来限制,比如id啥的,但是这样的话,为啥不直接就按id来选择元素呢?
# 为了突出这个知识点,所以采用了tag名,有多个input标签,但是用父元素的第2个子节点,还是有2个元素
elements = driver.find_elements_by_css_selector("input:nth-child(2)") 

for element in elements:
    if element.get_attribute("type") == "text":
        element.send_keys("子明\n")

# 2.选择的是父元素的倒数第几个子节点 ,nth-last-child
element = driver.find_element_by_css_selector("input:nth-last-child(3)")
element.send_keys("子明\n")

# 3.父元素的第几个某类型的子节点, nth-of-type
elements = driver.find_elements_by_css_selector("input:nth-of-type(1)")  # 第一个input类型的子元素

for element in elements:
    if element.get_attribute("type") == "text":
        element.send_keys("子明\n")

# 4.父元素的倒数第几个某类型的子节点, nth-last-of-type
elements = driver.find_elements_by_css_selector(" input:nth-last-of-type(1)")  # 百度框那个span下面就一个input,正倒数一样

for element in elements:
    if element.get_attribute("type") == "text":
        element.send_keys("子明\n")

# 5.选择的是父元素的偶数节点:nth-child(even). 选择的是父元素的奇数节点:nth-child(odd)[选不到百度框,就不举例了]
# 选择的是父元素的某类型偶数节点: nth-of-type(even). 选择的是父元素的某类型奇数节点: nth-of-type(odd) [用法是同上一样的]
elements = driver.find_elements_by_css_selector("input:nth-child(even)")

for element in elements:
    if element.get_attribute("type") == "text":
        element.send_keys("子明\n")

V 组选择,兄弟节点

1.组选择

  • 如果同时需要 tag 名为 input ,id 为 kw 的元素,此时需要逗号( , )隔开,称为组选择

    input , #kw

2.兄弟节点

  • 那很多的input就是兄弟节点,而要选择紧跟的兄弟节点,语法为加号(+),比如:span + input (百度搜索框html的 span 和 input )
  • 要选择 span 后面所有的input兄弟节点 span ~ input

【注】更多css选择器语法,请参考: css选择器参考手册

六、Xpath选择器

  • xpath跟css一样,也是一种灵活、强大的选择元素的方式,既然已经有了CSS,为什么还要学习 Xpath呢?
    • 有些场景 用 css 选择web 元素很麻烦,而xpath却比较方便。
    • Xpath 还有其他领域会使用到,比如爬虫框架 Scrapy,手机App框架 Appium。(爬虫挺好用的,比正则效率高,也比正则好学一点)

I 基本知识

  • 1.从根节点开始的,到某个节点,每层都依次写下来,每层之间用 / 分隔的表达式,就是某元素的 绝对路径

    /html/body/div/div/div/div/div/form/span/input (百度搜索框)

  • 2.需要选择网页中某个元素,不管它在什么位置,任意位置需要前面加//,这就是相对路径

    //form/span/input (还是有2个元素,后面咋可以加限定条件,比如input[@id=“kw”])

  • 3.通配符(*)选择某一节点的所有子节点,比如:span后面所有子节点 //span/*

【注】要在某个元素内部使用xpath选择元素, 需要 在xpath表达式最前面加个点
在这里插入图片描述

from selenium import webdriver

driver = webdriver.Edge(executable_path='msedgedriver.exe的绝对路径')

driver.get('https://book.jd.com/booksort.html')
driver.implicitly_wait(3)

# 先选择到dd节点
elements = driver.find_elements_by_xpath('//dl/dd')

# 在选择em
for element in elements:
    em = element.find_element_by_xpath('.//a')  # 这个地方一定是./×××,不能直接是//,表示当前路径下的a标签,就是dd后面的a标签
    print(em.text)
    

II 根据属性选择

# xpath没有css那么麻烦,所有属性选择都是[@属性名='属性值'](以下例子都是以百度框为例)
# 1.根据id
element = driver.find_element_by_xpath('//input[@id="kw"]')
element.send_keys("子明\n")

# 2.根据class
element = driver.find_element_by_xpath('//input[@class="s_ipt"]')
element.send_keys("子明\n")

# 3.根据其他属性
element = driver.find_element_by_xpath('//input[@name="wd"]')
element.send_keys("子明\n")

# 4.属性值包含字符串 (第一种比较常用,后面的了解就行)
	# 4.1 某属性值包含某字符串
	 //input[contains(@type,'text')]  # input节点下有包含字符串text的type属性
	# 4.2 某属性以 ×××字符串开头
	 //input[starts-with(@type,'t')] # input节点下以字符串t开头的type属性
	# 4.3 某属性以 ×××字符串结尾
	//input[ends-with(@type,'xt')] # xpath2.0的语法,现在浏览器不支持

III 按次序选择

from selenium import webdriver
import time

driver = webdriver.Edge(executable_path='msedgedriver.exe的绝对路径')

driver.get('https://www.baidu.com/')
driver.implicitly_wait(3)

# 1.某节点的第几个元素
element = driver.find_element_by_xpath('//span/input[1]')
element.send_keys("子明\n")

# 2.某类型倒数第几个子元素
element = driver.find_element_by_xpath('//span/input[last()]')  #如果是倒数第二个[last()-1] last()本身就是倒数第一个,减1就倒数第二个
element.send_keys("子明\n")

# 范围选择
element = driver.find_element_by_xpath('//input[@id="kw"][position()<=1]')  # 直接//input[position()<=1]有多个元素,懒的去写一个判断
element.send_keys("子明\n")

IV 组选择,兄弟节点,父节点

1.组选择

  • css中用的是逗号隔开,xpath中用的是竖线( | ) 隔开

    //input | //a (所有的input和a节点)

2.兄弟节点

  • xpath可以选择前面的兄弟节点,preceding-sibling::

    //a[@class=‘quickdelete’]/ preceding-sibling::input(一个class属性为quickdelete的a节点前面的input兄弟节点)

  • css中用的是波浪线(~),xpath中后续的兄弟节点用到的是 following-sibling::

    //span[@class=‘soutu-btn’]/ following-sibling::input (一个class属性为soutu-btn的span节点后面的input兄弟节点)

3.父节点

  • css不能选择到父节点,而xpath却可以,某个元素的父节点用 /.. 表示

    //input/.. (input的父节点)

【注】更多xpath选择语法,请参考: xpath选择器参考手册

七、总结

  • 思维导图
    在这里插入图片描述
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值