Skip to main content

執行 JavaScript 求值

簡介​

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

Page.EvaluateAsync() API 可以在網頁的情境中執行 JavaScript 函式，並將結果帶回到 Playwright 環境。瀏覽器全域變數如 window 和 document 可以在 evaluate 中使用。

var href = await page.EvaluateAsync<string>("document.location.href");

如果結果是一個 Promise 或函式是非同步的，evaluate 會自動等待直到它被解析：

int status = await page.EvaluateAsync<int>(@"async () => {
  const response = await fetch(location.href);
  return response.status;
}");

不同環境​

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

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

var data = "some data";
var result = await page.EvaluateAsync(@"() => {
  // 錯誤：在網頁中沒有 'data'
  window.myApp.use(data);
}");

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

var data = "some data";
// 將 |data| 作為參數傳遞
var result = await page.EvaluateAsync("data => { window.myApp.use(data); }", data);

求值參數​

Playwright 求值方法如 Page.EvaluateAsync() 接受一個可選參數。此參數可以是 Serializable 值和 JSHandle 實例的混合。控制代碼會自動轉換為它們所代表的值。

// 基本型別值
await page.EvaluateAsync<int>("num => num", 42);

// 陣列
await page.EvaluateAsync<int[]>("array => array.length", new[] { 1, 2, 3 });

// 物件
await page.EvaluateAsync<object>("object => object.foo", new { foo = "bar" });

// 單一控制代碼
var button = await page.EvaluateHandleAsync("window.button");
await page.EvaluateAsync<IJSHandle>("button => button.textContent", button);

// 使用 JSHandle.EvaluateAsync 的替代寫法
await button.EvaluateAsync<string>("(button, from) => button.textContent.substring(from)", 5);

// 具有多個控制代碼的物件
var button1 = await page.EvaluateHandleAsync("window.button1");
var button2 = await page.EvaluateHandleAsync("window.button2");
await page.EvaluateAsync("o => o.button1.textContent + o.button2.textContent", new { button1, button2 });

// 物件解構也可以運作。注意屬性名稱必須在
// 解構物件和參數之間相符
// 同時注意必須的括號
await page.EvaluateAsync("({ button1, button2 }) => button1.textContent + button2.textContent", new { button1, button2 });

// 陣列也可以運作。可以使用任意名稱進行解構
// 注意必須的括號
await page.EvaluateAsync("([b1, b2]) => b1.textContent + b2.textContent", new[] { button1, button2 });

// 可序列化值和控制代碼的任何組合都可以運作
await page.EvaluateAsync("x => x.button1.textContent + x.list[0].textContent + String(x.foo)", new { button1, list = new[] { button2 }, foo = null as object });

初始化腳本​

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

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

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

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

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

// 在您的測試中，假設 "preload.js" 檔案在 "mocks" 目錄中
await Page.AddInitScriptAsync(scriptPath: "mocks/preload.js");