Web自動化神器TestCafe(四)—頁面互動篇（上）

前言

​ 前段時間給大家介紹了TestCafe的基本使用和元素定位。今天主要給大家介紹一下testcafe這個架構和頁面元素互動的方法。

一、互動要求

使用TestCafe與元素進行互動操作，元素需滿足以下條件：

• 元素在

  body

  頁面視窗或iframe視窗的元素内。元素對于使用者可能是不可見的。如果某個元素在視口之外，則TestCafe通過滾動可以滾動到元素可見。
• 元素是可見的，具有以下屬性：

  屬性	說明
  display	沒有設定為 none
  visibility	設定為 visible （預設值）
  width	> = 1像素
  height

• 元素不重疊。

  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、右擊

• 在指定元素位置，滑鼠右擊

• 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', '檸檬杯')
})
           

四、鍵盤按鍵

在測試的操作中，如果涉及到鍵盤按鍵的操作，那麼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	選擇的開始位置，從零開始的整數；非必填，預設為
  endPos		選擇的結束位置；非必填,可見文本内容的長度。

• 案例：

import { Selector } from 'testcafe';

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

test('Type Text test', async t => {
	// 輸入 檸檬班
    await t.typeText('#kw', '檸檬杯')
    	// 選中輸入的文本
    	.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', '檸檬班')
    	// 強制等待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
          })
  });