WEBUI自动化测试手册.md · eco_moon/Lucky Frame操作手册

# LF WEBUI自动化测试手册

#### 介绍
Lucky Frame操作手册

#### 环境配置篇
要进行webui的自动化测试，webdriver必不可少，需要版本与对应的浏览器一致，下面将介绍如何选择合适自己版本的webdriver，以chrome为例。

1.下载webdriver

成功安装selenium后，下载webdriver，此处以chromedriver为例，首先查看chrome浏览器版本号，再进入(http://chromedriver.storage.googleapis.com/index.html)
选择对应浏览器版本的webdriver，
如下图所示，本次演示所用的浏览器版本号为81.0.4044.92，因此选择对应81版本的chromedriver。
选择对应的系统版本，如windows。

![输入图片说明](%E5%9B%BE%E7%89%87/image3.png)

下载完成后，对压缩包内的文件chromedriver.exe文件进行解压，放入浏览器所在目录application文件夹下，再放入LF客户端文件夹路径下的BrowserDriven文件夹，替换掉原来自带的文件即可。

![输入图片说明](%E5%9B%BE%E7%89%87/image4.png)

放置完成后，进入环境变量配置界面，用户变量的Path内添加chrome浏览器所在路径的application即可。

![输入图片说明](%E5%9B%BE%E7%89%87/image5.png)

注意：如果曾经下载过chromedriver文件的，可能需要替换低版本，此时会出现已经替换但cmd中输入chromedriver仍然识别为原来版本的情况，此时需要cmd中输入where chromedriver来查看所有存放chromedriver文件的路径，查看是否全部进行了替换，若没替换进行替换即可。

#### 项目实施篇

1. 启动客户端服务

通过start_service.cmd打开客户端。

![输入图片说明](%E5%9B%BE%E7%89%87/image6.png)

![输入图片说明](%E5%9B%BE%E7%89%87/image7.png)

查看网页中客户端是否已启用，显示状态正常即可开始下一步。

![输入图片说明](%E5%9B%BE%E7%89%87/image8.png)

2. 创建项目

点击项目管理对项目进行创建，此处演示为下图，项目标识可任意填写。

![输入图片说明](%E5%9B%BE%E7%89%87/image9.png)

3. 添加测试计划

进入测试计划，对测试计划进行添加。

![输入图片说明](%E5%9B%BE%E7%89%87/image10.png)

4. 新增项目模块

进入用例模块，点击项目后的新增对项目模块进行添加，项目模块的名称影响后续项目用例的名称，用于分类明细。此处演示为网上轻纺城首页的模块。

![输入图片说明](%E5%9B%BE%E7%89%87/image11.png)

5. 创建项目用例

进入用例管理，对项目用例进行添加。选择用例模块，用例类型选择Web UI。

![输入图片说明](%E5%9B%BE%E7%89%87/image12.png)

用例创建完成后，勾选对应用例，点击用例步骤，进行用例内对应操作的编写。
如图所示，包|定位路径即需要操作的对应元素的名称，支持id、name、xpath、linktext、tagname、cssselector等。
方法|操作即为需要对元素进行的操作，点击即可进行选择，如图所示open对应打开网址（因此不需要定位路径），sendkeys对应对某一个元素输入内容，而click可以对元素进行点击操作，closewindow则是关闭页面。
参数即为需要传输的参数内容，如打开网址所需的URL，登录所需的账户密码等。
步骤动作为延时设置，语法num*wait为在此操作前等待对应时间，num#wait为在此操作后等待对应时间。 **打开网址的操作可能需要添加前置等待，因为需要一定的响应时间来打开浏览器，如果没有延时直接启动则可能会报错。** 
预期结果可以通过Check（id=xxx）语法检验是否成功获取到对应的值。

![输入图片说明](%E5%9B%BE%E7%89%87/image13.png)

如上图为打开一个登录网页进行登录操作，用例步骤编写完成后，点击确定进行保存即可。

6. 应用至测试计划

打开测试计划，对已经创建好的测试计划进行勾选，点击上方计划用例，对用例进行应用，其中顺序影响实际运行时的操作顺序。勾选测试用例后点击保存计划用例。

![输入图片说明](%E5%9B%BE%E7%89%87/image14.png)

7. 创建任务

点击任务调度，进行测试任务的添加，填写对应内容，此处选择任务类型为Web UI，浏览器类型选择你需要使用的浏览器。（浏览器的webdriver版本需要与浏览器版本保持一致，配置方法见前文环境配置篇）

![输入图片说明](%E5%9B%BE%E7%89%87/image15.png)

8. 执行任务

点击任务右侧执行按钮，进行任务的执行，等待脚本自动进行。

![输入图片说明](%E5%9B%BE%E7%89%87/image16.png)

![输入图片说明](%E5%9B%BE%E7%89%87/image17.png)

#### 语法参照

完全版还是建议官网学习，这里只是一些用法。
包|定位路径：语法结构 属性=对应值 如：id=su，如果操作不涉及页面内的元素，此栏不填写。（支持id、name、xpath、linktext、tagname、cssselector）
方法|操作：自动联想除Web UI封装好的操作语法。
预期结果：语法结构 check(属性=对应值) 如check(xpath= .//*[@id='username'])，用来检查步骤完成后，检查对应的元素是否存在。

例：xpath=.//*[@id='xxx']
.选取当前节点
//*选取文档中所有元素
@选取属性
@后可取id、resource-id、name等属性
（1）绝对定位：单斜杠开头根据页面中的顺序和位置向下
（2）相对定位：双斜杠开头，//标签名[@属性名=属性值]

#### 插件（可选）

使用chropath插件可以快速获取网页中的元素信息，便于直接进行定位。
打开EDGE浏览器，选择右上角点击扩展进行下载。

![输入图片说明](%E5%9B%BE%E7%89%87/image18.png)

![输入图片说明](%E5%9B%BE%E7%89%87/image19.png)

![输入图片说明](%E5%9B%BE%E7%89%87/image20.png)

下载完成后，打开网页右键选择检查，点击右侧chropath即可获取选中元素的信息，便于定位。

![输入图片说明](%E5%9B%BE%E7%89%87/image21.png)

#### 特别感谢

感谢官方文档以及官方人员给予的帮助！

eco_moon/Lucky Frame操作手册

简介

发行版

贡献者

近期动态

eco_moon/Lucky Frame操作手册 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

eco_moon/Lucky Frame操作手册