ブラウザー・スクリプト・テスト

オンラインで編集する

ブラウザー・テストでは、ブラウザーで Node.js ベースのテスト・スクリプトを再生してユーザーの Web サイトのパフォーマンスをモニターおよび測定することにより、ユーザーが Web アプリケーションを通過する可能性があるパスをシミュレートします。

Instana Synthetic PoP Helm chart 1.0.15 以降では、ブラウザテストがサポートされています。これらのテストを実行するには、新しいプレイバック・エンジンを使用します。ブラウザ再生エンジンを有効にするには、Syntheticの PoP のバージョンを 1.0.15 以降にアップグレードする必要があります。 Instana ブラウザテストでは、「Browser Simple」テストと「Browser Script」テストに対応しています。

Instana 合成ブラウザテストは、 Selenium ベースのAPIに対応しており、30種類以上のブラウザテストAPI によって機能を拡張しています。

さらに、 Instana Synthetic では、ブラウザテストをより容易かつ保守しやすく、安全なものにするためのグローバル変数と API のセットが導入されています。

この機能を使用することで、スクリプト開発者は、ブラウザーやドライバーをインストールしたり、ブラウザーを開いたり閉じたり、リソースを解放したりする代わりに、主にテスト・ロジックに集中することができます。

前提条件

オンラインで編集する

Instana Synthetic PoP Helm chart 1.0.15 以降では、ブラウザテストがサポートされています。

これらのテストを実行するには、新しいプレイバック・エンジンを使用します。ブラウザー再生エンジンを有効にするには、Synthetic PoP バージョンを 1.0.15 以降にアップグレードする必要があります。

シンセティック PoP Helm チャートのバージョンを確認するには、以下のコマンドを実行します。

helm list -n <namespace>

ブラウザー・テスト用の新しい再生エンジンが有効になっているかどうかを確認するには、以下のコマンドを実行します。

kubectl get pod -n <namespace> | grep browserscript
synthetic-pop-browserscript-playback-engine-8589bb6cbf-dh7sb   1/1     Running   0          13m

対応ランタイムと機能

オンラインで編集する

Instana 合成ブラウザテストでは、Chromium、 Mozilla、 Firefox、および Node.js ランタイムに対応しています。
- Mozilla Firefox 115.4.0esr
- Chromiumの2つのバージョンがサポートされています：
  - 113.0.5672.0 がの isNewEngine とき false。
  - 138.0.7204.183 がの isNewEngine とき true。
- Node.js v22 CommonJS モジュールシステムを使用して。 ESMはサポートされていません。
- selenium-webdriver 4.29.0
Instana 合成ブラウザテストでは、 Selenium ベースのAPIおよび30種類以上のブラウザテストAPIに対応しています。
Instana 合成ブラウザテストでは、応答時間や応答サイズなどのメトリクスの分析と収集が可能です。
Instana 合成ブラウザテストでは、テスト結果として、録画、スクリーンショット、ブラウザログ、コンソールログ、および HTTP アーカイブ形式（HAR）に対応しています。

ブラウザスクリプトのテストの種類

オンラインで編集する

Instana Synthetic を使用すると、次のようなブラウザスクリプトテストを作成できます：

ブラウザスクリプト

オンラインで編集する

ブラウザー・スクリプトは Node.js ベースであり、単一のスクリプトとバンドルされたスクリプトの両方が含まれています。

ブラウザ用スクリプト：単一ブラウザ向けテストスクリプト

オンラインで編集する

すべてを単一のスクリプトで記述できます。通常、この方法では、ほとんどのユーザーのニーズを満たすことができます。以下の例を参照してください。

(async function () {
  console.log("Access IBM website");
  await $browser.get("https://www.ibm.com/us-en");

  console.log("Accept all cookies");
  const cookies = await $browser.waitForAndFindElement(
    $driver.By.id(`truste-consent-button`),
    30000
  );
  await cookies.click();
})();

ブラウザ用スクリプト：ブラウザテスト用スクリプトのセット

オンラインで編集する

ビジネス・ロジックが複雑である場合は、単一のスクリプトにすべてを含めることはできません。 GitHubで保守、コード再利用、およびバージョン管理を向上させるには、複数のスクリプト・ファイルを使用します。

バンドルされたスクリプトを圧縮ファイルで使用できます。

共有ライブラリーを使用して複数のスクリプトを作成します。以下の例を参照してください。

// bundled/mytest.js
const assert = require("assert").strict;
let { testIBM } = require("./lib/myscript.js");
console.log("Start to test");
testIBM();

// bundled/lib/myscript.js
async function testIBM() {
  console.log("Access IBM website");
  await $browser.get("https://www.ibm.com/us-en");

  console.log("Accept all cookies");
  const cookies = await $browser.waitForAndFindElement($driver.By.id(`truste-consent-button`), 30000);
  await cookies.click();
};
module.exports = {
  testIBM
};

複数のスクリプトを .zip ファイルにパッケージ化します。以下の例を参照してください。

トップ・フォルダー bundled およびメイン・ファイル bundled/mytest.jsを使用して、スクリプトを .zip ファイルに圧縮します。
```
zip -r bundledtest.zip bundled
 
```
または、メインファイル mytest.jsを使用して、すべてのスクリプトを .zip ファイルにパッケージ化します。
```
zip -r bundledtest.zip *
 
```

Selenium IDEスクリプト

オンラインで編集する

Selenium IDEスクリプトとは、 Selenium IDEで記録されたスクリプトのことです。

ブラウザスクリプトの例

オンラインで編集する

Instana Syntheticには多くの例が用意されており、これらを活用すれば、すぐに使い始めたり、独自のブラウザテストを素早く作成したりすることができます。

開始するには、以下の例を参照してください。

ブラウザスクリプトのテストとデバッグ

オンラインで編集する

Instana Syntheticは、ユーザーがブラウザテストスクリプトをローカル環境で開発、テスト、またはデバッグできるよう支援するコマンドラインアプリケーション「 synthetic-browser-scriptNode.js 」を提供しています。

「 synthetic-browser-script 」アプリケーションが、 GitHub および n pmjsサイトで公開されました。

これは、 Instana Synthetic向けのローカルランナーであり、Syntheticでのブラウザテストを支援するものです。
多くのサンプルが付属しており、独自のブラウザテストを素早く作成するのに役立ちます。さらに例が追加されます。

synthetic-browser-script ローカル・ランナーは、以下の場合に使用できます。

CLI を使用してブラウザー・スクリプトをテストおよびデバッグするには、ローカル・ランナーが必要です。
Instana のすべてのSyntheticブラウザテストAPIを提供する npm パッケージが必要です。
すべてのブラウザー・テスト API について、VS Code の「コード補完」または「コード・ヒント」が必要です。
テスト・アクションを完了し、スクリプトの品質を証明するには、ブラウザー全体を開く必要があります。
根本原因のデバッグに役立つように、テストの失敗をローカルで再現する必要があります。
ブラウザー・テスト API の例から学習し、これらの例に基づいて独自のブラウザー・テストを作成する必要があります。