zoukankan      html  css  js  c++  java
  • Web自动化神器TestCafe(五)—页面交互篇(下)

    前言

    ​ 在【Web自动化神器TestCafe—页面交互篇(上)】这篇文章中我们介绍了TestCafe页面交互的一些基本使用,

    这篇文章接着上一篇来给大家介绍一下TestCafe页面交互的一些高级操作。

    一、鼠标拖拽

    1、拖拽元素偏移

    • 方法:t.drag

      ​ 可以将元素相对于原来位置进行偏移拖拽。

    • 案例
    import { Selector } from 'testcafe';
    
    fixture `元素拖拽`
        .page `https://www.runoob.com/try/try.php?filename=jqueryui-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?filename=jqueryui-api-droppable`;
    
    test('Drag test', async t => {
        await t
        	.switchToIframe('#iframeResult')
        	// 将元素#draggable 拖动到 #droppable 中
            .dragToElement('#draggable', '#droppable')
    });
    

    二、文件上传

    1、上传文件

    • 方法:t.setFilesToUpload:
    • 参数:
    参数 描述
    selector 目标元素(目标元素必须是带有type="file"属性的input标签。)
    filePath 上传文件的路径(支持多个文件上传,以数组的形式传递参数)
    • 案例
      fixture `My fixture`
          .page `https://www.layui.com/demo/upload.html`;
      
      test('Uploading', async t => {
          await t
          	// 上传文件
              .setFilesToUpload('#test2+input', [
                  '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('#test2+input', [
                  'C:\课件\images\p5_1_1.png',
              	
              ])
          	.clearUpload("'#test2+input")
          
      });
      

    三、截屏操作

    关于截图,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 定义如何截屏的选项(非必填)。详细请参阅官方文档

      下面的示例演示了如何使用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);
    });
    

    1

    五、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)
      });
      
      

    1

    六、页面访问

    在前几节的学习中我们打开页面都是在 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()
      });
      
      
    =====请大家尊重原创,如要转载,请注明出处:转载自:https://www.cnblogs.com/nmb-musen/,谢谢!!=====
  • =====有任何疑问,欢迎加微信 MoX66999 (请备注:博客园-木森)=====

查看全文
  • 相关阅读:
    品优购项目(web)
    Linux
    web前端面试题
    三级网络
    Vue报错:TypeError: Cannot create property ‘xxx‘ on string ‘xxxx
    vue 动态添加页面背景色
    vue 打开新页面 页面滚动到顶部
    ios 系统 h5 页面不发送请求
    小程序返回上一页
    小程序动态设置页面背景色、
  • 原文地址:https://www.cnblogs.com/nmb-musen/p/15331228.html
  • Copyright © 2011-2022 走看看