Web自动化测试selenium+python

总目录

一、selenium是什么？
二、selenium自动化环境安装
三、简单示例
四、选择元素的基本方法
- [1、根据 id属性选择元素。](#1、根据 id属性选择元素。)
- [2、根据 class属性选择元素](#2、根据 class属性选择元素)
- [3、根据 tag名选择元素](#3、根据 tag名选择元素)
五、等待界面元素出现
六、操控元素
七、CSS表达式选择元素
八、选择语法联合使用
九、组选择
十、按次序选择子节点
十一、兄弟节点选择

一、selenium是什么？

Selenium 是一个开源的自动化测试工具，专门用于Web应用程序的测试。它允许测试脚本（包括python、Java、JavaScript等）直接在浏览器中运行，模拟真实用户的操作。
Selenium 的自动化原理是这样的：

二、selenium自动化环境安装

1、安装客户端库（不同的编程语言选择不同的selenium客户端库，这里我们用的是python语言）

打开pycharm，点击左下角的python3.11，再点击interpreter Settings...
在左边找到python interpreter，再点击右边的加号
在搜索框中，搜索selenium，点击install Package，等待下载就好了。

2、安装主流浏览器和浏览器驱动（Chrome、Edge、Firefox等）
我用的是自带的浏览器edge，点击下方链接可以下载edge浏览器驱动：https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/?form=MA13LH

下载完成之后，将压缩包解压到无中文无空格的目录下，将浏览器驱动 所在目录 添加到环境变量的path中。

三、简单示例

python 复制代码

from selenium import webdriver # 从库中导入相应的包

webdriver = webdriver.Edge() # 创建浏览器驱动对象
webdriver.get("http://www.baidu.com") # 浏览器驱动打开百度网页
input() # 程序运行完成会自动关闭浏览器，加一个输入代码可以看到被打开的网页

四、选择元素的基本方法

web界面自动化，先要 定位元素 ，才能 操作元素 。

特别注意：Selenium 升级到版本 4 以后，下面这种 find_element_by* 方法都作为过期不赞成的写法

python 复制代码

# 初始化代码 ....

wd.find_element_by_id('username').send_keys('byhy')
wd.find_element_by_class_name('password').send_keys('sdfsdf')
wd.find_element_by_tag_name('input').send_keys('sdfsdf')
wd.find_element_by_css_selector('button[type=submit]').click()

运行会有告警，所以现在都要写成下面这种格式

python 复制代码

from selenium.webdriver.common.by import By

# 初始化代码 ....

wd.find_element(By.ID, 'username').send_keys('byhy')
wd.find_element(By.CLASS_NAME, 'password').send_keys('sdfsdf')
wd.find_element(By.TAG_NAME, 'input').send_keys('sdfsdf')
wd.find_element(By.CSS_SELECTOR,'button[type=submit]').click()

1、根据 id属性选择元素。

示例网址：https://www.byhy.net/cdn2/files/selenium/stock1.html

示例代码：

python 复制代码

from selenium import webdriver # 从库中导入相应的包
from selenium.webdriver.common.by import By # 导入by

webdriver = webdriver.Edge() # 创建浏览器驱动对象
webdriver.get("https://www.byhy.net/cdn2/files/selenium/stock1.html") # 浏览器驱动打开网页
webdriver.find_element(By.ID,'kw').send_keys('股份\n') # 定位股份名称输入框，输入股份二字，回车
webdriver.find_element(By.ID,'suggestion').send_keys("666") # 定位建议输入框，输入666
webdriver.find_element(By.ID,'submit-suggestion').click() # 定位提交按钮，点击提交
input()

效果图：

2、根据 class属性选择元素

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1.html

示例代码：

python 复制代码

"""
  通过class属性 来定位元素
"""
from selenium import webdriver
from selenium.webdriver.common.by import By

webdriver = webdriver.Edge() # 创建浏览器驱动
webdriver.get("https://www.byhy.net/cdn2/files/selenium/sample1.html") # 打开相应的网址
elements = webdriver.find_elements(By.CLASS_NAME,'plant') # 通过class属性定位植物
elements1 = webdriver.find_elements(By.CLASS_NAME,'animal') # 通过class属性定位所有的动物
for element in elements: # 以下都是循环输入文本内容
    print(element.text)
print("=============")
for element1 in elements1:
    print(element1.text)

注意：

1、find_elements 返回的是找到的符合条件的所有元素 (这里有3个元素)，放在一个列表中返回。

2、而如果我们使用 webdriver.find_element (注意少了一个s) 方法，就只会返回第一个元素。

多个class类型的使用：

学生张三可以定义有多个类型：中国人和学生，中国人和学生都是张三的类型。

元素也可以有多个class类型，多个class类型的值之间用空格隔开，比如<span class="chinese student">张三</span>

注意，这里 span元素有两个class属性，分别是 chinese 和 student，而不是一个名为 chinese student 的属性。

我们要用代码选择这个元素，可以指定任意一个class 属性值，都可以选择到这个元素，如下

python 复制代码

element = wd.find_elements(By.CLASS_NAME,'chinese')

或者

python 复制代码

element = wd.find_elements(By.CLASS_NAME,'student')

而不能这样写

python 复制代码

element = wd.find_elements(By.CLASS_NAME,'chinese student')

3、根据 tag名选择元素

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1.html

示例代码：

python 复制代码

from selenium import webdriver
from selenium.webdriver.common.by import By

webdriver = webdriver.Edge()
webdriver.get("https://www.byhy.net/cdn2/files/selenium/sample1.html")
elements = webdriver.find_elements(By.TAG_NAME,'span')
elements1 = webdriver.find_elements(By.TAG_NAME,'div')
for element in elements:
    print(element.text)
print("-------")
for element1 in elements1:
    print(element1.text)

find_element 和 find_elements 的区别：

使用 find_elements 选择的是符合条件的所有元素，如果没有符合条件的元素，返回空列表。
使用 find_element 选择的是符合条件的第一个元素，如果没有符合条件的元素，抛出 NoSuchElementException 异常。

五、等待界面元素出现

在我们进行网页操作的时候，有的元素内容不是可以立即出现的，可能会等待一段时间。

Selenium提供了一个更合理的解决方案，是这样的：

当发现元素没有找到的时候，并不立即返回找不到元素的错误。

而是周期性（每隔半秒钟）重新寻找该元素，直到该元素找到，

或者超出指定最大等待时长，这时才抛出异常（如果是 find_elements 之类的方法，则是返回空列表）。

Selenium 的 Webdriver 对象有个方法叫 implicitly_wait ，可以称之为 隐式等待 ，或者 全局等待 。

该方法接受一个参数，用来指定最大等待时长。

如果我们加入如下代码：

python 复制代码

webdriver.implicitly_wait(10)

那么后续所有的 find_element 或者 find_elements 之类的方法调用都会采用上面的策略：

如果找不到元素，每隔 半秒钟 再去界面上查看一次，直到找到该元素，或者过了10秒最大时长。

示例网址：https://www.byhy.net/cdn2/files/selenium/stock1.html

示例代码：

python 复制代码

from selenium import webdriver
from selenium.webdriver.common.by import By

webdriver = webdriver.Edge()
webdriver.implicitly_wait(10)
webdriver.get("https://www.byhy.net/cdn2/files/selenium/stock1.html")
webdriver.find_element(By.ID,'kw').send_keys('国投\n')
element = webdriver.find_element(By.ID,'1')
print(element.text)
webdriver.quit()

六、操控元素

操控元素通常包含：点击元素；在元素中输入字符串；获取元素包含的信息，比如文本内容，元素的属性。

1、点击元素

当我们调用webElement对象的click方法去点击元素的时候，浏览器接收到自动化命令，点击的是该元素的 中心点 位置。

2、输入框

输入字符串也非常简单，就是调用元素webElement对象的send_keys方法。

如果我们要把输入框中已经有的 内容清除掉 ，可以使用WebElement对象的clear方法。

示例网址：https://www.byhy.net/cdn2/files/selenium/test3.html

示例代码：

python 复制代码

element = wd.find_element(By.ID, "input1")
element.clear() # 清除输入框已有的字符串
element.send_keys('白月黑羽') # 输入新字符串

3、获取元素文本信息

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

python 复制代码

element = wd.find_element(By.ID, 'animal')
print(element.text)

补充：

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

但是，有时候，元素的文本内容没有展示在界面上，或者没有完全完全展示在界面上。这时，用WebElement对象的text属性，获取文本内容，就会有问题。

出现这种情况，可以尝试使用 element.get_attribute('innerText') ，或者 element.get_attribute('textContent')

使用 innerText 和 textContent 的区别是，前者只显示元素可见文本内容 ，后者显示所有内容（包括display属性为none的部分）

（2）获取元素属性

通过WebElement对象的 get_attribute 方法来获取元素的属性值

比如要获取元素属性class的值，就可以使用 element.get_attribute('class')

示例网址：https://www.byhy.net/cdn2/files/selenium/stock1.html

示例代码：

python 复制代码

from selenium import webdriver
from selenium.webdriver.common.by import By
# 获取元素属性

webdriver = webdriver.Edge()
webdriver.get("https://www.byhy.net/cdn2/files/selenium/stock1.html")
element = webdriver.find_element(By.ID,'1')
print(element.get_attribute('class'))  # 打印出来的是：result-item
element1 = webdriver.find_element(By.ID,'suggestion')
print(element1.get_attribute('placeholder')) # 打印出来的是：一句话建议

（3）获取整个元素对应的HTML

要获取整个元素对应的HTML文本内容，可以使用element.get_attribute('outerHTML')

如果，只是想获取某个元素内部的HTML文本内容，可以使用 element.get_attribute('innerHTML')

示例网址：https://www.byhy.net/cdn2/files/selenium/stock1.html

示例代码：

（4）获取输入框里面的文字

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

示例网址：https://www.byhy.net/cdn2/files/selenium/stock1.html

示例代码：

python 复制代码

from selenium import webdriver
from selenium.webdriver.common.by import By

# 获取输入框的值
webdriver = webdriver.Edge()
webdriver.get("https://www.byhy.net/cdn2/files/selenium/stock1.html")
element = webdriver.find_element(By.ID,"kw")
element.send_keys("四川路桥")
print(element.get_attribute('value'))

七、CSS表达式选择元素

通过 CSS Selector 选择单个元素的方法是：

python 复制代码

find_element(By.CSS_SELECTOR, CSS Selector参数)

选择所有元素的方法是：

python 复制代码

find_elements(By.CSS_SELECTOR, CSS Selector参数)

（1）根据class属性选择元素的语法是在class值前面加上一个点：.class值

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1.html

示例代码：

（2）根据id属性选择元素的语法是在id号前面加上一个井号： #id值

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1.html

示例代码：

（3）选择子元素和后代元素

如果元素2 是元素1 的直接子元素， CSS Selector 选择子元素的语法是这样的：

python 复制代码

元素1 > 元素2

中间用一个大于号（我们可以理解为箭头号）

注意：最终选择的元素是元素2，并且要求这个元素2 是元素1 的直接子元素

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1.html

示例代码：

如果元素2 是元素1 的后代元素， CSS Selector 选择后代元素的语法是这样的：

python 复制代码

元素1   元素2

中间是一个或者多个空格隔开

最终选择的元素是元素2 ，并且要求这个元素2 是元素1 的后代元素。

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1.html

示例代码：

（4）根据属性选择

id、class 都是web元素的属性，因为它们是很常用的属性，所以css选择器专门提供了根据 id、class 选择的语法。

那么其他的属性呢？

css 选择器支持通过任何属性来选择元素，语法是用一个方括号 \[\] 。

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1.html

示例代码：

python 复制代码

from selenium import webdriver
from selenium.webdriver.common.by import By

webdriver = webdriver.Edge()
webdriver.get("https://www.byhy.net/cdn2/files/selenium/sample1.html")
element = webdriver.find_element(By.CSS_SELECTOR,'.footer2 [href]')
print(element.get_attribute('outerHTML'))

CSS 还可以选择属性值 包含某个字符串 的元素
比如，要选择a节点，里面的href属性包含了 miitbeian 字符串，就可以这样写: a[href*="miitbeian"]
还可以选择属性值 以某个字符串开头 的元素
比如，要选择a节点，里面的href属性以 http 开头，就可以这样写: a[href^="http"]
还可以选择属性值 以某个字符串结尾 的元素
比如，要选择a节点，里面的href属性以 gov.cn 结尾，就可以这样写 : a[href$="gov.cn"]
如果一个元素 具有多个属性
<div class="misc" ctype="gun">沙漠之鹰</div>
CSS 选择器可以指定选择的元素要同时具有多个属性的限制，像这样 div[class=misc][ctype=gun]

八、选择语法联合使用

CSS selector的另一个强大之处在于：选择语法可以 联合使用

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1.html

示例代码：

九、组选择

如果我们要同时选择所有的class为plant和class为animal的元素。怎么定位?

这种情况，css选择器可以使用逗号，称之为组选择器，像这样

python 复制代码

.plant , .animal

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1.html

示例代码：

再比如，我们要同时选择所有tag名为div的元素和 id为BYHY的元素，就可以像这样写

python 复制代码

div,#BYHY

十、按次序选择子节点

（1）父元素的第n个子节点

我们可以指定选择的元素 是父元素的第几个子节点 ，使用 nth-child

示例网址： $https://www.byhy.net/cdn2/files/selenium/sample1b.html$ (https://www.byhy.net/cdn2/files/selenium/sample 1b.html)

示例代码：（选择第二个子元素，并且是span类型）

如果你不加节点类型限制，直接这样写 :nth-child(2)

就是选择所有位置为第2个的所有元素，不管是什么类型。

（2）父元素的倒数第n个子节点

也可以说，选择的是父元素的 倒数第几个子节点 ，使用 nth-last-child

比如：

python 复制代码

p:nth-last-child(1)  # 就是选择第倒数第1个子元素，并且是p元素。

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1b.html

示例代码：

（3）父元素的第几个某类型的子节点

我们可以指定选择的元素是父元素的第几个 某类型的 子节点，使用nth-of-type

比如，我们要选择唐诗和宋词的第一个作者，选择的是第1个span类型的子元素，所以也可以这样写 span:nth-of-type(1)

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1b.html

示例代码：

（4）父元素的倒数第几个某类型的子节点

选择父元素的 倒数第几个某类型 的子节点，使用 nth-last-of-type，像这样p:nth-last-of-type(2)

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1b.html

示例代码：

(5)奇数节点和偶数节点

如果要选择的是父元素的 偶数节点 ，使用 nth-child(even) ，比如

python 复制代码

p:nth-child(even)

如果要选择的是父元素的 奇数节点 ，使用 nth-child(odd)

python 复制代码

p:nth-child(odd)

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1b.html

示例代码：

十一、兄弟节点选择

（1）相邻兄弟节点选择

我们要选择唐诗和宋词的第一个作者

还有一种思考方法，就是选择 h3 后面紧跟着的兄弟节点 span。

这就是一种相邻兄弟关系，可以这样写 h3 + span

表示元素紧跟关系的是加号

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1b.html

示例代码：

（2）后续所有兄弟节点选择

如果要选择是选择 h3 后面所有的兄弟节点 span，可以这样写 h3 ~ span

示例网址：https://www.byhy.net/cdn2/files/selenium/sample1b.html

示例代码：

Web自动化测试selenium+python

总目录

一、selenium是什么？

二、selenium自动化环境安装

三、简单示例

四、选择元素的基本方法

1、根据 id属性 选择元素。

2、根据 class属性 选择元素

3、根据 tag名 选择元素

五、等待界面元素出现

六、操控元素

七、CSS表达式选择元素

八、选择语法联合使用

九、组选择

十、按次序选择子节点

十一、兄弟节点选择

1、根据 id属性选择元素。

2、根据 class属性选择元素

3、根据 tag名选择元素