vscode+robotframework的实践-selenium（更新中）seo优化

vscode+robotframework的实践-selenium（更新中）

news/2024/9/25 18:30:47

一说明

上一次使用robotframework还是2019年毕业刚进入工作的时候，使用的是robotframework的官方配套编辑器RIDE进行自动化脚本编写，在使用的过程中偶尔会遭遇卡顿、闪退等问题，当时排查问题大多数是因为RIDE自身与python版本以及操作系统之间的兼容性问题导致的，那时候没有编程意识，代码功底也相对薄弱，RIDE是一个对新手很好的编辑工具。但有前端编码经验后，使用vscode编辑器编写脚本的效率会更高，有相对应的插件支持，也是官方推荐的IDE之一。
写这篇文章的目的主要是为了方便自己重新回忆robotframework的使用，结合vscode达到实战的目的，不足之处随时欢迎私信沟通鸭
该文章比较适合有python+RF基础，想从RIDE改成用VScode编写用例的同学，听到测试套件（test_suite）、关键字(uesr_keyword)、资源（resorce）能立刻理解的，没有基础的同学可以先看相关书籍学习，此处推荐《自动化测试实战宝典》、《RobotFramework自动化测试修炼宝典》
最好的RF教程其实都在RF官网，英语能力强的小伙伴建议直接看官网文档（或者借助翻译工具也行）

二工具安装版本

vscode-V1.90.2
python-V3.11.9
谷歌浏览器-V126.0.6478.115
根据自己的谷歌浏览器安装对应的浏览器驱动，具体可查看SeleniumLibrary的git说明，其中也有讲解了怎么下载浏览器驱动

三安装

3.1 安装RF（V7.0.1）：`pip install robotframework`

3.2 安装Selenium Library（V6.5.0）：`pip install --upgrade robotframework-seleniumlibrary`

3.3 在vscode上安装RF相关插件

写一个熟悉的helloworld。*** Test Cases ***此类的语法可以参考官网语法

*** Test Cases ***
test_case01Log    helloworld!

四实践（持续更新中）

4.1 实践1：打开谷歌浏览器，进入百度界面，搜索并进入robotframe官网。

4.1.1 对应代码

点击查看代码

*** Comments ***
#此处用来填写说明
打开谷歌浏览器，进入百度界面，搜索并进入robotframe官网。
*** Settings ***
#此处用来设置用例，常见的有引入库、设置setup teardown
Library    SeleniumLibrary    
Test Teardown    Close Browser
*** Variables ***
#此处用来设置用例，常见的有引入库、设置setup teardown*** Test Cases ***
#此处用来设置测试用例
Open Page    #用例名称[Teardown]    Run Keyword If Test Failed    Close Browser    #用例如果失败了就关闭浏览器Open Browser    url=https://www.baidu.com   browser=chrome    #打开百度搜索页面Maximize Browser Window    #窗口最大化Wait Until Page Contains Element    locator=id=kw    #等待元素出现，默认等待时间是5SInput Text    locator=id=kw    text=Robot Framework    #在id为kw的输入框里输入Robot Framework Click Button    locator=id=su    #点击id为su的搜索按钮Wait Until Page Contains Element    locator=//div[contains(@mu, 'robotframework.org')]    #等待想要的搜索网址出现，这里是xpath选择器Click Element    locator=//div[contains(@mu, 'robotframework.org')]/div/div/h3/a    #点击对应标题Switch Window    locator=NEW    # 切换到新标签页，进入到rf网址
*** Keywords ***
#此处用来设置变量

4.1.2 使用vscode调试代码。这时候使用IDE的好处就出来了，断点调试在编写用例时非常使用，可以迅速帮我们找到BUG，以及随时停在我们需要检查的代码上，RIDE编辑器则无法做到这一步。

调试功能如下：

继续：直接跳到下一个断点处，点击后就会顺序执行代码到断点2处时停下
逐过程：如果代码中有循环或者子函数的话，进入带循环里和子函数，但是当前没有循环，所以点击后的效果也相当于单步调试
单步调试：从当前断点处，点击一次逐步执行一行代码（不打断点也可以）
单步跳出：进入代码中有循环或者子函数的时候，可以点击这个跳出循环和子函数进入到下一行代码
重启：顾名思义，重新执行代码
停止：顾名思义，停止当前代码

4.1.3 其他说明

vscode可以在使用关键字时快速匹配相关关键字列表

鼠标移动到关键字上，也可以快速给出关键字说明

遗漏哪些必填项，也能给出对应错误信息

4.2 实践2：登陆界面功能测试

4.2.1 环境配置

4.2.1.1 先简单写一个登陆界面，用于测试。把这两个html代码放置在一个文件目录下，对login.html右键使用open with live sever可以在浏览器中打开对应网址。open with live sever功能可以创建一个服务，方便我们调试html代码

点击查看login.html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Login Page</title><style>body {font-family: Arial, sans-serif;text-align: center;}.container {margin-top: 100px;width: 300px;margin-left: auto;margin-right: auto;}input[type='text'],input[type='password'],input[type='submit'] {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;box-sizing: border-box;font-size: 16px;}input[type='submit'] {background-color: #4caf50;color: white;border: none;cursor: pointer;}input[type='submit']:hover {background-color: #45a049;}</style></head><body><div class="container"><h2>Login</h2><form id="loginForm" onsubmit="return checkLogin()"><label for="username">Username:</label><br /><input type="text" id="username" name="username" /><br /><label for="password">Password:</label><br /><input type="password" id="password" name="password" /><br /><br /><input type="submit" value="Login" /></form><p id="loginMessage" style="display: none; color: green">Login successful!</p></div><script>function checkLogin() {var username = document.getElementById('username').valuevar password = document.getElementById('password').valueif (!username || !password) {alert('请输入账号密码后再点击登录！')return false} else if (username === 'root' && password === 'root1234') {document.getElementById('loginMessage').style.display = 'block'window.location.href = './mainPage.html'return false // Prevent form submission} else if (username === 'root' && password != 'root1234') {alert('密码错误，请输入正确的密码！')return false} else {alert('账号密码错误，请检查账号密码！')return false}}</script></body>
</html>

点击查看mainPage.html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据搜索页面</title><style>table {border-collapse: collapse;width: 100%;}th, td {border: 1px solid #dddddd;text-align: left;padding: 8px;}th {background-color: #f2f2f2;}</style>
</head>
<body><h1>数据搜索页面</h1><form id="searchForm"><label for="name">姓名：</label><input type="text" id="name" name="name"><label for="gender">性别：</label><select id="gender" name="gender"><option value="">全部</option><option value="male">男</option><option value="female">女</option></select><button type="button" onclick="searchData()">搜索</button></form><br><table id="dataTable"><thead><tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td>男</td><td>25</td></tr><tr><td>2</td><td>李四</td><td>男</td><td>30</td></tr><tr><td>3</td><td>王芳</td><td>女</td><td>28</td></tr></tbody></table><script>function searchData() {var inputName = document.getElementById('name').value.toLowerCase();var inputGender = document.getElementById('gender').value.toLowerCase();var table = document.getElementById('dataTable');var rows = table.getElementsByTagName('tr');for (var i = 1; i < rows.length; i++) {var name = rows[i].getElementsByTagName('td')[1].innerText.toLowerCase();var gender = rows[i].getElementsByTagName('td')[2].innerText.toLowerCase();var nameMatch = name.includes(inputName);var genderMatch = (inputGender === '' || (inputGender === 'male' && gender === '男') || (inputGender === 'female' && gender === '女'));if (nameMatch && genderMatch) {rows[i].style.display = '';} else {rows[i].style.display = 'none';}}}</script>
</body>
</html>

登陆页面功能设计如下：

功能1：输入正确的账号密码（root/root1234），登录成功，跳转到主页
功能2：输入正确的账号，错误的密码，登录失败并给出提示信息：密码错误，请输入正确的密码
功能3：输入错误的账号密码，登录失败并给出提示信息：账号密码错误，请检查账号密码
功能4：不输入账号密码点击登录，登录失败并给出提示信息：请输入账号密码后再点击登录！

4.2.1.2 根据页面功能设计用例

用例1：输入正确的账号密码（root/root1234）。预期：登录成功，跳转到搜索界面
用例2：输入正确的账号，错误的密码。预期：登录失败并给出提示信息：密码错误，请输入正确的密码
用例3：不输入账号输入密码点击登录。预期：登录失败并给出提示信息：请输入账号密码后再点击登录！
用例4：输入账号不输入密码点击登录。预期：登录失败并给出提示信息：请输入账号密码后再点击登录！
用例5：不输入账号密码点击登录。预期：登录失败并给出提示信息：请输入账号密码后再点击登录！
用例6：输入错误的账号密码。预期：登录失败并给出提示信息：账号密码错误，请检查账号密码

4.2.1 编写RF代码

4.2.1.1 目录结构

4.2.1.2 相关代码

点击查看login_keywords.robot代码

*** Comments ***
登录相关的全局关键字
*** Settings ***
Library    SeleniumLibrary   
*** Variables ***
${IMPLICIT_WAIT_TIME}    5
${LOGIN_URL}    http://127.0.0.1:5500/view/login.html
*** Keywords ***
OPEN LOGIN PAGEOpen Browser    ${LOGIN_URL}    chromeSet Selenium Implicit Wait    ${IMPLICIT_WAIT_TIME}

点击查看keywords.robot代码

*** Comments ***
登陆页面用到的关键字
*** Settings ***
Library    SeleniumLibrary   
*** Keywords ***
INPUT USER AND PASSWORD[Arguments]    ${username}   ${password}[Documentation]    输入用户名(username)和密码(password)Input Text    locator=//input[@id="username"]    text=${username}Input Text    locator=//input[@id="password"]    text=${password}Click Element    locator=//input[@type="submit"]

点击查看login.robot代码

*** Comments ***
测试登陆页面
*** Settings ***
Library    SeleniumLibrary    
Resource    ../keywords/login_keywords.robot
Resource    ./keywords.robot
Suite Setup    OPEN LOGIN PAGE    #自定义关键字
Suite Teardown    Close Browser
*** Test Cases ***
登录成功[Tags]    smoke    login    P    #标签INPUT USER AND PASSWORD    username=root    password=root1234    #使用自定义关键字Element Should Be Visible    locator=//h1[text()='数据搜索页面']
登录失败-账号正确密码错误[Tags]    smoke    login    NGo To    url=${LOGIN_URL}INPUT USER AND PASSWORD    username=root    password=root12345${alert_message} =    Handle Alert Should Be Equal As Strings    ${alert_message}    密码错误，请输入正确的密码！
登录失败-不输入账号[Tags]    smoke    login    NGo To    url=${LOGIN_URL}INPUT USER AND PASSWORD    username=    password=root1234   ${alert_message} =    Handle Alert Should Be Equal As Strings    ${alert_message}    请输入账号密码后再点击登录！
登录失败-不输入密码[Tags]    smoke    login    NGo To    url=${LOGIN_URL}INPUT USER AND PASSWORD    username=root    password=  ${alert_message} =    Handle Alert Should Be Equal As Strings    ${alert_message}    请输入账号密码后再点击登录！  
登录失败-不输入账号和密码[Tags]    smoke    login    NGo To    url=${LOGIN_URL}INPUT USER AND PASSWORD    username=    password=    ${alert_message} =    Handle Alert Should Be Equal As Strings    ${alert_message}    请输入账号密码后再点击登录！ 
登录失败-账号密码错误[Tags]    smoke    login    NGo To    url=${LOGIN_URL}INPUT USER AND PASSWORD    username=root1   password=root1234${alert_message} =    Handle Alert Should Be Equal As Strings    ${alert_message}    账号密码错误，请检查账号密码！
*** Keywords ***
#此处用来设置变量

4.2.1.3 其他说明

有一些步骤是重复的，此时可以采用自定义关键字的写法，提高效率。robot文件之间是可以相互引用的，例如A.robot要引用B.robot里的关键字，只需要在A.robot的Settings处通过使用Resource关键字引用B.robot文件，即可使用B.robot文件里头的Keywords。至于文件命名以及目录命名这个就需要自己结合项目的实际情况去创建，一个好的清晰的目录结构有利于项目分工合作和后期拓展，所以还是需要想一下的。
在vscode也支持单个执行用例、按套件执行用例、按目录执行用例，调试同理。