产品也能懂的网页测试

发表于 更新于 分类于
产品也要写网页测试。

本文的代码可以在这里找到

环境准备

IDE

选择: VS code（安装python插件）或者 pycharm

chromedriver

看这里

安装依赖库

1
pip install selenium

测试安装成功与否：

1
python3

输入后会显示(注意要是python3 python2 不行)

1
2
3
4
Python 3.9.2 (default, Mar 26 2021, 15:28:17)
[Clang 12.0.0 (clang-1200.0.32.29)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>>

再输入

1
from selenium import webdriver

没有报错就是成功了

实战

你既可以在上一步验证安装打开的python命令行里面执行，也可以单独写个脚本demo.py跑（我会推荐后一种）

1
python3 demo.py

本地打开浏览器

1
2
3
4
5
6
7
from selenium import webdriver
 
chrome_options = webdriver.ChromeOptions()
driver = webdriver.Chrome(
    options=chrome_options
)
driver.get("https://www.baidu.com/")

查找控件

在chrome里面，在你想要定位的控件上面按右键，弹出的菜单中选择检查或者检查元素

id or name

在弹出的chrome工具栏里面会有对应的html空间元素的所有信息。如果有id或者name值，就可以通过这两个值定位选择这个控件。

PS：id或者name尽量在同一个页面上不要重复。

baidu 输入框示例

也可以通过xpath来定位控件

xpath

xpath复制

xpath 测试

find_element_by_id

1
2
3
4
5
6
7
8
9
10
from selenium import webdriver
 
chrome_options = webdriver.ChromeOptions()
driver = webdriver.Chrome(
    options=chrome_options
)
driver.get("https://www.baidu.com/")

search_input_box = driver.find_element_by_id('kw')
search_input_box.send_keys('什么值得买')

find_element_by_xpath

1
2
3
4
5
6
7
8
9
10
from selenium import webdriver
 
chrome_options = webdriver.ChromeOptions()
driver = webdriver.Chrome(
    options=chrome_options
)
driver.get("https://www.baidu.com/")

search_input_box = driver.find_element_by_xpath('//*[@id="kw"]')
search_input_box.send_keys('什么值得买')

点击控件

click

1
2
3
4
5
6
7
8
9
10
11
12
13
from selenium import webdriver
 
chrome_options = webdriver.ChromeOptions()
driver = webdriver.Chrome(
    options=chrome_options
)
driver.get("https://www.baidu.com/")

search_input_box = driver.find_element_by_xpath('//*[@id="kw"]')
search_input_box.send_keys('什么值得买')

search_submit_button = driver.find_element_by_xpath('//*[@id="su"]')
search_submit_button.click()

javascript 点击控件

有的时候直接调用webelement的click函数，会出现错误。大概是两个控件叠在了一起，在你指定的位置按点击，别的控件会接收到。这个时候可以试试用javascript来点击：

1
2
3
search_submit_button = driver.find_element_by_xpath('//*[@id="su"]')
# 这里的arguments[0]就是指search_submit_button
driver.execute_script("arguments[0].click();", search_submit_button)

输入回车

1
2
3
4
5
6
7
8
9
10
11
12
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
 
chrome_options = webdriver.ChromeOptions()
driver = webdriver.Chrome(
    options=chrome_options
)
driver.get("https://www.baidu.com/")

search_input_box = driver.find_element_by_xpath('//*[@id="kw"]')
search_input_box.send_keys('什么值得买')
search_input_box.send_keys(Keys.ENTER)

控件属性

可以通过 get_attribute(‘value’) 方法，获得html input控件的值，例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
 
chrome_options = webdriver.ChromeOptions()
driver = webdriver.Chrome(
    options=chrome_options
)
driver.get("https://www.baidu.com/")

search_input_box = driver.find_element_by_xpath('//*[@id="kw"]')
search_input_box.send_keys('什么值得买')
print(search_input_box.get_attribute('value'))

search_submit_button = driver.find_element_by_xpath('//*[@id="su"]')
print(search_submit_button.get_attribute('value'))

driver.quit()

执行结果：

1
2
什么值得买
百度一下

断言

assert

python里面的assert关键字就是断言。意即我们认为接下来的这个语句必须为True，不然程序直接崩溃。

assert是测试中十分基础，但也是十分有效的技术

基础用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
 
chrome_options = webdriver.ChromeOptions()
driver = webdriver.Chrome(
    options=chrome_options
)
driver.get("https://www.baidu.com/")

search_word = '什么值得买'

search_input_box = driver.find_element_by_xpath('//*[@id="kw"]')
search_input_box.send_keys(search_word)
search_input_box.send_keys(Keys.ENTER)

print(search_input_box.get_attribute('value'))
assert search_word == search_input_box.get_attribute('value')

额外信息

assert接受第二个参数，可以在出现断言错误的时候打印更多信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
 
chrome_options = webdriver.ChromeOptions()
driver = webdriver.Chrome(
    options=chrome_options
)
driver.get("https://www.baidu.com/")

search_word = '什么值得买'

search_input_box = driver.find_element_by_xpath('//*[@id="kw"]')
search_input_box.send_keys(search_word)
search_input_box.send_keys(Keys.ENTER)

assert '这是错的' == search_input_box.get_attribute('value'), f'实际结果 ' \
    f'{search_input_box.get_attribute("value")}'

输出

1
2
3
4
Traceback (most recent call last):
  File "", line 19, in <module>
    assert '这是错的' == search_input_box.get_attribute('value'), f'实际结果 ' \
AssertionError: 实际结果 什么值得买

进阶实战

相对路径xpath

通过driver.find_element_by_xpath或者别的find方法，返回的是web element类对象。而在web element类对象中也有find_element_by_xpath方法，但这时候这个方法输入的xpath，实际上是对应着这个web element内部的html控件，也就是相对xpath。

登录百度

1
2
3
4
5
6
7
8
9
10
11
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
 
chrome_options = webdriver.ChromeOptions()
driver = webdriver.Chrome(
    options=chrome_options
)
driver.get("https://www.baidu.com/")

login_button = driver.find_element_by_xpath('//*[@id="s-top-loginbtn"]')
login_button.click()

baidu 登录框

获得登录框webelement

1
2
3
import time
time.sleep(1)
login_form = driver.find_element_by_xpath('//*[@id="passport-login-pop-dialog"]/div/div/div')

用相对xpath 点击 “用户名登录”

用户名登录 按钮，是在登录框webelement下的 div[3]/p[2]

1
2
username_login_entry = login_form.find_element_by_xpath('div[3]/p[2]')
username_login_entry.click()

baidu 用户名登录框

相对xpath定位 输入用户名

用户名输入框，是基于登录框webelement下的 div/form/p[5]/input[2]

1
2
username_input_box = login_form.find_element_by_xpath('div/form/p[5]/input[2]')
username_input_box.send_keys('测试')

baidu 用户名登录框输入测试