Web 自动化神器 TestCafe—页面基本操作篇

Web 自动化神器 TestCafe—页面基本操作篇_第1张图片

前 言


Testcafe是基于node.js的框架,以操作简洁著称,是web自动化的神器

今天主要给大家介绍一下testcafe这个框架和页面元素交互的方法。

一、互动要求

使用 TestCafe 与元素进行交互操作,元素需满足以下条件:☟

元素在 body 页面窗口或 iframe 窗口的元素内。如果某个元素在视口之外,则 TestCafe 通过滚动可以滚动到元素可见。

元素是可见的,具有以下属性:

属性

说明

display

没有设置为 none

visibility

设置为 visible(默认值)

width

> = 1 像素

height

> = 1 像素

元素不重叠。

TestCafe 动作以某个动作 offsetX 或 offsetY 选项指定的元素的中心或点为目标。如果另一个元素遮挡了目标点,则在顶部元素上执行操作(例如,t.click 操作在其上方单击该元素)。
 

二、点击操作

关于对元素进行点击操作,使用 testcafe 提供了三个方法,分别为单击、双击、鼠标右击,接下来我们一起来了解一下鼠标操作的使用方法。

1、单击

方法:t.click

在指定元素位置,鼠标单击

参数:

参数

描述

selector

双击的页面元素

例子:

test('click test', async t => {
    await t.click('#su');
});

2、双击

方法:t.doubleClick

在指定元素位置,鼠标双击元素

参数:

参数

描述

selector

双击的页面元素

例子:

test('doubleClic test', async t => {
    await t.doubleClick('#su')
});

3、右击

方法:t.rightClick

在指定元素位置,鼠标右击

参数:

参数

描述

selector

双击的页面元素

例子:

test('rightClick test', async t => {
    await t.rightClick('#cell-1-1')
});

三、输入操作

方法:t.typeText

输入表单元素的值

参数:

参数

描述

selector

接收输入内容的表单元素

text

输入的文本

例子:

import { Selector } from 'testcafe';


fixture('Example').page('https://www.baidu.com');


test('Type Text test', async t => {
    await t
      .typeText('#kw', '1')
})

四、键盘按键

在测试的操作中,如果涉及到键盘按键的操作,那么 testcafe 中也提供了很方便的方法 pressKey。

方法:t.pressKey

按键类型:

按键类型

例子

字母、数字键

'a','A','1'

修饰键

'shift','alt' 、'ctrl',

导航键和动作键

'backspace','tab','enter'

按键组合

'shift+a', 'ctrl+v'

顺序按键

使用空格分隔多个案例操作,例如,'ctrl+c ctrl+v'

例子:

test('enter test', async t => {
    // 按下 a 键
    await t.pressKey('a')
     // 按下 shift+a 键
    await t.pressKey('shift+a')
     // 先按下 ctrl+c复制,再按ctrl+v粘贴
    await t.pressKey('ctrl+c ctrl+v')
  
});

五、文本选择

关于表单或者 textarea 这类可编辑的元素,在进行输入之前,如果要选中原有的文字内容,并进行删除操作,则需要先选择文本,然后再进行删除
 

方法:t.selectText

在各种类型的输入元素中选择文本

参数:

参数

类型

描述

selector

字串| 选择器

标识将要选择其文本的网页元素;必填参数

startPos

number

选择的开始位置,从零开始的整数;非必填,默认为 0

endPos

number

选择的结束位置;非必填,可见文本内容的长度。

例子:

import { Selector } from 'testcafe';


fixture('Example').page('https://www.baidu.com');


test('Type Text test', async t => {
  // 输入 柠檬班
    await t.typeText('#kw', '1')
      // 选中输入的文本
      .selectText('#kw')
      // 按下删除键   删除输入的文本
        .pressKey('delete');
})

六、鼠标悬停

方法:t.hover

将鼠标指针悬停在页面的某个元素上。

参数:

参数

描述

selector

页面元素

例子:

import { Selector } from 'testcafe';


fixture('Example').page('https://www.baidu.com');


test('Type Text test', async t => {
  // 鼠标悬停在百度页面顶部的更多菜单上
    await t.hover('a[name="tj_briicon"]')
});

七、强制等待

在我们执行测试时,对于某个操作后,如果需要强制等待一段时间则可以使用 t.wait 方法来进行强制等待。

方法:t.wait

代码执行到 wait 方法,进行强制等待

参数:

范围

类型

描述

timeout

数字

暂停持续时间(以毫秒为单位)。

例子:

import { Selector } from 'testcafe';


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


test('Wait test', async t => {
    await t
      // 输入柠檬班
      .typeText('#kw', '2')
      // 强制等待3秒
        .wait(3000)
      // 点击搜索
      .click('#su')
  
});

八、窗口管理

1、打开新窗口

方法:openWindow

打开一个新的浏览器窗口。返回匹配的窗口描述符

参数:

参数

描述

url

打开的 URL。可以是绝对的或相对的。

例子:

import { Selector } from 'testcafe';


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


test('Wait test', async t => {
    // 打开一个新窗口,接收新窗口的描述符
    const winDesc = await t.openWindow('http://www.taobao.com')
});

2、关闭窗口

方法:closeWindow

关闭浏览器窗口。(注意点:不能使用该方法直接关闭主窗口)

参数:

参数

描述

windowDescriptor

描述目标窗口的对象。如果不传此参数,默认关闭当前活动窗口。

例子:

import { Selector } from 'testcafe';


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


test('Wait test', async t => {
  // 打开一个新窗口,接收新窗口的描述符
    const winDesc1 = await t.openWindow('http://www.taobao.com')
    // 关闭窗口
    await t.closeWindow(winDesc1)
});

九、调整窗口大小

1、窗口最大化

方法:t.maximizeWindow

把浏览器窗口设置为最大化

例子:

import { Selector } from 'testcafe';


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


// 窗口最大化
test('screenshot ', async t => {
    await t.maximizeWindow();
});

2、调整窗口大小

方法:t.resizeWindow

参数:

参数名

描述

width

新的宽度(以像素为单位)。

height

新高度,以像素为单位。

例子:

  import { Selector } from 'testcafe';


const menu = Selector('#side-menu');


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


test('设置浏览器窗口大小', async t => {
    await t
        .resizeWindow(200, 100)
});

3、调整窗口大小适配设备屏幕

方法:t.resizeWindowToFitDevice

通过传入移动设备的设备名,自动调整窗口大小,以适合指定移动设备的屏幕

参数:

参数

描述

deviceName

设备的名称。比如 iphonex, iphonexr

例子:

import { Selector } from 'testcafe';


const menu = Selector('#side-menu');


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


test('设置浏览器窗口大小', async t => {
    await t
        .resizeWindowToFitDevice('iphonex', {
            portraitOrientation: true
        })
});

看到这里的朋友不妨点个赞,码字不易,谢谢大家。

你可能感兴趣的:(软件测试,Python,程序员,前端,自动化,运维)