🦝

外形監視とE2E テストができるCheckly とは？

2024/03/04に公開

AWS

今回は、外形監視と E2E テストができる Checkly というサービスについて簡単に紹介します。

Checkly とは

Checklyは外形監視と E2E テストが行える SaaS です。E2E テストにはPlaywrightを使用します。

https://www.checklyhq.com/

Sentry や Vercel、1Password などの有名企業が利用しており、信頼性の高さが伺えます。

Datadog との比較

Datadog との比較はこちらのサイトをご覧ください。料金的なメリットや、Playwright が使用できる等の違いがあります。

外形監視とは

外形監視（合成監視とも呼ばれる）は、ウェブサイトやアプリケーションの性能を定期的にテストし、ユーザーの視点からサービスの可用性や応答時間を監視することです。
これにより、ユーザーがサービスを使用する際に直面する可能性のある問題を事前に検出し、修正できます。

E2E テストとは

E2E テストは、アプリケーションやシステムの全体的なフローを通じて、実際のユーザーシナリオをシミュレートしてテストすることです。
これにより、アプリケーションの品質を向上させ、ユーザーが期待どおりの機能を使用できることを保証できます。

外形監視と E2E テストの違い

外形監視と E2E テストは似てますが、外形監視は実稼働環境でアプリを継続的にテストすることを目的としており、E2E テストはデプロイ前にバグを検出することを目的としています。

外形監視を試してみる

※ アカウント登録については割愛します。

早速 Checkly にログインし、新しいチェックを作成します。
サイドバーから+ボタンをクリックします。

Bolower check・API check・Multistep check の 3 種類のチェックが作成できるようです。
まずは API check を作成してみます。

CHECK NAME は適当に「Test Check」とします。

テストとして Zenn のトップページ（https://zenn.dev）を指定します。

チェックの前にスクリプトが実行できるようです。また、レスポンス時間の制限も設定できるようです。
今回はデフォルトのままとします。

どのようなデータが返却されれば成功とするかを設定します。今回は以下の項目をチェックします。

Status code: 200 かどうかをチェック
Response time: 100ms 未満かどうかをチェック
Header: Content-Typeが ttext/html; charset=utf-8かどうかをチェック
Text body: lang="ja"が HTML 内に含まれているかどうかを正規表現でチェック

スケージュール戦略を設定します。今回はデフォルトの Prallel runs を選択し、

リージョンは東京と大阪を選択します。

チェックの間隔を設定します。今回はデフォルト設定の 5 分間隔とします。

失敗した際のリトライの設定です。デフォルト設定の 1 分後と 2 分後にリトライするように設定します。

最後にアラートの通知先の設定です。事前に Email や Slack などの通知先を設定しておくか、このチェックのみの通知先を設定できます。

ここまで設定できたら「Run & Save」をクリックします。
結果が表示されて、チェックが成功している事が分かります。

これで 5 分ごとに Zenn のトップページの外形監視が行われるようになりました。

E2E テストを試してみる

次は E2E テストを作成してみます。
再度サイドバーから+ボタンをクリックします。

Bolower check を選択します。

Check CLI が使用できたり、Playwright Test Generator が使用できるようですが、今回は「Start from scratch」から作成します。

CHECK NAME は適当に「Test Check #2」とします。

「Setting」からテストの設定が行えるようです。

テストのスケジュール設定やロケーションの設定はこちらから行えます。今回はデフォルトのままとします。

デフォルトで Playwright を使用した JavaScript のコードが用意されているので、これをそのまま実行してみましょう。
「Run Script」をクリックします。

デフォルトのコード

Checkly の環境変数ENVIRONMENT_URLに設定した URL、もしくは Checkly の公式サイトにアクセスしてスクリーンショットを撮影し、レスポンスが 400 未満であることを確認するテストです。

/**
 * To learn more about Playwright Test visit:
 * https://www.checklyhq.com/docs/browser-checks/playwright-test/
 * https://playwright.dev/docs/writing-tests
 */

const { expect, test } = require("@playwright/test");

// Set the action timeout to 10 seconds to quickly identify failing actions.
// By default Playwright Test has no timeout for actions (e.g. clicking an element).
// Learn more here: https://www.checklyhq.com/docs/browser-checks/timeouts/
test.use({ actionTimeout: 10000 });

test("visit page and take screenshot", async ({ page }) => {
  // Change checklyhq.com to your site's URL,
  // or, even better, define a ENVIRONMENT_URL environment variable
  // to reuse it across your browser checks
  const response = await page.goto(
    process.env.ENVIRONMENT_URL || "https://checklyhq.com"
  );

  // Take a screenshot
  await page.screenshot({ path: "screenshot.jpg" });

  // Test that the response did not fail
  expect(
    response.status(),
    "should respond with correct status code"
  ).toBeLessThan(400);
});