Web 自动化神器 TestCafe—页面高级操作篇

♥ 前 言

在【Web 自动化神器 TestCafe --- 页面基本操作篇】这篇文章中我们介绍了TestCafe页面交互的一些基本使用

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

一、鼠标拖拽

鼠标拖拽鼠标拖拽

1、拖拽元素偏移

  • 方法:t.drag
python 复制代码
可以将元素相对于原来位置进行偏移拖拽。
  • 案例
python 复制代码
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);
});

如果你想学习自动化测试,我这边给你推荐一套视频,这个视频可以说是B站播放全网第一的自动化测试教程,同时在线人数到达1000人,并且还有笔记可以领取及各路大神技术交流:798478386

【已更新】B站讲的最详细的Python接口自动化测试实战教程全集(实战最新版)_哔哩哔哩_bilibili【已更新】B站讲的最详细的Python接口自动化测试实战教程全集(实战最新版)共计200条视频,包括:1、接口自动化之为什么要做接口自动化、2、接口自动化之request全局观、3、接口自动化之接口实战等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV17p4y1B77x/?spm_id_from=333.337

2、拖拽元素到另一个元素位置

  • 方法:dragToElement
python 复制代码
将元素拖拽到另一个元素的位置。
  • 案例
python 复制代码
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 | 上传文件的路径(支持多个文件上传,以数组的形式传递参数) |

案例

python 复制代码
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

删除文件上传元素中,已选择的上传文件

  • 案例
python 复制代码
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 |

例子
python 复制代码
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_source=testingpai.com)

下面的示例演示了如何使用 t.takeElementScreenshot 动作。

  • 例子
python 复制代码
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,后面的章节会详细讲解,这边咱们直接使用

python 复制代码
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 中

python 复制代码
testcafe中的方法switchToIframe,可以帮我们从主窗口切换到iframe中
  • 方法:switchToIframe

  • 例子

python 复制代码
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()

  • 例子

python 复制代码
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

在当前窗口访问另一个页面

  • 案例
python 复制代码
fixture('Example').page('https://www.baidu.com');

test('Navigate To URL test', async t => {
    await t.navigateTo('https://www.taobao.com');
});

七、窗口切换

TestCafe 在打开新窗口时,会自动切换到新窗口,如果我们在测试的过程中需要手动进行窗口切换,

1、获取窗口描述符

python 复制代码
获取当前活动窗口相对应的窗口描述符
  • 方法

  • 例子

python 复制代码
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 | 从打开的浏览器窗口获得的描述符对象。 |

  • 例子
python 复制代码
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

  • 例子

python 复制代码
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

  • 例子:

python 复制代码
import { Selector } from 'testcafe';

fixture `百度测试`
    .page `https://www.baidu.com`;

test('Wait test', async t => {
  // 打开一个新窗口,接收新窗口的描述符
    await t.openWindow('http://www.taobao.com')
    // 切换到上一个窗口(就窗口)
    t.switchToParentWindow()
});
相关推荐
yannan201903131 分钟前
【算法】(Python)动态规划
python·算法·动态规划
linsa_pursuer4 分钟前
快乐数算法
算法·leetcode·职场和发展
蒙娜丽宁11 分钟前
《Python OpenCV从菜鸟到高手》——零基础进阶,开启图像处理与计算机视觉的大门!
python·opencv·计算机视觉
光芒再现dev13 分钟前
已解决,部署GPTSoVITS报错‘AsyncRequest‘ object has no attribute ‘_json_response_data‘
运维·python·gpt·语言模型·自然语言处理
AndyFrank26 分钟前
mac crontab 不能使用问题简记
linux·运维·macos
好喜欢吃红柚子26 分钟前
万字长文解读空间、通道注意力机制机制和超详细代码逐行分析(SE,CBAM,SGE,CA,ECA,TA)
人工智能·pytorch·python·计算机视觉·cnn
小馒头学python31 分钟前
机器学习是什么?AIGC又是什么?机器学习与AIGC未来科技的双引擎
人工智能·python·机器学习
神奇夜光杯40 分钟前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长
千天夜1 小时前
使用UDP协议传输视频流!(分片、缓存)
python·网络协议·udp·视频流
测试界的酸菜鱼1 小时前
Python 大数据展示屏实例
大数据·开发语言·python