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

如果你想学习自动化测试，我这边给你推荐一套视频，这个视频可以说是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

将元素拖拽到另一个元素的位置。

• 案例

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.set