2026/4/6 5:59:42
网站建设
项目流程
dede 网站名称不显示,烟台开发区网站建设,网站可以做推广吗,烟台产品网站建设一、背景与意义
Selenium是常用的Web自动化测试工具#xff0c;前端开发工程师可以在完成每项开发任务之后#xff0c;使用Selenuim做一下回归测试#xff0c;以避免被提BUG太多导致后面做项目总结时太难看。测试工程师学习Selenium时需要掌握很多API接口#xff0c;例如页…一、背景与意义Selenium是常用的Web自动化测试工具前端开发工程师可以在完成每项开发任务之后使用Selenuim做一下回归测试以避免被提BUG太多导致后面做项目总结时太难看。测试工程师学习Selenium时需要掌握很多API接口例如页面元素如何定位、如何触发各种鼠标操作事件等。而前端工程师则可以充分利用自己所掌握的JavaScript相关API来替换Selenium中的一些API从而更快地入门。文本接下来将给出一个适合前端开发工程师而不是测试工程师的Selenium入门示例。二、代码示例2.1 编程语言选择Selenium支持的编程语言有Java、Python、C#、Ruby、JavaScript、KotlinPython可能是最常用的语言很多Selenium教材都是以Python作为编程语言。但对大多数前端开发工程师而言写JavaScript当然比写Python更顺手。故这里以JavaScript作为编程语言。2.2 安装Selenium依赖运行如下命令即可安装JavaScript版本的Selenium依赖npm install selenium-webdriver2.3 启动Selenium接下来创建自动化测试的主文件test.jsconst { Builder } require(selenium-webdriver);// 由于要用到await关键字故这里需要使用async function包装一下。(async function() {/** 这里使用firefox而不是更常用的浏览器chrome是因为selenium和chrome搭配使用时* 会出现一些兼容性问题导致的错误对新手不那么友好。用firefox省事一些*/driver await new Builder().forBrowser(firefox).build();await driver.get(https://www.sogou.com);})();然后运行node test.js命令可以看到firefox打开了https://www.sogou.com并且导航栏是红色的表示firefox受到其他程序的控制2.4 自动执行文本输入与按钮点击操作接下来我们要在搜索框中输入HelloWorld并执行搜索。查看页面元素的代码可知搜索框的id为query根据基础的JavaScript知识如果在firefox的开发者控制台中执行以下JavaScript代码可以在搜索框中输入HelloWorlddocument.getElementById(query).value HelloWorld类似地搜索按钮的id为stb根据基础的JavaScript知识可知以下JavaScript可以触发搜索document.getElementById(stb).click()Selenium正好也提供了执行JavaScript的API即driver.executeScript函数test.js中可使用driver.executeScript函数执行输入HelloWorld并触发搜索的操作const { Builder } require(selenium-webdriver);// 由于要用到await关键字故这里需要使用async function包装一下。(async function() {/** 这里使用firefox而不是更常用的浏览器chrome是因为selenium和chrome搭配使用时* 会出现一些兼容性问题导致的错误对新手不那么友好。用firefox省事一些*/driver await new Builder().forBrowser(firefox).build();await driver.get(https://www.sogou.com);// 输入HelloWorld并触发搜索await driver.executeScript(document.getElementById(query).value HelloWorld);await driver.executeScript(document.getElementById(stb).click());})();再次运行node test.js命令可以看到浏览自动打开网站并执行了搜索操作。绝大多数网页上的操作都可以通过JavaScript来模拟实现故只用driver.executeScript就可以完成很多操作了。2.5 等待结果和补充断言执行搜索之后可能需要等待几百毫秒才能返回搜索结果这里就需要使用Selenium的等待函数driver.wait。另外执行搜索之后页面应该会展示“已为您找到xxxx条相关结果”故可以增加断言验证是否符合预期。另外整个测试流程执行完毕之后应该调用driver.quit()退出。相关代码补充如下const { Builder } require(selenium-webdriver);const assert require(assert);// 由于要用到await关键字故这里需要使用async function包装一下。(async function() {/** 这里使用firefox而不是更常用的浏览器chrome是因为selenium和chrome搭配使用时* 会出现一些兼容性问题导致的错误对新手不那么友好。用firefox省事一些*/driver await new Builder().forBrowser(firefox).build();await driver.get(https://www.sogou.com);// 输入HelloWorld并触发搜索await driver.executeScript(document.getElementById(query).value HelloWorld);await driver.executeScript(document.getElementById(stb).click());// wait方法第一个参数是函数Selenium会反复调用该函数直到该函数的返回结果为true再执行后面的代码。// wait方法第二个参数是设置超时时间单位毫秒超过该时间第一个参数还没返回true就报错。await driver.wait(async () {// 注意如果要获取executeScript的执行返回JS命令中必须要有return语句return await driver.executeScript(return !!document.querySelector(.num-tips));} , 60 * 1000); // 超时时间设置为60秒// 获取页面上的“已为您找到xxxx条相关结果”这一段文字const searchResultText await driver.executeScript(return document.querySelector(.num-tips).innerText);// 打个日志以方便调试console.log(searchResultText, searchResultText);// 通过断言确认是否符合预期assert(searchResultText.match(/^搜狗已为您找到约[0-9,]条相关结果$/, ), 没有获取到搜索结果);driver.quit();})();三、代码结构优化从代码结构的角度看连续两段driver.executeScript命令可以合并在一起且driver.executeScript命令经常用但有些长可以用一个名字短一点的函数替代。代码优化为const { Builder } require(selenium-webdriver);const assert require(assert);// 由于要用到await关键字故这里需要使用async function包装一下。(async function() {/** 这里使用firefox而不是更常用的浏览器chrome是因为selenium和chrome搭配使用时* 会出现一些兼容性问题导致的错误对新手不那么友好。用firefox省事一些*/driver await new Builder().forBrowser(firefox).build();await driver.get(https://www.sogou.com);const exec command driver.executeScript(command);// 输入HelloWorld并触发搜索await exec(document.getElementById(query).value HelloWorld;document.getElementById(stb).click(););let searchResultText null;// wait方法第一个参数是函数Selenium会反复调用该函数直到该函数的返回结果为true再执行后面的代码。// wait方法第二个参数是设置超时时间单位毫秒超过该时间第一个参数还没返回true就报错。await driver.wait(async () {// 获取页面上的“已为您找到xxxx条相关结果”这一段文字// 注意如果要获取executeScript的执行返回JS命令中必须要有return语句searchResultText await exec(return document.querySelector(.num-tips)?.innerText);return !!searchResultText;} , 60 * 1000); // 超时时间设置为60秒// 打个日志以方便调试console.log(searchResultText, searchResultText);// 通过断言确认是否符合预期assert(searchResultText.match(/^搜狗已为您找到约[0-9,]条相关结果$/, ), 没有获取到搜索结果);driver.quit();})();感谢每一个认真阅读我文章的人礼尚往来总是要有的虽然不是什么很值钱的东西如果你用得到的话可以直接拿走这些资料对于【软件测试】的朋友来说应该是最全面最完整的备战仓库这个仓库也陪伴上万个测试工程师们走过最艰难的路程希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取