評估 JavaScript

簡介

Playwright 腳本在您的 Playwright 環境中執行。您的頁面腳本在瀏覽器頁面環境中執行。這些環境不會互相干擾，它們在不同程序中的不同虛擬機器中執行，甚至可能在不同的電腦上執行。

Page.evaluate() API 可以在網頁的上下文中執行 JavaScript 函數，並將結果帶回 Playwright 環境。瀏覽器全域物件，例如 window 和 document，可以在 evaluate 中使用。

String href = (String) page.evaluate("document.location.href");

如果結果是 Promise，或者如果函數是非同步的，evaluate 將自動等待直到它被解析

int status = (int) page.evaluate("async () => {\n" +
  "  const response = await fetch(location.href);\n" +
  "  return response.status;\n" +
  "}");

不同環境

評估的腳本在瀏覽器環境中執行，而您的測試在測試環境中執行。這表示您無法在頁面中使用測試中的變數，反之亦然。相反地，您應該將它們作為引數明確地傳遞。

以下程式碼片段是錯誤的，因為它直接使用變數

String data = "some data";
Object result = page.evaluate("() => {\n" +
  "  // WRONG: there is no 'data' in the web page.\n" +
  "  window.myApp.use(data);\n" +
  "}");

以下程式碼片段是正確的，因為它將值作為引數明確地傳遞

String data = "some data";
// Pass |data| as a parameter.
Object result = page.evaluate("data => {\n" +
  "  window.myApp.use(data);\n" +
  "}", data);

評估引數

Playwright 評估方法，例如 Page.evaluate()，採用單個可選引數。此引數可以是 Serializable 值和 JSHandle 實例的混合。處理程序會自動轉換為它們所代表的值。

// A primitive value.
page.evaluate("num => num", 42);

// An array.
page.evaluate("array => array.length", Arrays.asList(1, 2, 3));

// An object.
Map<String, Object> obj = new HashMap<>();
obj.put("foo", "bar");
page.evaluate("object => object.foo", obj);

// A single handle.
ElementHandle button = page.evaluateHandle("window.button");
page.evaluate("button => button.textContent", button);

// Alternative notation using JSHandle.evaluate.
button.evaluate("(button, from) => button.textContent.substring(from)", 5);

// Object with multiple handles.
ElementHandle button1 = page.evaluateHandle("window.button1");
ElementHandle button2 = page.evaluateHandle("window.button2");
Map<String, ElementHandle> arg = new HashMap<>();
arg.put("button1", button1);
arg.put("button2", button2);
page.evaluate("o => o.button1.textContent + o.button2.textContent", arg);

// Object destructuring works. Note that property names must match
// between the destructured object and the argument.
// Also note the required parenthesis.
Map<String, ElementHandle> arg = new HashMap<>();
arg.put("button1", button1);
arg.put("button2", button2);
page.evaluate("({ button1, button2 }) => button1.textContent + button2.textContent", arg);

// Array works as well. Arbitrary names can be used for destructuring.
// Note the required parenthesis.
page.evaluate(
  "([b1, b2]) => b1.textContent + b2.textContent",
  Arrays.asList(button1, button2));

// Any mix of serializables and handles works.
Map<String, Object> arg = new HashMap<>();
arg.put("button1", button1);
arg.put("list", Arrays.asList(button2));
arg.put("foo", 0);
page.evaluate(
  "x => x.button1.textContent + x.list[0].textContent + String(x.foo)",
  arg);

初始化腳本

有時在頁面開始載入之前評估某些內容是很方便的。例如，您可能想要設定一些模擬或測試資料。

在這種情況下，請使用 Page.addInitScript() 或 BrowserContext.addInitScript()。在下面的範例中，我們將把 Math.random() 替換為常數值。

首先，建立一個包含模擬的 preload.js 檔案。

// preload.js
Math.random = () => 42;

接下來，將初始化腳本新增到頁面。

// In your test, assuming the "preload.js" file is in the "mocks" directory.
page.addInitScript(Paths.get("mocks/preload.js"));