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()
  });