Web オートメーションアーティファクト TestCafe - 高度なページ操作

♥ はじめに

この記事 [Web オートメーションアーティファクト TestCafe - ページの基本操作] では、TestCafe ページインタラクションの基本的な使用法をいくつか紹介しました。

Web オートメーションアーティファクト TestCafe — 基本的なページ操作

この記事では、前の記事に続いて、TestCafe ページインタラクションの高度な操作をいくつか紹介します。

1. マウスドラッグ

マウスドラッグマウスドラッグ

1. 要素のオフセットをドラッグアンドドロップします。

メソッド: t.ドラッグ

可以将元素相对于原来位置进行偏移拖拽。

ケース

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. 要素を別の要素の位置にドラッグアンドドロップします

メソッド: ドラッグToElement

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

ケース

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

自動テストを学びたい場合は、ここで一連のビデオをお勧めします。このビデオは、ステーション B のネットワーク全体でナンバー 1 の自動テストチュートリアルであると言えます。同時に、オンラインのユーザーの数は、 Dashen 技術情報交換: 798478386 [更新] ステーション B の最も詳細な Python インターフェイス自動テストの実践的なチュートリアル (実際の戦闘の最新バージョン)_哔哩哔哩_bilibili [更新済み] ステーション B からの最も詳細な Python インターフェイス自動化テスト実戦チュートリアルの完全なコレクション (実戦の最新バージョン) には、以下を含む合計 200 のビデオがあります: 1. なぜインターフェイス自動化を行う必要があるのですか?、お支払いください。UPアカウントにご注意ください。https://www.bilibili.com/video/BV17p4y1B77x/?spm_id_from=333.337.search-card.all.click

2. ファイルのアップロード

1. ファイルをアップロードする

メソッド: t.setFilesToUpload:
パラメータ:

パラメータ	説明する
セレクタ	ターゲット要素 (ターゲット要素は、type="file" 属性を持つ input タグである必要があります。)
ファイルパス	アップロードされたファイルのパス (複数のファイルのアップロードがサポートされており、パラメータは配列の形式で渡されます)

ケース

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")

});

3. 画面キャプチャ操作

スクリーンショットに関して、testcafe ではページ全体のスクリーンショットを撮る方法と、特定の要素のスクリーンショットを撮る方法の 2 つの方法が提供されています。

1. ページのスクリーンショットを撮る

方法：t.takeScreenshot

ページ全体のスクリーンショットを撮ると、キャプチャされた写真がスクリーンショットディレクトリに自動的に保存されます。

パラメータの説明:

範囲	説明する	デフォルト
パス	スクリーンショットファイルの相対パスと名前 (オプション)。
全ページ	オーバーフローにより表示されないコンテンツを含め、ページ全体をキャプチャするように指定します (オプション)。	間違い

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

ページ上で指定された特定の要素のスクリーンショットを撮る

パラメータの説明

範囲	説明する
セレクタ	Web 要素のスクリーンショット
パス	スクリーンショットファイルの相対パスと名前 (オプション)。
オプション	スクリーンショットの撮影方法を定義するオプション (オプション)。詳細は公式ドキュメントを参照してください

(公式ドキュメント: https://testcafe.io/documentation/402676/reference/test-api/testcontroller/takeelementscreenshot?utm_source=testingpai.com)

次の例は、t.takeElementScreenshot アクションの使用方法を示しています。

import { Selector } from 'testcafe';

fixture `页面截图`
    .page `https://www.baidu.com`;

// 百度首页搜索按钮截图
test('screenshot ', async t => {
    await t
        .takeElementScreenshot('#su', 'su_ele.png');

});

4. ウィンドウのスクロール

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

5. iframeの切り替え

TestCafe test のテスト操作は 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)
});

6. ページアクセス

前のセクションの研究では、フィクスチャでページを開き、ページメソッドを呼び出しました。次に、テストケース内の別の指定されたページにジャンプしたい場合は、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
パラメータ

パラメータ名	説明する
ウィンドウ記述子	開いているブラウザウィンドウから取得される記述子オブジェクト。

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. 前のアクティブなウィンドウに切り替えます

前のアクティブなウィンドウに切り替えます。このメソッドを使用すると、メソッド呼び出しは最も近い 2 つのウィンドウを循環します。

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

Web オートメーション アーティファクト TestCafe - 高度なページ操作

♥ はじめに

ケース

例

おすすめ

Web オートメーションアーティファクト TestCafe - 高度なページ操作