Selenium IDE スクリプトを使用したブラウザー・テスト

オンラインで編集する

Selenium IDEスクリプトテストは、 Instana の合成ブラウザスクリプトテストの一種です。

Selenium IDE スクリプト (サイド・スクリプトとも呼ばれる) を使用して、Web アプリケーションとのユーザー対話をシミュレートします。

「 Selenium 」IDEスクリプトの記録」のセクションに記載されているような、シンプルな Selenium IDEスクリプトから始めるか、サンプルスクリプト「 Selenium 」を使用することをお勧めします。

そうすれば、「 Selenium IDEスクリプトでのテスト機能の拡張」で説明されているように、ユーザー認証情報の取得やスクリーンショットの撮影など、 Instana Syntheticが提供する高度な機能を利用できるようになります。 Instana が提供するグローバル変数（例：） $secure や、拡張ブラウザテストAPI （ await $browser.takeScreenshot()例：）を使用したい場合は、 Instana の「 Synthetic-browser-script 」ローカルランナーを利用できます。このローカルランナーを使用すれば、 Selenium IDEスクリプトをローカル環境でテストおよびデバッグすることができます。なぜなら、 Selenium IDEでは、これらの高度なAPIを認識できず、テストの実行ごとにクッキーやセッションを自動的にクリアすることもできないからです。

Selenium のIDEスクリプトの記録

オンラインで編集する

基本的なスクリプトを記録する

オンラインで編集する

Selenium IDEをダウンロードしてインストールしてください。

Firefox およびChromeをご利用の方は、 Selenium IDEをダウンロードしてインストールできます。
- Firefox をご利用の方は、ブラウザに「 Firefox 」アドオンを追加してください。必要に応じて、ブラウザを再起動してください。
- Chromeをご利用の方は、以下のいずれかの方法を行ってください：
  
  注：Selenium IDEのChrome拡張機能は、Chrome ウェブストアでは利用できなくなりました。
  - コマンドラインまたはコマンドプロンプトを使用して、 Selenium IDE をインストールします。
```
npm install -g selenium-ide
selenium-ide
 
```
    インストール手順の詳細については、 readmeファイルをご覧ください。
  - お使いのオペレーティングシステムに合わせて、 Selenium IDE （ GitHub ）のリリース版をダウンロードし、アプリケーションをローカルで実行してください。
    
    注：Selenium IDEアプリケーションは、プロジェクトを 3.0 形式で保存しますが、Synthetic PoP BrowserScript の再生エンジンでは、この形式はまだサポートされていません。
    
    互換性を確保するには、ファイル .side 内のバージョン番号を「 3.0 」から「 2.0 」に手動で変更する必要があります。
    
    Selenium IDEアプリケーションでプロジェクトを保存した後、ファイル .side を手動で編集するには、以下の手順を実行してください：
    1. .sideファイルをテキスト・エディターで開きます。
    2. ファイル内の「バージョン」フィールドを探してください。次の例は、バージョンフィールドの外観を示しています：
```
    {
        "id": "some-id",
        "version": "3.0",
          ...
    }
 
```
    3. バージョンを 2.0 に変更してください。
    4. ファイルを保存します。
メニュー・バーから Selenium IDE を開きます。 Record a new test in a new project リンクをクリックし、指示に従ってスクリプトを記録します。

Selenium IDE が記録しているときには、スクリプト内のユーザー・アクションごとに 1 つのコマンドが生成されます。
Googleでinstanaキーワードを検索するテストアクションを実行します。

Enterを押すと、検索結果ページに移動します。このページにwait条件を追加します。検索アイコンを右クリックし、Selenium IDE -> Wait For -> Presentを選択します。 Valueプロパティに、要素が表示されるまで待つタイムアウトの値を入力します。
アサーションを追加して、テストを検証します。 assertコマンドを追加します。ページ上で右クリックし、Selenium IDE -> Assert -> Titleを選択します。

録音が終わったら、Selenium IDEの録音停止ボタンをクリックします。
send keysの値を${KEY_ENTER}とすると、検索テキストエリアにEnterと入力するようなコマンドを追加できます。

wait for element presentコマンドのValueプロパティに、10000のようなタイムアウト値を与えて、条件を待ちます。前のステップで使ったのと同じTargetを使って、検索テキストエリアのウェブ要素を探します。これは、テストを安定して成功させるための重要なステップです。これはブラウザのテスト分野では明示的な待ち時間と呼ばれています。ロジックは、コード内の次のコマンドに進む前に、特定の条件についてアプリケーションをポーリングする。指定されたタイムアウト値までに条件が満たされない場合、タイムアウトエラーが表示される。

スクリプトをテストするには、実行をクリックします。
記録後、スクリプトを .side ファイルに保存します。

詳細については、「 Selenium IDE 入門」をご覧ください。完全な例は次のセクションにある。

記録したスクリプトをローカル環境でテストおよびデバッグするには、 Instana の「 Synthetic-browser-script 」ローカルランナーの利用をご検討ください。「Synthetic-browser-script」ローカルランナーは、「 Instana Synthetics」と同じ実行環境を提供し、テスト実行ごとにCookieやユーザープロファイルを消去するのに役立ちます。

その後、 Instana で「 Selenium 」IDEテストを作成し、[ ] を選択して Create Synthetic Test -> Browser Script Test -> Switch to Advanced Mode、[ ] をクリックし Add Script、[ ] .side ファイルをアップロードします。

Instana のテスト結果にタイムライングラフが表示されない場合。テストIDがsuites -> testsプロパティにあるかどうかをチェックできます。このテストIDがないと、テストは再生されません。
```
"suites": [{
    "id": "7de135e9-a6c4-4b39-b28a-092bb0d7cbac",
    "name": "Search Instana",
    "persistSession": false,
    "parallel": false,
    "timeout": 300,
    "tests": ["c0283e5a-8cbd-492f-8b3d-f2476f319264"]
}],
 
```
Instana テストスイートではシリアル化されたテストのみをサポートしているため、 Selenium のIDEスクリプト内の以下のプロパティは、 Instana のブラウザ再生エンジンによって上書きされます：
- "persistSession": false
- "parallel": false

条件を満たすまで待つ方法

オンラインで編集する

利用可能な明示的待機コマンドを使えば、コードの次のコマンドに進む前に、条件が満たされるのを待つことができる。 明示的な待機は、ブラウザテストのベストプラクティスです。指定されたタイムアウト値までに指定された条件が満たされない場合、タイムアウトエラーが表示される。テストはエラーで失敗します。最もよく使われるwaitコマンドはwait for element presentです。 valueプロパティにミリ秒単位でタイムアウトの値を入力します。
```
{
    "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
    "comment": "",
    "command": "waitForElementPresent",
    "target": "id=searchform",
    "targets": [],
    "value": "10000"
}
 
```

pauseコマンドで数ミリ秒の一時停止ができます。以下の例では、待ち時間は3秒である。

{
    "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb7",
    "comment": "",
    "command": "pause",
    "target": "3000",
    "targets": [],
    "value": ""
}

テスト結果の検証方法

オンラインで編集する

テスト結果を自動的に検証するには、アサーションと Explicit Wait を使います。検証が失敗した場合、テスト結果のステータスは失敗と表示される。 Synthetic Smart Alertでテストの失敗を監視できます。

wait for element presentやassert element present、その他の明示的待ちコマンドを使えば、指定されたタイムアウトの前に必要な要素がUI上に現れるまで待つことができます。 wait forコマンドのvalueプロパティにタイムアウトの値を設定する。 assertコマンドのタイムアウト値は15秒です。
```
{
    "id": "e9a3161a-de29-4557-bbf6-9950c1881425",
    "comment": "",
    "command": "assertElementPresent",
    "target": "linkText=About",
    "targets": [],
    "value": ""
}
 
```

assert titleコマンドを使ってページタイトルを検証することができます。

{
    "id": "46eb59c2-5fd6-4481-b3e8-eaaddab79a69",
    "comment": "",
    "command": "assertTitle",
    "target": "instana - Google Search",
    "targets": [],
    "value": ""
}

assert textコマンドを使って、要素のテキストに指定した値が含まれているかどうかを確認することができます。このコマンドのvalueプロパティは、完全に一致する文字列でなければならない。 Selenium IDEはコマンドのパターン・マッチをサポートしていません。
```
{
    "id": "ed733875-5682-4a3b-9a3e-9286f88a62ca",
    "comment": "",
    "command": "assertText",
    "target": "linkText=About",
    "targets": [],
    "value": "About"
}
 
```

コンソールログにメッセージを出力する方法

オンラインで編集する

echoコマンドを使うと、コンソールログにログメッセージを表示して、問題のトラブルシューティングに役立てることができます。

{
    "id": "03e23d25-38e3-4051-81ff-740109350ee8",
    "comment": "",
    "command": "echo",
    "target": "Generate a TOTP token from a TOTP key",
    "targets": [],
    "value": ""
}

JavaScriptを使って下にスクロールする方法

オンラインで編集する

ほとんどのテストケースでは、ウェブ要素をフォーカスさせたり、表示させたり、クリック可能にするために、ページをスクロールさせる必要があります。 Selenium IDEスクリプトでは、スクロールにJavaScriptを使う必要があります。次の例に示すように、runScriptまたはexecuteScriptコマンドを使ってスクロールを実装します：

ページの高さの半分までスクロールする：

{
    "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
    "comment": "",
    "command": "runScript",
    "target": "window.scrollTo(0, document.body.scrollHeight/2)",
    "targets": [],
    "value": ""
}

ページの最後までスクロールしてください：

{
    "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
    "comment": "",
    "command": "runScript",
    "target": "window.scrollTo(0, document.body.scrollHeight)",
    "targets": [],
    "value": ""
}

ページの最初にスクロールする：

{
    "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
    "comment": "",
    "command": "runScript",
    "target": "window.scrollTo(0, 0)",
    "targets": [],
    "value": ""
}

ウェブエレメントまでスクロールしてクリックする：

要素が表示されるまで待ち、その要素までスクロールしてクリックする。

{
    "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
    "comment": "",
    "command": "waitForElementPresent",
    "target": "id=pnnext",
    "targets": [],
    "value": "20000"
},
{
    "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
    "comment": "",
    "command": "runScript",
    "target": "const el = document.getElementById('pnnext'); el.scrollIntoView(); el.click();",
    "targets": [],
    "value": ""
}

{
    "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
    "comment": "",
    "command": "waitForElementPresent",
    "target": "css=#pnnext > span:nth-child(2)",
    "targets": [],
    "value": "20000"
},
{
    "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
    "comment": "",
    "command": "runScript",
    "target": "const el = document.querySelector('#pnnext > span:nth-child(2)'); el.scrollIntoView(); el.click();",
    "targets": [],
    "value": ""
}

鍵の送信方法

オンラインで編集する

フィルターエリアをダブルクリックしてキーを入力するには、次のようにします：

{
    "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb1",
    "comment": "",
    "command": "doubleClickAt",
    "target": "id=repos-list-filter-input",
    "targets": [],
    "value": ""
}, {
    "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb1",
    "comment": "",
    "command": "type",
    "target": "id=repos-list-filter-input",
    "targets": [],
    "value": "instana"
}

フィルター・エリアで3秒ポーズした後にEnterキーをタイプするには、次のようにします：

{
    "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb2",
    "comment": "",
    "command": "pause",
    "target": "3000",
    "targets": [],
    "value": ""
}, {
    "id": "d0239041-5bdf-42be-b920-c5055628f161",
    "comment": "",
    "command": "sendKeys",
    "target": "id=repos-list-filter-input",
    "targets": [],
    "value": "${KEY_ENTER}"
},

例

オンラインで編集する

次の例では、 Selenium のIDEスクリプトを使用して、検索エンジンで「 Instana 」というキーワードを検索しています：

{
  "id": "d54cb226-42e2-493a-9965-c05d209da23a",
  "version": "2.0",
  "name": "test-google-search",
  "url": "https://www.google.com",
  "tests": [{
    "id": "c0283e5a-8cbd-492f-8b3d-f2476f319264",
    "name": "search instana",
    "commands": [{
      "id": "cd6aaf21-62f8-4d7f-af0a-5fe8beee8fde",
      "comment": "",
      "command": "open",
      "target": "/",
      "targets": [],
      "value": ""
    }, {
      "id": "f6ef14b9-0f06-4b62-bb29-41c21a298703",
      "comment": "",
      "command": "click",
      "target": "id=APjFqb",
      "targets": [],
      "value": ""
    }, {
      "id": "ed0b72f9-8da9-4413-8088-819b89f1f6dc",
      "comment": "",
      "command": "type",
      "target": "id=APjFqb",
      "targets": [],
      "value": "instana"
    }, {
      "id": "f9746499-1d97-4f83-aa8a-a5419d9e3922",
      "comment": "",
      "command": "sendKeys",
      "target": "id=APjFqb",
      "targets": [],
      "value": "${KEY_ENTER}"
    }, {
      "id": "93939f21-739f-4c84-bb2e-580af6b1bc76",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "css=.zgAlFc svg",
      "targets": [],
      "value": "10000"
    }, {
      "id": "331e3fc1-9baa-4519-9814-3105d6d06937",
      "comment": "",
      "command": "assertTitle",
      "target": "instana - Google Search",
      "targets": [],
      "value": ""
    }]
  }],
  "suites": [{
    "id": "7de135e9-a6c4-4b39-b28a-092bb0d7cbac",
    "name": "Search Instana",
    "persistSession": false,
    "parallel": false,
    "timeout": 300,
    "tests": ["c0283e5a-8cbd-492f-8b3d-f2476f319264"]
  }],
  "urls": ["https://www.google.com/"],
  "plugins": []
}

Selenium のIDEスクリプトにおけるテスト機能の拡張

オンラインで編集する

Instana 合成ブラウザテストは、 Selenium IDEよりも多くの機能を提供します：

Instana Syntheticは、タイムラインチャート、 HTTP アーカイブ（HAR）ファイル、スクリーンショット、録画データ、ブラウザログ、コンソールログなど、詳細なテスト結果を提供します。
Instana Syntheticは、より高度なブラウザテスト用APIとグローバル変数を提供します。

Instana Syntheticが提供する高度なブラウザテストAPIやグローバル変数を使用して、 Selenium のIDEスクリプトを修正したい場合は、以下の例を参照してください。 Selenium IDEではこれらの高度な機能をサポートしていないため、スクリプトのテストやデバッグを行うには、Synthetic-browser-scriptのローカルランナーを使用する必要があります。

ユーザー認証情報の取得方法

オンラインで編集する

Instana バックエンドサーバーで定義されたユーザー認証情報にアクセスする

Synthetic Open API を使用して認証情報を作成するには、以下の手順を実行してください：
1. 適切な権限設定がされていることを確認してください。
2. ` OpenAPI ` を使用して、`` および `` credentialNamecredentialValue 変数を渡すことで、認証情報を作成します。
それからテストスクリプトの中で、$secure.credentialName を使って、例えば $secure.password や $secure.username のように、作成したクレデンシャルを参照します。 Selenium IDE スクリプトの Value プロパティの ${} は、定数文字列と区別するために定義済みの変数を参照するものです。 $secure.credentialName Instana でユーザー認証情報にアクセスする方法です。

注：サポートされているのは $secure.credentialName 形式のみです。この $secure[credentialName] 形式はサポートされていません。

注：セキュアな認証情報の参照（$secure.credentialName）は、スクリプトの実行前に解決されます。資格情報の名前を直接指定する必要があります。 eval()変数や文字列連結、またはを使用して動的に参照を構築しないでください。これらの方法はサポートされておらず、評価されません。
```
{
    "id": "98b7df8f-ec53-47f9-b7a0-0eedbfc64ff0",
    "comment": "",
    "command": "click",
    "target": "id=email",
    "targets": [],
    "value": ""
}, {
    "id": "83ae509f-4247-4acc-ab99-46ef4c620f4f",
    "comment": "",
    "command": "type",
    "target": "id=email",
    "targets": [],
    "value": "${$secure.username}"
}
 
```

二要素認証(2FA)でウェブサイトにサインインするために、秘密鍵から時間ベースのワンタイムパスワード(TOTP)を生成する。

{
    "id": "ec51296b-4d16-4167-ac83-ba87f89cc0c7",
    "comment": "Generate a TOTP token from a TOTP key",
    "command": "executeScript",
    "target": "return $browser.generateTOTPToken($secure.totpKey);",
    "targets": [],
    "value": "totpToken"
}, {
    "id": "3cbc306a-ed33-46bf-9923-92752b0466f2",
    "comment": "",
    "command": "type",
    "target": "id=password",
    "targets": [],
    "value": "${totpToken}"
}

スクリーンショットの撮り方

オンラインで編集する

スクリーンショットは、 Instana のテスト結果詳細ページでご覧いただけます。

{
    "id": "b49ff289-f041-44f1-836b-ba7e993c3f07",
    "comment": "",
    "command": "executeScript",
    "target": "await $browser.takeScreenshot()",
    "targets": [],
    "value": ""
}

を使用して `$synthetic` グローバル変数にアクセスする方法

オンラインで編集する

次の例のように、$synthetic.xxxx、$secure.xxx、$env.xxxを使ってグローバル変数にアクセスすることができます。

JavaScript のテンプレート文字列構文で、` echo command` のような変数を使用するには、標準の ` Node.js ` 構文を使用し、変数を ` ${}.` の直後に記述します。

{
    "id": "da853ea2-7253-4938-ad2d-9272f4c6d3e2",
    "comment": "",
    "command": "echo",
    "target": "tag1's value is ${$synthetic.tag1}",
    "targets": [],
    "value": ""
}

API `$attributes` を使用して属性をカスタマイズする方法

オンラインで編集する

{
    "id": "26438c58-868d-4d6d-9e6f-dbe9d8f373fd",
    "comment": "",
    "command": "executeScript",
    "target": "$attributes.set('regionName', 'green-region');",
    "targets": [],
    "value": ""
}

スクリプト内の ` $attributesAPI ` で設定されたカスタム属性や、テスト定義で customProperties `on` によって定義されたカスタムプロパティは、テスト結果内で ` synthetic.tags metric` を使用して参照できます。この synthetic.tags 指標を使用してテスト結果をフィルタリングしたり、 Smart Alertのカスタムペイロードにカスタム値を指定したりできます。 Selenium

Instana の高度なブラウザテストAPIを呼び出す方法

オンラインで編集する

Selenium コマンド runScript および executeScript を使用して、拡張ブラウザー・テスト API を呼び出します。

Selenium のコマンド runScript および executeScript を使用すると、 Instana のブラウザテスト機能で、あらかじめ定義されたブラウザテストAPIやグローバル変数を呼び出すことができます。

executeScript と runScript の違いは、 executeScript が戻り値の変数への保管をサポートする点です。その後、 ${xxx}を使用して変数の assert または echo を行うことができます。返された値を保存するには、returnキーワードを使い、value入力フィールドに変数名を指定します。
```
{
    "id": "ec51296b-4d16-4167-ac83-ba87f89cc0c7",
    "comment": "Generate a TOTP token from a TOTP key",
    "command": "executeScript",
    "target": "return $browser.generateTOTPToken($secure.totpKey);",
    "targets": [],
    "value": "totpToken"
}, {
    "id": "3cbc306a-ed33-46bf-9923-92752b0466f2",
    "comment": "",
    "command": "echo",
    "target": "Generated TOTO token ${totpToken}",
    "targets": [],
    "value": ""
}
 
```

環境変数を定義し、それをブラウザー・テスト API で使用します。

{
    "id": "10d09a25-d101-43b0-84df-f22265b7cec6",
    "comment": "",
    "command": "storeJson",
    "target": "{\"proxy\": \"<proxy_server>:8080\", \"noproxy\": \"localhost,google.com,192.168.1.0/24\"}",
    "targets": [],
    "value": "proxyConfig"
},
{
    "id": "237bd334-d963-4a73-b9bb-4c31f1dce051",
    "comment": "",
    "command": "runScript",
    "target": "await $browser.setProxy(${proxyConfig.proxy}, ${proxyConfig.noproxy});",
    "targets": [],
    "value": ""
}

ウェブ要素までスクロールし、クリックする。

Instana のブラウザテスト機能（ API ）を利用すれば、過去のスクロール操作を簡単に再現できます。下の例は、waiting for element present, waiting for element visible, scrollIntoView, click要素のロジックを実装しています。 scrollIntoView関数は、要素をブラウザウィンドウの可視領域にスクロールさせることができます。
```
{
    "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
    "comment": "",
    "command": "runScript",
    "target": "let element = await $browser.waitForAndFindElement(By.xpath(`//a[contains(.,'Customer stories')]`), 30000); await $browser.executeScript(`arguments[0].scrollIntoView()`, element); await $browser.executeScript(`arguments[0].click()`, element)",
    "targets": [],
    "value": ""
}
 
```

特定のリクエストを拒否する方法

オンラインで編集する

{
    "id": "2e91846e-037b-473d-a977-7fbdfe52d1a4",
    "comment": "",
    "command": "executeScript",
    "target": "await $browser.addHostnamesToDenylist(['ajax.googleapis.com/ajax/libs/jquery']);",
    "targets": [],
    "value": ""
}

API `$network` を使用してプロキシを設定する方法

オンラインで編集する

{
    "id": "a418460e-a0a9-4c68-bbd0-fb78d6495e92",
    "comment": "",
    "command": "runScript",
    "target": "await $network.setProxy(${proxyConfig.proxy}, ${proxyConfig.noproxy});",
    "targets": [],
    "value": ""
}

例

オンラインで編集する

次の例では、 Selenium コマンドが Instana のブラウザテストAPIおよびグローバル変数を呼び出しています。

Instana UIへのログインと検証の例