メインコンテンツへスキップ

CI環境内でテストを実行中

Molly Exten
  • 更新

mabl CLIを使用すると、CI環境内でヘッドレスモードでmablテストを実行できます。この実行環境はmabl CI Runnerとして知られています。テストはCI環境内で順次実行され、成功/失敗のフィードバックが返されます。

CI Runnerを開発ワークフローに統合することは、迅速な検証を行い、開発の初期段階で課題を発見するための優れた方法です。テストは順次実行されるため、CI Runnerは大規模で包括的なスイートを実行するのではなく、特定のテストセットを検証するのに最適です。この記事では、mabl CI Runnerを使用してCI環境でテストを実行する方法を説明します。

開始する前に

CI Runnerを設定する前に、CI環境が以下にアクセスできることを確認してください。

  • アクティブにサポートされているNode.js LTSバージョン
  • クロミウムブラウザ

mabl CLIのインストール

mabl CLIをCI環境にインストールする方法は2つあります。

  • グローバルインストール
  • ローカルインストール（推奨）

グローバルインストール

npm install -g @mablhq/mabl-cli を実行して、CI環境にmabl CLIをグローバルにインストールします。

インストール後、次のテンプレートを使用して、ターミナルから直接mabl CLIコマンドを実行できます。

mabl [command] [subcommand]
# Examples
mabl auth activate-key [api-key]
mabl tests run --id [test-id]

ローカルインストール（推奨）

npm install --save-dev @mablhq/mabl-cli を実行して、プロジェクトのpackage.jsonにmabl CLIを開発依存関係としてインストールします。

インストール後、次のテンプレートを使用してターミナルからmabl CLIコマンドを実行できます。

npx @mablhq/mabl-cli [command] [subcommand]
# Examples
npx @mablhq/mabl-cli auth activate-key [api-key]
npx @mablhq/mabl-cli tests run --id [test-id]

以下の理由から、mabl CLIを開発依存関係としてインストールすることをお勧めします：

  • プロジェクトに携わるすべての人が同じmabl CLIバージョンを使用していることを確認します。
  • グローバルな mabl CLI インストールとの競合を防ぎます

mabl CLIの認証

CI環境でmabl CLIコマンドを実行するには、mabl APIキーで認証する必要があります:

  1. mablアプリのAPIページに移動します: ワークスペース > API
  2. + APIキーを作成をクリックします。API キーの作成はワークスペース所有者に限定されています。
  3. APIキーのタイプとして「Command Line Interface」を選択します。
  4. APIキーの名前を指定します。
  5. 設定を保存します。

CI環境で、次のコマンドを実行してmabl CLIを認証します。[mabl_api_key]を作成したAPIキーに置き換えてください。

mabl auth activate-key [mabl_api_key]

mabl CLIを開発依存関係としてインストールした場合、コマンドでmablの代わりにnpx @mablhq/mabl-cliを使用してください。

npx @mablhq/mabl-cli auth activate-key [mabl_api_key]

アプリを起動してください

CI環境内でテストを実行する前に、Webアプリケーションがアクセス可能であることを確認してください。例えば、npm startを使用してアプリを起動する場合、wait-onやwait-for-localhost-cliなどのツールを使用して待機を行うことができます。

npm start & wait-on http://localhost:3000

CI環境内でアプリケーションのベースURLに注意してください。これは、CI実行中にmablテストが使用するURLです。このURLは、ローカルでアプリケーションにアクセスする際に使用するものとは異なる場合があります。

mabl テストを実行する

mabl CLIがインストールされ、ウェブアプリがCI環境内で実行中の場合、CIランナーでmablテストをトリガーできます。次のいずれかの方法を使用してください。

  • コマンドラインからテストを実行する
  • コードからテストを実行する

コマンドラインからテストを実行する

mabl tests run コマンドを使用して、コマンドラインからテストをトリガーします。mabl CLI をプロジェクトの開発依存関係としてインストールした場合は、コマンドで mabl の代わりに npx @mablhq/mabl-cli を使用することを忘れないでください。

# Run a specific test
mabl tests run --id [test-id] --url [app-url-in-ci] -e [env-id] --headless

# Run a group of tests that match the label "wip"
mabl tests run --labels wip --url [app-url-in-ci] -e [env-id] --headless

# Run a group of tests associated with a specific plan
mabl tests run --from-plan-id [plan-id] --url [app-url-in-ci] -a [app-id] -e [env-id] --headless

すべてのサンプルコマンドはIDのプレースホルダーを使用しています。特定のIDを見つけるのに助けが必要な場合は、mabl リソースIDに関するドキュメントをご覧ください。

CI環境で--from-plan-idを使用してmablテストを実行することは、クラウドでのプラン実行とは異なることにご注意ください：

  • 高度なプラン設定、例えばステージ、ブラウザ設定、共有変数などは適用されません。
  • テストは、mablアプリのプラン詳細ページに表示される順序で順次実行されます。
  • すべてのテストは、プランのアプリケーションと環境に関連付けられたURLである同じベースURLを使用します。プランが複数のURLで構成されている場合、mabl CLIはそれらのURLの1つを使用します。
  • --url オプションを含めると、グループ内のすべてのテストがこのURLを使用します。

コードからテストを実行する

プロジェクトにmabl CLIを開発依存関係としてインストールした場合、コードからmablテストをトリガーすることもできます。このオプションには、JestなどのJavaScriptテストフレームワークが必要です。

最初のステップは、mablテストを調整するスクリプトを作成することです。例えば、TypeScript環境でJestを使用する場合は、mabl CLI依存関係をインポートし、テストランナーを設定し、mablテスト実行をトリガーする.tsファイルを作成します：

// Import the necessary functions from the @mablhq/mabl-cli dependency
import {createBrowserTestsRunner, TestRunConfig} from '@mablhq/mabl-cli';

jest.setTimeout(180000);

// Update placeholders for workspaceId, url, and labelsInclude
const runConfig: TestRunConfig = {
    workspaceId: 'workspace_id',
    url: 'app-url-in-ci',
    labelsInclude: ['test-label'],
    headless: true, 
    filterHttpRequests: false, 
};

// Trigger the mabl test execution
describe('Super important mabl tests', () => {
 it('This needs to always work', async () => {
   const mablTestRunner = await createBrowserTestsRunner({
     ...runConfig,
   });
   const result = await mablTestRunner.run();
   expect(result.success).toEqual(true);
 });
});

スクリプトを作成した後、package.jsonファイルの"scripts"セクションに追加してください。

スクリプトの目的を示す説明的な名前を使用してください。例えば、mabl-testのように。このスクリプトの値を、mabl テストを実行するコマンドに設定します。例えば、Jestを使用している場合、コマンドは"jest mablTests.test.ts"となるでしょう。

“scripts”:
{
   ...
   "mabl-test": "jest mablTests.test.ts",
   ...
}

最後に、npm run または yarn run を使用して、CI環境内でmablテストをトリガーします。例えば、スクリプトの名前が mabl-test の場合、npm run mabl-test または yarn run mabl-test を実行します。

npm run [name-of-your-script]
# OR
yarn run [name-of-your-script]

このセットアップを実装して、ローカル開発環境でmablテストを検証することもできます。

関連記事