第3章  Selenium IDE插件的安装与使用

0.

  可以在Chrome或Firefox浏览器的附加组件中找到Selenium IDE插件并进行安装。这里以Firefox浏览器为例,查找selenium,就会出现Selenium IDE插件,如图3-1所示。

 

selenium开headless模式 selenium启用插件_selenium开headless模式

图3-1  Selenium IDE插件的相关信息

 3.1  Selenium IDE插件的安装

  找到Selenium IDE插件后,进行安装即可,由于安装过程非常简单,这里不再赘述。安装完毕后,工具条上就会出现Selenium IDE插件图标,如图3-2所示。

 

selenium开headless模式 selenium启用插件_Selenium_02

图3-2  Firefox浏览器的工具条上的Selenium IDE插件图标

 3.2  Selenium IDE的使用

  单击Selenium IDE插件图标,将出现图3-3所示的对话框。

 

selenium开headless模式 selenium启用插件_CSS_03

图3-3  Selenium IDE的欢迎使用对话框

  从图3-3可以看出,目前Selenium IDE插件的版本是3.16.1,单击Record a new test in a new project链接。

  在弹出的新项目名称对话框中,设置PROJECT NAME为“异步社区”,如图3-4所示,而后单击OK按钮。

 

selenium开headless模式 selenium启用插件_Selenium_04

图3-4  新项目名称对话框

  在弹出的项目URL对话框中,输入异步社区的网址https://www.epubit.com,如图3-5所示。

单击START RECORDING按钮,开始录制脚本。

  如图3-6所示,我们可以看到在录制时,页面的右下角有一个圆角矩形框,用来标识Selenium IDE正在进行录制。在这里,我以演示访问人民邮电出版社的异步社区为例。你在操作的同时,将发现Selenium IDE会产生对应的脚本信息,并展现在Selenium IDE中。如果已经完成录制,就单击Selenium IDE中的“停止录制”按钮,如图3-7所示。

  

selenium开headless模式 selenium启用插件_selenium开headless模式_05

图3-5  项目URL对话框

 

selenium开headless模式 selenium启用插件_selenium开headless模式_06

图3-6  Selenium IDE正在录制异步社区页面信息

selenium开headless模式 selenium启用插件_selenium开headless模式_07

图3-7  Selenium IDE停止录制异步社区页面信息

  接下来,命名测试用例,输入epubit,如图3-8所示,单击OK按钮。

selenium开headless模式 selenium启用插件_selenium开headless模式_08

 

图3-8 为测试用例起名字

  在图3-9所示的页面中,单击Save project按钮,保存项目。

selenium开headless模式 selenium启用插件_selenium开headless模式_09

 

图3-9 保存项目

  至此,我们完成了基于异步社区查找业务的相关操作,可以单击Run current test(回放)按钮来回放脚本,如图3-10所示。

 

selenium开headless模式 selenium启用插件_CSS_10

图3-10 Run current test回放按钮

  在回放过程中,你将发现Selenium IDE会自动打开一个新的Firefox浏览器窗口,并严格执行当初录制的相关业务操作,同时Selenium IDE下方的Log选项卡将显示每个步骤及其执行后的状态和时间信息,如图3-11所示。

 

selenium开headless模式 selenium启用插件_CSS_11

图3-11 脚本回放的相关信息

  当然,如果录制了很多测试用例,还可以单击Run current test按钮前面那个带3条横线的批量运行按钮(图3-12中编号为1的工具条按钮)来批量执行测试用例。若我们不希望脚本从头开始执行,而希望从某一步开始继续执行(特别是在调试脚本时),可以单击Run current test按钮后面的那个包含两个圆圈和一个向下箭头的按钮(图3-12中编号为2的工具条按钮)。如果对脚本的执行速度不满意,可以单击闹钟图标(图3-12中编号为3的工具条按钮),调整执行速度。

  如果需要对已生成的脚本内容进行完善,那么可以对脚本进行二次修改或调试。单击脚本区域中3个竖排的小圆点,就会弹出一个快捷菜单,如图3-13所示。可以使用这个快捷菜单,对生成的脚本执行剪切、复制、粘贴、删除操作,还可以插入新的命令或者清除所有命令(也就是清空脚本),甚至可以加入断点、从指定的脚本行回放、回放到指定脚本行、从指定的行开始录制。

selenium开headless模式 selenium启用插件_Selenium_12

 

图3-12 工具条按钮

selenium开headless模式 selenium启用插件_selenium开headless模式_13

 

图3-13 快捷菜单

  一行命令由Command、Target和Value三部分构成,如图3-14所示。

 

selenium开headless模式 selenium启用插件_Selenium_14

图3-14 命令信息

  • Command(命令):Selenium IDE提供的相关命令。
  • Target(目标):Selenium IDE要操作的对象。
  • Value(值):针对要操作的对象进行赋值。

  可以选中一条命令,对它进行编辑,如图3-15所示。

selenium开headless模式 selenium启用插件_CSS_15

 

图3-15 编辑命令

  结合SeleniumIDE录制产生的脚本,可以看到Command列包含open、click、type、mouse over、mouse out和run script等关键词。它们代表什么呢?为方便读者理解,这里对Selenium IDE的命令关键词进行了整理,供大家参考,参见表3-1。

表3-1 Selenium IDE的命令关键词

命令关键词

简要说明

add selection

用来增加选项

answer on next prompt

通知Selenium返回下一个提示,提示信息为提示符指定的答案字符串

assert

断言,检查变量是否为预期值。如果断言失败,测试将停止

assert alert

断言,确认提示信息中包含指定的文本。如果断言失败,测试将停止

assert checked

断言,确认指定的元素已被选中。如果断言失败,测试将停止

assert confirmation

断言,确认出现指定的文本信息。如果断言失败,测试将停止

assert editable

断言,确认目标元素是可编辑的。如果断言失败,测试将停止

assert element present

断言,确认目标元素存在于页面上的某处。如果断言失败,测试将停止

assert element not present

断言,确认目标元素不在页面上的任何地方。如果断言失败,测试将停止

assert not checked

断言,确认目标元素没被选中。如果断言失败,测试将停止

assert not editable

断言,确认目标元素不可编辑。如果断言失败,测试将停止

 

续表

命令关键词

简要说明

assert not selected value

断言,确认下拉元素中所选选项的value属性不包含提供的值。如果断言失败,测试将停止

assert not text

断言,确认元素的文本不包含指定的值。如果断言失败,测试将停止

assert prompt

断言,确认已呈现JavaScript提示。如果断言失败,测试将停止

assert selected value

断言,确认下拉元素中所选选项的value属性包含指定的值。如果断言失败,测试将停止

assert selected label

断言,确认下拉菜单中所选选项的标签包含指定的值。如果断言失败,测试将停止

assert text

断言,确认元素的文本包含指定的值。如果断言失败,测试将停止

assert title

断言,确认当前页面的标题包含提供的文本。如果断言失败,测试将停止

assert value

断言,确认输入字段的(空白修饰)值(或其他带有value参数的值)。对于复选框/单选按钮元素,根据是否选中元素,元素值为 on或 off。如果断言失败,测试将停止

check

针对单选框或复选框,切换选择

choose cancel on next confirmation

通知Selenium返回下一个提示时返回取消信息

choose cancel on next prompt

通知Selenium返回下一个提示时执行取消操作

choose ok on next confirmation

通知Selenium返回下一个提示时执行确认操作

click

单击目标元素

click at

根据坐标单击目标元素。这里的坐标主要相对于目标元素而言,例如,(0,0)表示元素的左上角

close

关闭当前窗口

debugger

中断执行并进入调试器

do

创建一个至少执行一次命令的循环

double click

双击目标元素

double click at

根据坐标双击目标元素。这里的坐标主要相对于目标元素而言,例如,(0,0)表示元素的左上角

drag and drop to object

拖动一个元素并将其拖放到另一个元素上

echo

将指定的消息显示到Selenese表中的第三个单元格中,这对于调试很有用

edit content

设置内容可编辑的元素的值,就像键入的一样

else

if块的一部分。如果不满足if和/或else if条件,请在此分支执行命令

else if

if块的一部分。如果不满足if条件,请在此分支执行命令

end

终止控制流块,if、while等语句的结束标志

execute script

在当前选定的框架或窗口的上下文中执行一段JavaScript代码

 

续表

命令关键词

简要说明

execute async script

在当前选定的框架或窗口的上下文中执行JavaScript的异步代码段

for each

创建一个循环,为给定集合中的每一项执行相关块内的命令

if

if语句,当满足条件时执行控制流块内容

mouse down

模拟用户按下鼠标左键(尚未释放鼠标左键)

mouse down at

模拟用户在指定位置按下鼠标左键(尚未释放鼠标左键)

mouse move at

模拟用户在指定元素上按下鼠标左键(尚未释放鼠标左键)

mouse out

模拟用户将鼠标指针从指定元素上移开

mouse over

模拟用户将鼠标指针悬停在指定元素上

mouse up

模拟用户释放鼠标左键时发生的事件

mouse up at

模拟当用户在指定位置释放鼠标左键时发生的事件

open

打开指定的URL,然后等待页面加载,同时接收相对URL和绝对URL

pause

等待指定的时间,以毫秒为单位

remove selection

从多选元素中删除选中的元素

repeat if

如果提供的条件表达式的结果为true,开始do循环;否则,结束do循环

run

从当前项目运行测试用例

run script

在当前测试窗口的主体中创建一个新的script标签,并将指定的文本添加到命令主体中

select

从下拉菜单中选择一个元素

select frame

在当前窗口中选择一个框架

select window

选择窗口,在选择指定的窗口后,所有命令都将转到该窗口

send keys

模拟指定元素上的按键事件,就像逐个键入一样

set speed

设置操作步骤间的执行速度,以毫秒为单位

set window size

设置浏览器的窗口大小

store

将目标字符串另存为变量,便于复用

store attribute

获取元素属性的值

store text

获取元素的文本并存储以备后用

store title

获取当前页面的标题

store value

获取元素的值并存储以备后用

store window handle

获取当前页面的句柄

store XPath count

获取与指定XPath匹配的节点数

submit

提交指定的表单内容

续表

命令关键词

简要说明

times

创建一个指定循环次数的循环

type

设置要操作的目标元素的值,就像在其中键入一样。也可以用于设置组合框、复选框的值。在这些情况下,value应该是所选选项的值而不是可见的文本

uncheck

取消选中切换按钮(复选框/单选按钮)

verify

软断言变量是期望值。可将变量的值转换为字符串,然后再进行比较,即使验证失败,测试也将继续

verify checked

软断言确认指定的元素已被选中。即使验证失败,测试也将继续

verify editable

软断言确认指定的输入元素是否可编辑。即使验证失败,测试也将继续

verify element present

软断言确认指定的元素在页面上的某处。即使验证失败,测试也将继续

verify element not present

软断言确认指定的元素不在页面上。即使验证失败,测试也将继续

verify not checked

软断言确认指定的元素未被选中。即使验证失败,测试也将继续

verify not editable

软断言确认指定的元素不可编辑。即使验证失败,测试也将继续

verify not selected value

软断言确认指定的元素尚未选择。即使验证失败,测试也将继续

verify not text

软断言元素的文本不存在。即使验证失败,测试也将继续

verify selected label

对指定元素中的选定选项进行软断言。即使验证失败,测试也将继续

verify selected value

软断言确认指定的元素已被选择。即使验证失败,测试也将继续

verify text

软断言存在元素的文本。即使验证失败,测试也将继续

verify title

软断言当前页面的标题包含指定的文本。即使验证失败,测试也将继续

verify value

软断言输入字段的(空白修饰)值(或其他任何带有value参数的字段)。对于复选框/单选按钮元素,根据是否选中元素,元素值为on或off。即使验证失败,测试也将继续

wait for element editable

等待元素可编辑

wait for element not editable

等待元素不可编辑

wait for element not present

等待目标元素不在页面上

wait for element not visible

等待目标元素在页面上不可见

wait for element present

等待目标元素出现在页面上

wait for element visible

等待目标元素在页面上可见

while

while循环,只要指定的条件表达式为真,就循环执行控制流块的相关命令

 

  Selenium IDE具有语法检查功能,例如,如果添加一个没有条件和结束语句的while循环,这个while循环将显示为红色,并在日志中给出相应的错误消息,如图3-16所示(箭头指向的内容实际显示为红色,彩色效果参见文前彩插)。

 

selenium开headless模式 selenium启用插件_CSS_16

图3-16 语法检查异常出现的相关信息

 3.3  Selenium IDE的脚本保存与Python脚本转换

  Selenium IDE的测试用例都将保存为以.side为后缀的文件,如epubit.side。现在让我们打开该文件看一下。大家不难发现,其实它就是一个JSON格式的文件,如图3-17所示。

 

selenium开headless模式 selenium启用插件_CSS_17

图3-17 epubit.side文件的内容

  同时,如果需要,还可以将这个文件导出成其他格式的脚本文件,选中对应的测试用例文件,单击后面竖排的3个小圆点,在弹出的快捷菜单中选择Export菜单项,如图3-18所示。

selenium开headless模式 selenium启用插件_CSS_18

 

图3-18 选择Export菜单项

  在弹出的语言选择对话框中,可以选择导出指定语言的脚本,如图3-19所示。

selenium开headless模式 selenium启用插件_可编辑_19

 

图3-19 语言选择对话框

  这里,我们选择导出为Python pytest类型的脚本文件,并命名为test_epubit.py,如图3-20所示。

selenium开headless模式 selenium启用插件_CSS_20

 

图3-20  导出为Python脚本文件

  导出后的test_epubit.py文件如图3-21所示。

selenium开headless模式 selenium启用插件_可编辑_21

 

图3-21  test_epubit.py文件的内容

test_epubit.py文件的内容如下所示。

import pytest
import time
import json
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
 
class TestEpubit():
  def setup_method(self, method):
    self.driver = webdriver.Firefox()
    self.vars = {}
  
  def teardown_method(self, method):
    self.driver.quit()
  
  def test_epubit(self):
    self.driver.get("https://www.epubit.com/")
    self.driver.set_window_size(1550, 838)
    self.driver.find_element(By.CSS_SELECTOR, 
                                ".router-link-exact-active > .tabbar-link").click()
    self.driver.find_element(By.CSS_SELECTOR, "li:nth-child(2) .tabbar-link").click()
    self.driver.find_element(By.CSS_SELECTOR, "li:nth-child(1) .tabbar-link").click()
    self.driver.execute_script("window.scrollTo(0,0)")
    self.driver.find_element(By.CSS_SELECTOR, ".icon-sousuo").click()
    self.driver.find_element(By.CSS_SELECTOR,
                       ".el-input-group > .el-input__inner"). click()
    self.driver.find_element(By.CSS_SELECTOR,   
                       ".el-input-group > .el-input__inner").send_keys ("loadrunner")
    self.driver.find_element(By.CSS_SELECTOR, ".searchProduct > span").click()
    element = self.driver.find_element(By.CSS_SELECTOR, ".searchProduct > span")
    actions = ActionChains(self.driver)
    actions.move_to_element(element).perform()
    element = self.driver.find_element(By.CSS_SELECTOR, "body")
    actions = ActionChains(self.driver)
    actions.move_to_element(element, 0, 0).perform()
    self.driver.find_element(By.CSS_SELECTOR, ".item:nth-child(1) > .imgItem > img").click()
    self.driver.execute_script("window.scrollTo(0,0)")

  从以上脚本中可以看到引入的pytest模块,要运行这个脚本,就必须安装pytest模块。pytest模块的安装命令如图3-22所示。

 

selenium开headless模式 selenium启用插件_Selenium_22

图3-22  pytest模块的安装命令

  在核心的test_epubit方法中,可以看到这里主要使用了CSS元素定位法,并且执行了一些单击、滚动和输入操作,即便现在看不懂,也没有关系。后续章节将详细介绍这些元素定位和操作方法。

 3.4  Selenium命令行运行器

  持续集成、持续构建已经越来越多地被运用到互联网企业,命令行的支持对于持续集成来讲是非常有意义的。Selenium命令行运行器(Command-Line Runner)就是一个可以在命令行执行的小工具。

有了Selenium命令行运行器,不需要写任何代码,就能够做到在任何浏览器中运行Selenium IDE的所有测试用例,并且既可以并发执行,也可以配合Selenium Grid使用。

现在就让我们来看一下,如何利用Selenium命令行运行器驱动我们前面完成的异步社区搜索项目脚本(epubit.side文件)。

首先,需要安装Node.js。可以到Node.js官网下载最新版本并安装,下载时注意一定要和自身操作系统的版本匹配,如图3-23所示。

selenium开headless模式 selenium启用插件_可编辑_23

 

图3-23 Node.js下载页面信息

  下载对应的版本后,安装Node.js,由于安装过程非常简单,这里不再赘述。安装完成后,程序组中将出现图3-24所示的信息。

selenium开headless模式 selenium启用插件_selenium开headless模式_24

 

图3-24 程序组中的Node.js相关信息

为了验证Node.js是否正确安装,可以输入node -v来查看Node.js的版本信息,如图3-25所示。若显示版本信息,则表示已安装成功。

 

selenium开headless模式 selenium启用插件_selenium开headless模式_25

图3-25 Node.js版本信息

接下来,为了更加便捷、快速地对相关包进行管理,需要安装cnpm。输入如下命令,如图3-26所示。

selenium开headless模式 selenium启用插件_CSS_26

 

图3-26 安装cnpm

  而后,使用cnpm安装Selenium命令行运行器,如图3-27所示。

selenium开headless模式 selenium启用插件_CSS_27

 

图3-27 安装Selenium命令行运行器

  另外,还需要下载浏览器驱动程序,这里我们使用Firefox浏览器驱动程序,对应的cnpm命令如图3-28所示。当然,可以依据需要自行下载其他浏览器驱动程序。

selenium开headless模式 selenium启用插件_CSS_28

 

图3-28 下载Firefox浏览器驱动程序

  可以输入selenium-side-runner来查看帮助信息,如图3-29所示。

selenium开headless模式 selenium启用插件_CSS_29

 

图3-29 查看帮助信息

  如图3-30所示,可以通过使用selenium-side-runner命令的-c参数来指定使用Firefox浏览器驱动程序,而后指定脚本的存放路径以执行脚本。接下来,就可以通过Firefox浏览器驱动程序来调用并完成脚本的回放。

selenium开headless模式 selenium启用插件_可编辑_30

 

图3-30 调用epubit.side脚本

  如果存在多个side文件,那么可以通过指定side文件的存放路径来批量执行,例如selenium- side-runner -c"browserName=firefox" c:\\testcases\\*.side,这样就可以批量执行c:\testcases目录下的所有测试用例了。当然,依据需要将已经完成的测试用例按不同的功能模块分别放到不同的目录中,或者针对不同测试用例的优先级别分别放到不同的目录中,就可以选择性地执行自己想要执行的测试用例集了。

  当然,selenium-side-runner命令还提供了很多其他参数,如果需要进一步了解,可以查看帮助信息,这里不再赘述。