使用瀏覽器 Script 進行瀏覽器測試

廣域變數

表格中所概述的預先定義廣域變數可加速 Script 開發。

預先定義廣域變數的用法和宣告如下:

controller:
  customProperties: "tag1=value1;tag2=value2"

// to print test custom tags/labels
console.log('Test Label $synthetic.labels.Team: ' + $synthetic.labels.Team);
console.log('Test Label $synthetic.labels.Purpose: ' + $synthetic.labels.Purpose);

$attributes.set(xxx, yyy) // sets tag xxx to value yyy
let v = $attributes.get(xxx) // sets variable v to the value of tag xxx

// to redact 'key', 'password' and 'secret' query parameters in URL
$util.secrets.setURLSecretsRegExps([/key/i, /password/i, /secret/i]);

瀏覽器測試 API 參照

瀏覽器測試支援 Selenium型 API ，以及超過 30 個其他延伸瀏覽器測試 API。 如需相關資訊，請參閱 API 參考資料。

實作基本動作

下列範例程式碼顯示如何撰寫瀏覽器 Script 測試，以實作下列基本動作:

• 準備標頭: 若要在存取網站之前自訂要求標頭，請使用下列指令:

  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 已封鎖」。

• 開啟 URL: 若要在瀏覽器中開啟 URL 以存取網站，請使用下列指令:

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

• 設定休眠時間: 若要在瀏覽器中設定休眠選項，請使用下列指令。 此參數是休眠的時間量 (毫秒)。 在下列範例中，瀏覽器休眠 2 秒。

  await $browser.sleep(2000);
  

• 將主張與頁面標題搭配使用: 主張在您的測試中是很重要的，以判斷測試結果。 若要使用主張與頁面標題或頁面來源搭配，請使用下列程式碼。 您可以使用程式庫 const assert = require("assert").strict; 或 Chai 主張程式庫 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();
  

尋找頁面元素並與之互動

• 尋找元素並執行動作: 若要尋找元素，請使用 $ 或 $$。 下列範例顯示如何依類別 selector 來尋找元素，並使用 ActionSequence來傳送索引鍵:

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

  await $browser.get("http://www.bing.com");
  console.log(">>>>>>>>>>>>>>>>>>>", "Actions of search");
  await $browser.$(".sb_form_q");
  $browser.actions().sendKeys("synthetic").sendKeys($driver.Key.ENTER).perform();
  

• 在頁面上等待並尋找元素: 您可以使用下表中的指令進行特定搜尋:

  名稱	使用
  $browser.waitForAndFindElement	等待並尋找元素，直到元素可見或達到逾時值為止。
  $browser.findElements($driver.By.css('select'))	在具有定位器的頁面上搜尋多個元素。
  $browser.$('#boxyear')	依 ID 尋找元素。
  $browser.$$(".rd-box")	依類別尋找元素。
  elem.$('h2').$('a').getText()	依元素名稱尋找元素。

  下列範例程式碼顯示如何在頁面上等待及尋找元素:

  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"));
  
  let selects = await $browser.findElements($driver.By.css('select'));
  assert.equal(2, selects.length);
  
  let elems = await $browser.$$(".rd-box");
  console.log(await elems[0].$('h2').$('a').getText());
  

套用條件

• 等到 標題變成條件: 若要套用等到標題變成條件，請使用下列指令:

  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 元素

若要存取 Shadow DOM 元素，您可以使用 getShadowRoot() 函數。 虛構 PoP Helm Chart 1.1.1 或更新版本支援新方法。 您必須將虛構 PoP 版本 升級 至 1.1.1 或更新版本，以啟用對 Shadow DOM 互動的支援。

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());

設定 Proxy 以存取網站

• 如果要使用 $network 或 $browser 變數來設定 HTTP 和 HTTP 要求的 Proxy ，請使用下列指令。 您可以使用 string 或 url.URL來設定 Proxy。

  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);
  

• 若要為具有要過濾的略過清單的所有要求設定 Proxy ，請使用下列指令。 在下列範例中執行此指令之後， www.google.com沒有可用的 Proxy。

  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 16.19.1 或更新版本中的 Node.js 核心模組。

附註: 為了提供更安全的執行時期， Instana 瀏覽器測試不支援數個內建模組或 API ，包括 process、 child_process及 fs 寫入或 rm 作業。 如果您在測試 Script 或組合 Script 中使用這些 API ，則測試結果可能會失敗，並出現下列錯誤訊息。 因此，請勿在測試 Script 中使用這些 API。

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

支援的協力廠商模組

Instana Synthetic 監視支援下列協力廠商模組:

• @aws-sdk/client-s3 3.350.0
• atob 2.1.2
• basic-ftp 4.6.6
• btoa 1.2.1
• chai 4.3.10
• 顏色 1.4.0
• consoleplusplus 1.4.4
• crypto-js 4.2.0
• faker 5.5.3
• 取得 11.8.6
• joi 17.7.1
• js-yaml 4.1.0
• ldapauth-fork 5.0.2
• lodash 4.17.21
• 時刻 2.29.4
• net-snmp 3.6.3
• protocol-緩衝區 4.2.0
• q 1.5.1
• re2 1.17.4
• ssh2-sftp-client 7.2.3
• ssl-checker 2.0.7
• 文字編碼 0.7.0
• Thrift 0.14.2
• totp-generator 0.0.14
• 強硬 Cookie 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.5
• xml2js 0.5.0