序文

たまたま友達がテストカフェを学びたいと思っていたのですが、私は英語を学びたいと思っていました。ハハ、お互いにぶつかりましょう。私は彼にテストカフェを教え、彼は私に英語を教えてくれました。たまたま私の勉強の過程を記録していて、彼に教えるのは便利でした

1.はじめに

1.純粋なnode.js-TestCafeはSeleniumを使用せず、プラグインなしで実際のブラウザーでテストを実行できます。node.jsの上に構築されているため、最新の開発ツールと統合して適切に機能します
2.他のセットアップや構成は必要ありません-TestCafeはnpmインストールの直後にテストを実行するように設定されています
3.完全なテストツール-で開始1つのコマンドであるTestCafeは、ブラウザーの起動、テストの実行、結果の収集、レポートの生成を行うことができます。4。Node
、JS \ TypeScript、および基本的なフロントエンドを知っている限り、フロントエンド開発エンジニアにとって非常に使いやすいです。 UI自動テストのセットを構築できます

公式ウェブサイト：http：//devexpress.github.io/testcafe/

2.はじめに

TestCafeをインストールします

testcafeのインストールには、グローバルインストールとローカルインストールの2種類があります。testcafeをインストール
する前に、nodeとnpmがインストールされていることを確認する必要があります（具体的なインストールについては、Baiduをクリックしてください）。

グローバルインストール

npm install -g testcafe

ローカルインストール

npm install testcafe --save-dev

まずtestcafeをお試しください

単純な実行コード

テストを作成するには、新しい.jsまたは.tsファイルを作成します。

//test1.js
import {
    
     Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    
    
    // Test code
});

テストを実行する
TestCafeは、選択したブラウザーを自動的に開き、そのブラウザーでテストの実行を開始します。
testcafeはグローバルにインストールされるパッケージであり、chromeは実行するGoogleChromeを指定しますtest1.jsは実行したいファイルです

testcafe chrome test1.js

ページでアクションを実行する

各テストは、ページのコンテンツと相互作用できる必要があります。TestCafeは、ユーザー操作を実行するために、クリック、ホバー、typeText、setFilesToUploadなどの多数のアクションを提供します。これらは1つのチェーンと呼ぶことができます。

次のフィクスチャには、開発者の名前をテキストエディタに入力し、[送信]ボタンをクリックする簡単なテストが含まれています。

import {
    
     Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    
    
    await t
        .typeText('#developer-name', 'shufeng zeng')
        .click('#submit-button');
});

ページのステータスを確認する

TestCafeを使用すると、ページのステータスを監視できます。この目的のために、クライアントでコードを実行する特別なタイプの関数を提供します。DOM要素に直接アクセスするためのセレクターと、クライアントから任意のデータをフェッチするためのClientFunctionです。これらの関数を通常の非同期関数と呼びます。つまり、結果を取得し、パラメーターを使用してデータを渡すことができます。

次のように：サンプルWebページの[送信]ボタンをクリックして、[ありがとうございます]ページを開きます。開いたページのDOM要素にアクセスするために、セレクターはこの機能を使用できます。次の例は、記事のヘッダー要素にアクセスして実際のテキストを取得する方法を示しています。

import {
    
     Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    
    
    await t
        .typeText('#developer-name', 'shufeng Zeng')
        .click('#submit-button');

    const articleHeader = await Selector('.result-content').find('h1');

    // Obtain the text of the article header
    let headerText = await articleHeader.innerText;
});

断言

機能テストでは、実行された操作の結果も確認する必要があります。たとえば、「ありがとう」ページの記事のタイトルでは、入力した名前を使用してユーザーに対応する必要があります。タイトルが正しいかどうかを確認するには、テストにアサーションを追加する必要があります。

次のテストは、組み込みアサーションの使用方法を示しています。

import {
    
     Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    
    
    await t
        .typeText('#developer-name', 'shufeng zeng')
        .click('#submit-button')

        // Use the assertion to check if the actual header text is equal to the expected one
        .expect(Selector('#article-header').innerText).eql('Thank you, shufeng zeng!');
});

3、フィクスチャ

TestCafeテストにはフィクスチャカテゴリが必要であり、js / tsファイルには複数のフィクスチャを含めることができます。

テストフィクスチャを宣言するには、フィクスチャ関数を使用します。

fixture( fixtureName )
fixture `fixtureName`

実行すると、出力ページが出力されfixtureName、登録ページのテスト
フィクスチャにはいくつかのメソッドがあります

パラメータ	の種類	説明
*ページ	ストリング	テスト済みのページ
beforeEach	オブジェクト	各テストは実行前に実行されます
前	オブジェクト	beforeEachよりも早く実行し、各フィクスチャは1回だけ実行します
後	オブジェクト	afterEachよりも遅く実行し、各フィクスチャは1回だけ実行します
afterEach	オブジェクト	各テストは実行後に実行されます

ページ

テストページに記入する

fixture`注册页面测试`
    .page`http://devexpress.github.io/testcafe/example/`;

beforeEach

各テストは実行前に実行されます

構文ブロック

fixture.beforeEach( fn(t) )

パラメータ	の種類	説明
fn	関数	フックコードを含む非同期フック関数。
t	オブジェクト	テスト実行APIにアクセスするためのテストコントローラー

前

beforeEachよりも早く実行し、各フィクスチャは1回だけ実行します

fixture.before( fn(ctx) )

パラメータ	の種類	説明
fn	関数	フックコードを含む非同期フック関数。
ctx	オブジェクト	フィクスチャコンテキストオブジェクトは、フィクスチャコードとテストコードの間で変数を共有するために使用されます。

テストのライフサイクルとは異なり、フィクスチャのライフサイクルはテスト間で実行され、テストページにアクセスできません。これらを使用して、テスト済みアプリケーションをホストするサーバーの準備など、サーバー側の操作を実行します。

後

afterEachよりも遅く実行し、各フィクスチャは1回だけ実行します

fixture.after( fn(ctx) )

パラメータ	の種類	説明
fn	関数	フックコードを含む非同期フック関数。
ctx	オブジェクト	フィクスチャコンテキストオブジェクトは、フィクスチャコードとテストコードの間で変数を共有するために使用されます。

afterEach

各テストは実行後に実行されます

fixture.afterEach( fn(t) )

パラメータ	の種類	説明
fn	関数	フックコードを含む非同期フック関数。
t	オブジェクト	テスト実行APIにアクセスするためのテストコントローラー

fixture的demo

fixture(`beforeeach test1`)
    .page(`https://www.baidu.com`)
    .beforeEach(async I => {
    
    
        console.log('this is beforeEach')
    })
    .before(async I => {
    
    
        console.log('this is before')
    })
    .after(async I => {
    
    
        console.log('this is after')
    })
    .afterEach(async I=>{
    
    
        console.log("this is afterEach")
    });

test("test beforeAndafter",I=>{
    
    
    console.log("1111")
});

test("test beforeAndafter",I=>{
    
    
    console.log("2222")
});

効果は次のとおりです。
ここに画像の説明を挿入します
印刷することで、フィクスチャの実行順序を知ることができます。

4、テスト

test( testName,fun(t))

fixture`注册页面测试`
    .page`http://devexpress.github.io/testcafe/example/`;
    
test('帐号不满11位数的校验', async t => {
    
    
    await t
        .typeText('#phone', '1387656003')
});

検証に合格すると、√アカウントの検証が出力ステーションに出力されます。それ以外の場合は、✖アカウントの検証になります。

パラメータ	の種類	説明
前	オブジェクト	テストを実行する前に実行する
後	オブジェクト	テストの実行後に実行する

前

コンソール出力から、テストbeforeはフィクスチャを上書きしますbeforeEach。つまり、テストにbeforeそれが含まれている場合、フィクスチャ内のフィクスチャはbeforeEachテストに対して無効です。

後

コンソール出力から、テストafterはフィクスチャを上書きしますafterEach。つまり、テストにafterそれが含まれている場合、フィクスチャ内のフィクスチャはafterEachテストに対して無効です。

テストデモ

fixture(`beforeeach test1`)
    .page(`https://www.baidu.com`)
    .beforeEach(async I => {
    
    
        console.log('this is beforeEach')
    })
    .before(async I => {
    
    
        console.log('this is before')
    })
    .after(async I => {
    
    
        console.log('this is after')
    })
    .afterEach(async I => {
    
    
        console.log("this is afterEach")
    });

test
    .before(async t => {
    
    
        console.log(`this is test's before`)
    })
    ("test beforeAndafter", I => {
    
    
        console.log("1111")
    })
    .after(async t => {
    
    
        console.log(`this is test's after`)
    });

test("test beforeAndafter", I => {
    
    
    console.log("2222")
});

出力効果は次のとおりです。
ここに画像の説明を挿入します

testcafe：testcafeを理解し、初めて使用してみて、始めましょう（1）

テストカフェ

序文