伊通县建设局网站,wordpress cms系统,中小企业做网站贷款,wordpress 知鸟♥ 前 言 在【Web 自动化神器 TestCafe — 页面基本操作篇】这篇文章中我们介绍了TestCafe页面交互的一些基本使用 Web 自动化神器 TestCafe — 页面基本操作篇 这篇文章接着上一篇来给大家介绍一下 TestCafe 页面交互的一些高级操作。 一、鼠标拖拽 鼠标拖拽鼠标拖拽 …♥  前  言 在【Web 自动化神器 TestCafe — 页面基本操作篇】这篇文章中我们介绍了TestCafe页面交互的一些基本使用 Web 自动化神器 TestCafe — 页面基本操作篇 这篇文章接着上一篇来给大家介绍一下 TestCafe 页面交互的一些高级操作。 一、鼠标拖拽  鼠标拖拽鼠标拖拽 1、拖拽元素偏移 方法t.drag 可以将元素相对于原来位置进行偏移拖拽。 案例 import { Selector } from testcafe; fixture 元素拖拽 .page https://www.runoob.com/try/try.php?filenamejqueryui-api-droppable; test(Drag test, async t { await t .switchToIframe(#iframeResult) // 相对于元素原来位置x轴拖动360像素 .drag(#draggable, 360, 0);}); 2、拖拽元素到另一个元素位置 方法dragToElement 将元素拖拽到另一个元素的位置。 案例 import { Selector } from testcafe;fixture 元素拖拽.page https://www.runoob.com/try/try.php?filenamejqueryui-api-droppable;test(Drag test, async t {await t.switchToIframe(#iframeResult)// 将元素#draggable 拖动到 #droppable 中.dragToElement(#draggable, #droppable) }); 如果你想学习自动化测试我这边给你推荐一套视频这个视频可以说是B站播放全网第一的自动化测试教程同时在线人数到达1000人并且还有笔记可以领取及各路大神技术交流798478386   【已更新】B站讲的最详细的Python接口自动化测试实战教程全集实战最新版_哔哩哔哩_bilibili【已更新】B站讲的最详细的Python接口自动化测试实战教程全集实战最新版共计200条视频包括1、接口自动化之为什么要做接口自动化、2、接口自动化之request全局观、3、接口自动化之接口实战等UP主更多精彩视频请关注UP账号。https://www.bilibili.com/video/BV17p4y1B77x/?spm_id_from333.337.search-card.all.click 二、文件上传   1、上传文件 方法t.setFilesToUpload 参数 参数描述selector 目标元素目标元素必须是带有 typefile 属性的 input 标签。 filePath 上传文件的路径支持多个文件上传以数组的形式传递参数  案例 fixture My fixture.page https://www.layui.com/demo/upload.html;test(Uploading, async t {await t// 上传文件.setFilesToUpload(#test2input, [C:\\课件\\images\\p5_1_1.png,C:\\课件\\images\\p5_1.png]) }); 2、清除上传文件 方法t.clearUpload 删除文件上传元素中已选择的上传文件 案例 fixture My fixture.page https://www.layui.com/demo/upload.html;test(Uploading, async t {await t// 上传文件.setFilesToUpload(#test2input, [C:\\课件\\images\\p5_1_1.png,]).clearUpload(#test2input)}); 三、截屏操作   关于截图testcafe 提供了两个方法一个的对整个页面进行截图一个是对具体的某个元素进行截图。 1、页面进行截图 方法t.takeScreenshot 对整个页面进行截图截取下来的图片会自动保存到 screenshot 的目录中 参数说明 范围 描述 默认值 path  屏幕截图文件的相对路径和名称非必填。  fullPage  指定应捕获整个页面包括由于溢出而看不到的内容非必填。  false 例子 import { Selector } from testcafe;fixture 页面截图.page https://www.baidu.com;// 百度首页搜索柠檬班然后整个页面截图 test(screenshot , async t {await t.typeText(#kw, 柠檬杯).click(#su).takeScreenshot({path: index_page.png,fullPage: true}); }); 2、元素截图 方法t.takeElementScreenshot() 对页面指定的具体元素进行截图 参数说明 范围描述selector屏幕截图的网页元素 path 屏幕截图文件的相对路径和名称非必填。 options 定义如何截屏的选项非必填。详细请参阅官方文档  官方文档https://testcafe.io/documentation/402676/reference/test-api/testcontroller/takeelementscreenshot?utm_sourcetestingpai.com 下面的示例演示了如何使用 t.takeElementScreenshot 动作。 例子 import { Selector } from testcafe;fixture 页面截图.page https://www.baidu.com;// 百度首页搜索按钮截图 test(screenshot , async t {await t.takeElementScreenshot(#su, su_ele.png);}); 四、窗口滚动   TestCafe 对处于页面下方不可见的元素进行操作会自动滚动到元素可见。因此 TestCafe 中没有提供专用来滚动窗口的操作方法。如果您特别需要在不对元素执行任何操作的情况下滚动到页面元素可见可以使用 TestCafe 提供的客户端功能构造函数 ClientFunction自己定义一个滚动的方法。 1、自定义滚动方法 自定义滚动的方法需要使用 TestCafe 提供的构造函数 ClientFunction 来创建客户端函数。 关于 ClientFunction后面的章节会详细讲解这边咱们直接使用 import { ClientFunction } from testcafe;// 定义一个相对当前位置进行滚动的方法 const scrollBy ClientFunction((x,y) {window.scrollBy(x, y); });// 定义一个相对当前位置滚动到页面指定像素位置的方法 const scrollTo ClientFunction((x,y) {window.scrollTo(x, y); });fixture My fixture.page https://www.layui.com/demo/upload.html;test(Test scrollBy, async t {// 相对当前位置向下滚动100像素await scrollBy(100,0); }); test(Test scrollTo, async t {//滚动到页面X轴为1000像素的位置await scrollTo(1000,0); });五、iframe 切换   TestCafe 测试的测试操作和 selenium 一样仅限于主窗口。如果页面中存在 iframe 内嵌页面那么进行自动化测试的过程中如果存在 iframe则应需要进行切换。 1、切换到指定的 iframe 中 testcafe中的方法switchToIframe可以帮我们从主窗口切换到iframe中 方法switchToIframe 例子 import { Selector } from testcafe;fixture qq邮箱登录之iframe切换.page https://mail.qq.com/;test(iframe test, async t {await t//切换到id为login_frame的iframe中.switchToIframe(#login_frame)// 输入账号.typeText(#u, 1234567872)// 输入面面.typeText(#p, 123qwe) }); 2、从 iframe 中切换回页面窗口 方法switchToMainWindow() 例子 import { Selector } from testcafe;fixture qq邮箱登录之iframe切换.page https://mail.qq.com/;test(iframe test, async t {await t//切换到id为login_frame的iframe中.switchToIframe(#login_frame)// 输入账号.typeText(#u, 1234567872)// 输入面面.typeText(#p, 123qwe) });test(iframe test, async t {const mobile_ele Selector(a).withText(手机版)await t// 切换回原窗口.switchToMainWindow();// 点击窗口中的手机版.click(mobile_ele) }); 六、页面访问 在前几节的学习中我们打开页面都是在 fixture 中调用 page 方法。那么如果在测试用例中我们要跳转到另一个指定的页面则需要使用 TestCafe 中的 navigateTo 方法 方法navigateTo 在当前窗口访问另一个页面 案例 fixture(Example).page(https://www.baidu.com);test(Navigate To URL test, async t {await t.navigateTo(https://www.taobao.com); }); 七、窗口切换   TestCafe 在打开新窗口时会自动切换到新窗口如果我们在测试的过程中需要手动进行窗口切换 1、获取窗口描述符 获取当前活动窗口相对应的窗口描述符 方法 例子 import { Selector } from testcafe;fixture 百度测试.page https://www.baidu.com;test(Wait test, async t {// 打开一个新窗口接收新窗口的描述符await t.openWindow(http://www.taobao.com)// 获取当前窗口的描述符const new_desc await t.getCurrentWindow(); }); 2、切换到特定窗口 方法t.switchToWindow 参数 参数名描述windowDescriptor从打开的浏览器窗口获得的描述符对象。  例子 import { Selector } from testcafe;fixture 百度测试.page https://www.baidu.com;test(Wait test, async t {// 获取当前窗口的描述符const old_win await t.getCurrentWindow();// 打开一个新窗口 const new_win await t.openWindow(http://www.taobao.com)// 切换到老窗口t.switchToWindow(old_win) // 再切换到新窗口t.switchToWindow(new_win) }); 3、切换上一个活动窗口 切换到前一个活动的窗口 使用该方法方法调用将在两个最近的窗口之间循环切换。 方法t.switchToPreviousWindow 例子 import { Selector } from testcafe;fixture 百度测试.page https://www.baidu.com;test(Wait test, async t {// 打开一个新窗口接收新窗口的描述符await t.openWindow(http://www.taobao.com)// 切换到上一个窗口(就窗口)t.switchToPreviousWindow()// 切换回来t.switchToPreviousWindow()// 切换到上一个窗口t.switchToPreviousWindow() }); 4、切换的父级窗口 方法t.switchToParentWindow 例子 import { Selector } from testcafe;fixture 百度测试.page https://www.baidu.com;test(Wait test, async t {// 打开一个新窗口接收新窗口的描述符await t.openWindow(http://www.taobao.com)// 切换到上一个窗口(就窗口)t.switchToParentWindow() });