ブラウザー・スクリプト

表に概説されている事前定義グローバル変数は、スクリプト開発を加速します。

事前定義グローバル変数の使用法と宣言は、以下のとおりです。

ブラウザー・テストでは、 Seleniumベースの API と、その他の 30 を超える拡張ブラウザー・テスト API がサポートされます。 詳細については、 『 API リファレンス』 を参照してください。

以下のサンプル・コードは、以下の基本アクションを実装するためのブラウザー・スクリプト・テストの作成方法を示しています。

• ヘッダーの準備: Web サイトにアクセスする前に要求ヘッダーをカスタマイズするには、以下のコマンドを使用します。

  await $browser.addHeader("test", "test");
  await $browser.addHeaders({ "test1": "test1", "test2": "test2" });
  await $browser.deleteHeaders(["test1", "test2"]);
  $browser.getHeaders().forEach((value, key) => console.log(">>>>>>>>>>>>>>>>>>>", "User customized headers: ", key + "=" + value));
   

• アクセスの制御: 拒否リストと許可リストを使用してアクセスを制御するには、以下のコマンドを使用します。

  await $browser.addHostnamesToDenylist(["*google*", "*timeanddate*"]);
  await $browser.deleteHostnameFromDenylist("*timeanddate*");
  await $browser.get("https://www.google.com");
   

  これらのコマンドを実行した後、Googleで検索すると、そのメッセージが表示されます wwww.google.com is blocked。

• URL を開く：ブラウザで URL を開いてウェブサイトにアクセスするには、次のコマンドを使用します：

  await $browser.get("http://www.bing.com");
   

• スリープ時間の設定: ブラウザーでスリープ・オプションを設定するには、以下のコマンドを使用します。 パラメーターは、スリープする時間 (ミリ秒) です。 次の例では、ブラウザーは 2 秒間スリープします。

  await $browser.sleep(2000);
   

• ページ・タイトル「Assertion is critical in your tests to determine the test results」でアサーションを使用してください。 ページ・タイトルまたはページ・ソースでアサーションを使用するには、以下のコードを使用します。 ライブラリー const assert = require("assert").strict; またはCハイ・アサーション・ライブラリー const { assert } = require("chai");を使用できます。 console.log を使用して、コンソール出力およびコンソール・ログ・ファイルにログインします。

  const { assert } = require("chai");
  
  await $browser.get("http://www.timeanddate.com");
  let page = await $browser.getPageSource();
  assert.isTrue(page.includes("<title>timeanddate.com</title>"));
  console.log(">>>>>>>>>>>>>>>>>>>", "Page title: ", await $browser.getTitle());
   

• セッションの取得: セッションに関する情報を取得するには、以下のコマンドを使用します。

  let session = await $browser.getSession();
  console.log(">>>>>>>>>>>>>>>>>>>", "Session id: ", session.getId());
   

• ウィンドウ・サイズの最大化: ブラウザー・ウィンドウ・サイズを最大化するには、次のコマンドを使用します。

  $browser.manage().window().maximize();
   

• スクリーン・ショットの取得: ブラウザーのスクリーン・ショットを取得するには、以下のコマンドを使用します。

  await $browser.takeScreenshot();
   

• 待機してページでエレメントを見つけます。以下の表のコマンドを使用して、特定の検索を行うことができます。

  名前	使用
  $browser.waitForAndFindElement($driver.By.id("boxyear"), 1000)	エレメントが可視になるまで、またはタイムアウト値に達するまで、ID によってエレメントを検索します。
  $browser.findElements($driver.By.css('select'))	CSS セレクターを使用してページ上の複数のエレメントを検索します。
  $browser.findElement($driver.By.linkText("About"))	linkTextで要素を検索します。
  $browser.findElement($driver.By.xpath('//input[@value='f']'))	XPath でエレメントを検索します。
  $browser.$('#boxyear')	ID によってエレメントを検索します。
  $browser.$$(".rd-box")	クラスごとにエレメントを検索します。
  elem.$('h2').$('a').getText()	エレメント名でエレメントを検索します。

  以下のサンプル・コードは、ページ上で待機してエレメントを見つける方法を示しています。

  // Find element by XPath and wait for the element until specified timeout value reached
  await $browser.waitForAndFindElement($driver.By.xpath(`//textarea[@inputmode='search']`), 10000);
  
  // Find element by id
  let elem = await $browser.waitForAndFindElement($driver.By.id("boxyear"), 1000);
  assert.equal("2022", await elem.getAttribute("value"));
  assert.equal("2022", await $browser.$('#boxyear').getAttribute("value"));
  
  // Find elements by CSS selector
  let selects = await $browser.findElements($driver.By.css('select'));
  assert.equal(2, selects.length);
  
  // Find elements by class
  let elems = await $browser.$$(".rd-box");
  console.log(await elems[0].$('h2').$('a').getText());
   

• 要素の検索とアクションの実行：以下の例は、 CSSセレクタで要素を検索し、 ActionSequence を使用してキー入力を送信する方法を示しています：

  <input id="sb_form_q" name="q" type="search">
   

  let textarea = await $browser.waitForAndFindElement($driver.By.css('#sb_form_q'), 10000);
  // Actions to send keys
  await $browser
    .actions()
    .move({ origin: textarea })
    .sendKeys("synthetic")
    .pause(5000)
    .sendKeys($driver.Key.ENTER)
    .perform();
   

• Wait until タイトルが condition: タイトルが条件になるまで待機を適用するには、次のコマンドを使用します。

  await $browser.wait($driver.until.titleContains('Year 2022 Calendar'), 10000);
   

• タイムアウト条件まで待機およびポーリング: タイムアウト条件まで待機およびポーリングを適用するには、以下のコマンドを使用します。

  注： 以下のサンプルは、以前のバージョンと互換性のあるプロミスチェーンの呼び出しです。 最新の JavaScript では、このコードを使用しないでください。 その代わりに、AsyncとAwaitを使った最新の非同期 JavaScript を使用してください。

  $browser.get("https://www.google.com");
  $browser.wait(function () {
    return $browser.getTitle().then(function (title) {return title.includes("Google");});
  }, 10000).then(function () {
    return $browser.findElement($driver.By.linkText("About")).click();
  }).then(function () {
    return $browser.navigate().back();
  });
   

• 戻る: ブラウザーで前にアクセスしたページに戻るには、以下のコマンドを使用します。

  await $browser.navigate().back();
   

• 新規タブへの切り替え: 現行ウィンドウ・ハンドルを取得し、新規ウィンドウに切り替えて新規タブで新規ページを開き、元のウィンドウに戻るには、以下のコードを使用します。

  console.log("Windows handle: ", await $browser.getWindowHandle(), "Current url: ", await $browser.getCurrentUrl());
  let originalWindow = await $browser.getWindowHandle();
  await $browser.switchTo().newWindow();
  await $browser.get("http://www.timeanddate.com");
  await $browser.switchTo().window(originalWindow);
  await $browser.takeScreenshot();
   

• マウス・クリック: マウスを移動するには、次のコマンドを使用します。

  const element = await $browser.waitForAndFindElement(by, timeout);
  const out = $browser.actions().move({origin: element}).press().release().perform();
   

• マウス・ポインター移動: ブラウザー要素の上にマウスを移動するには、次のコマンドを使用します。

  const element = await $browser.waitForAndFindElement(by, timeout);
  const out = $browser.actions().move({origin: element, duration: 2000}).perform();
   

• 鍵の送信: 鍵を送信するには、以下のコマンドを使用します。

  await $browser.actions().sendKeys("synthetic").perform();
   

シャドー DOM エレメントにアクセスするには、 getShadowRoot() 関数を使用できます。 新しいメソッドは、シンセティック PoP Helm チャート 1.1.1 以降でサポートされます。 シャドー DOM 対話のサポートを有効にするには、Synthetic PoP バージョンを 1.1.1 以降に アップグレード する必要があります。

let shadowHost = await $browser.waitForAndFindElement(shadowHostSelector, timeout);
let shadowRoot = await shadowHost.getShadowRoot();
let element = await shadowRoot.findElement(elementSelector);
console.log("element text is:", await element.getText(), ", id is:", await element.getId());
 

• HTTP および HTTPS へのリクエストに対して、`proxy` または ` $network$browser proxy-name` 変数を使用してプロキシを設定するには、次のコマンドを実行します。 プロキシーは、 string または url.URLを使用して設定できます。

  await $network.clearProxy();
  await $network.setProxyForHttp(proxyServer);
  website = await accessWebSite();
  checkHostname("www.google.com.hk", website)
  
  await $network.clearProxy();
  let testURL = new URL("http://" + sslProxyServer);
  await $network.setProxyForHttps(testURL);
  website = await accessWebSite();
  checkHostname("www.google.com", website);
   

• バイパス・リストを使用してフィルターに掛けるすべての要求に対してプロキシーを設定するには、以下のコマンドを使用します。 以下の例でこのコマンドを実行した後、 www.google.comで使用可能なプロキシーはありません。

  await $network.clearProxy();
  await $network.setProxy(proxyServer, "www.google.com");
  console.log(">>>>>>>>>>>>>>>>>>>", "Bypass list: ", $network.getProxy().rules.bypassList);
  website = await accessWebSite();
  checkHostname("www.google.com.hk", website);
   

URL で機密データをマスキングするには、次のコマンドを使用します。 次の例では、 URL は.に置き換えられています "url": "https://www.bing.com/?mkt=zh-CN&toHttps=1&redig=*"。

$util.secrets.setURLSecretsRegExps([/redig/i]);
console.log(">>>>>>>>>>>>>>>>>>>", "Access bing");
await $browser.get("http://cn.bing.com");
await $browser.wait($driver.until.titleContains('Bing'), 10000);
 

以下の例は、アサーション・モジュール chaiをインポートするコマンドを示しています。

var assert = require('chai').assert;
 

Instana ブラウザテストは、 Node.js v18 以降で、 Node.js のコアモジュールをサポートしています。

[SyntheticPoP] [ERROR] process.exit is not allowed. This API is blocked by playback engine.
 

Instana Synthetic Monitoringは、以下のサードパーティ製モジュールに対応しています：

• @aws-sdk/client-s3 3.626.0
• VOB 2.1.2
• オーセンティケーター 1.1.5
• basic-ftp 4.6.6
• btoa 1.2.1
• chai 4.3.10
• 色 1.4.0
• consoleplusplus 1.4.4
• 暗号 js 4.2.0
• Faker 5.5.3
• 11.8.6 を取得しました
• Ji 17.7.1
• js-yaml 4.1.0
• ldapauth-fork 5.0.2
• 宿泊施設 4.17.21
• モーメント 2.29.4
• net-snmp 3.6.3
• protocol-buffers 4.2.0
• 1.5.1
• re2 1.18.3
• ssh2-sftp-client 7.2.3
• ssl チェッカー 2.0.7
• テキスト・エンコード 0.7.0
• スリフト 0.14.2
• totp-generator 0.0.14
• タフクッキー 4.1.3
• 下線 1.13.3
• url-parse 1.5.10
• urllib 2.41.0
• uuid 3.4.0
• バリデーター 13.7.0
• ws 7.5.10
• xml2js 0.5.0

let click = async (message, by, timeout = 60000) => {
  console.log(`Click on ${message} >> ${by} << `);
  try {
    const element = await $browser.waitForAndFindElement(by, timeout);
    return $browser.actions().move({ origin: element }).click().perform();
  } catch (err) {
    console.error(`\ncatch(click): ${err.message}`);
    throw err;
  }
};

let hover = async (message, by, timeout = 60000) => {
  console.log(`Hover on ${message} >> ${by} << `);
  try {
    const element = await $browser.waitForAndFindElement(by, timeout);
    return $browser.actions().move({ origin: element, duration: 3000 }).perform();
  } catch (err) {
    console.error(`\ncatch(hover): ${err.message}`);
    throw err;
  }
};

(async function () {
  console.log(">>>>>>>>>>>>>>>>>>>", "Access bing page");
  await $browser.get("http://www.bing.com");
  console.log(">>>>>>>>>>>>>>>>>>>", "Actions of search");
  await hover("search button", $driver.By.xpath("//label[@id='search_icon']"), 10000);
  await $browser.takeScreenshot();
  await $browser.actions().sendKeys("synthetic").perform();
  await click("search button", $driver.By.xpath("//label[@id='search_icon']"), 10000);
})();
 

const { assert } = require("chai");

(async function () {
  /**
   * manipulate headers and retrieve all the customized headers
   */
  await $browser.addHeader("test", "test");
  await $browser.addHeaders({ "test1": "test1", "test2": "test2" });
  await $browser.deleteHeaders(["test1", "test2"]);
  $browser.getHeaders().forEach((value, key) => console.log(">>>>>>>>>>>>>>>>>>>", "User customized headers: ", key + "=" + value));

  /**
   * manipulate deny and allow list
   */
  await $browser.addHostnamesToDenylist(["*google*", "*timeanddate*"]);
  await $browser.deleteHostnameFromDenylist("*timeanddate*");

  /**
   * open url www.bing.com
   * find element by class selector
   * send keys to search Synthetic in the page
   */
  console.log(">>>>>>>>>>>>>>>>>>>", "Access bing page");
  await $browser.get("http://www.bing.com");
  console.log(">>>>>>>>>>>>>>>>>>>", "Actions of search");
  // Find element by XPath and wait for the element until specified timeout value reached
  await $browser.waitForAndFindElement($driver.By.xpath(`//textarea[@inputmode='search']`), 10000);
  // Sleep or pause to wait for specified milliseconds
  await $browser.sleep(5000);
  // Take a screenshot
  await $browser.takeScreenshot();
  // Actions to send keys
  await $browser.actions().sendKeys("synthetic").sendKeys($driver.Key.ENTER).perform();

  /* Find element by CSS selector and perform actions
  let textarea = await $browser.waitForAndFindElement($driver.By.css('#sb_form_q'), 10000);
  // Actions to send keys
  await $browser
    .actions()
    .move({ origin: textarea })
    .sendKeys("synthetic")
    .pause(5000)
    .sendKeys($driver.Key.ENTER)
    .perform();
  */

  /**
   * samples of promise chain invocation, which is not recommended but backwards compatible
   * samples of waiting and polling function with timeout value
   */
  await $browser.deleteHostnameFromDenylist("*google*");
  await $browser.get("https://www.google.com");
  // Call the wait function.
  await $browser.wait(function () {
    return $browser.getTitle().then(function (title) {
      return title.includes("Google");
    });
    //If the condition isn't satisfied within 10000 milliseconds (10 seconds), proceed anyway.
  }, 10000).then(function () {
    return $browser.findElement($driver.By.linkText("About")).click();
  }).then(function () {
    return $browser.navigate().back();
  });

})();
 

const url = require("url");
const URL = url.URL;
const { assert } = require("chai");

let website;
let proxyServer = "proxyHost:proxyPort";
let sslProxyServer = "username:password@proxyHost:proxyPort";

async function accessWebSite(url) {
  console.log(">>>>>>>>>>>>>>>>>>>", "Proxy configuration is: ", JSON.stringify($network.getProxy()));
  console.log(">>>>>>>>>>>>>>>>>>>", `Access website ${url}`);
  await $browser.get(url);
  await $browser.findElement($driver.By.name('q')).click();
  await $browser.actions().sendKeys('synthetic').sendKeys($driver.Key.ENTER).perform();
  await $browser.takeScreenshot();
  return $browser.getCurrentUrl();
}

function checkHostname(hostname, website) {
  let actualURL = new URL(website);
  console.log(">>>>>>>>>>>>>>>>>>>", "Hostname is: ", actualURL.hostname);
  assert.equal(actualURL.hostname, hostname);
}

(async function () {
  /**
   * samples of proxy configuration settings with await asynchronous
   * using $network tools
   */
  console.log(">>>>>>>>>>>>>>>>>>>", "Clear proxy configuration");
  await $network.clearProxy();
  console.log(">>>>>>>>>>>>>>>>>>>", "Set proxy configuration for HTTPS request with string");
  await $network.setProxyForHttps(proxyServer);
  website = await accessWebSite("https://www.bing.com");
  checkHostname("www.bing.com", website)

  console.log(">>>>>>>>>>>>>>>>>>>", "Clear proxy configuration");
  await $network.clearProxy();
  console.log(">>>>>>>>>>>>>>>>>>>", "Set proxy configuration for HTTPS request with URL object");
  let testURL = new URL("http://" + sslProxyServer);
  await $network.setProxyForHttps(testURL);
  website = await accessWebSite("https://www.google.com");
  checkHostname("www.google.com", website);


  /**
   * samples of proxy configuration settings with bypass list
   */
  await $network.clearProxy();
  await $network.setProxy(proxyServer, "www.google.com");
  console.log(">>>>>>>>>>>>>>>>>>>", "Proxy config: ", $network.getProxy());
  website = await accessWebSite("https://www.bing.com");
  checkHostname("www.bing.com", website);
})();