執行 JavaScript 求值
簡介
Playwright 腳本在您的 Playwright 環境中執行。您的頁面腳本在瀏覽器頁面環境中執行。這些環境不會相交,它們在不同的虛擬機器、不同的程序中執行,甚至可能在不同的電腦上執行。
page.evaluate()
API 可以在網頁的情境中執行 JavaScript 函式,並將結果帶回到 Playwright 環境。瀏覽器全域變數如 window
和 document
可以在 evaluate
中使用。
const href = await page.evaluate(() => document.location.href);
如果結果是一個 Promise 或函式是非同步的,evaluate
會自動等待直到它被解析:
const status = await page.evaluate(async () => {
const response = await fetch(location.href);
return response.status;
});
不同環境
執行求值的腳本在瀏覽器環境中執行,而您的測試在測試環境中執行。這意味著您無法在頁面中使用測試中的變數,反之亦然。相反地,您應該明確地將它們作為參數傳遞。
以下程式碼片段是錯誤的,因為它直接使用變數:
const data = 'some data';
const result = await page.evaluate(() => {
// 錯誤:在網頁中沒有 "data"
window.myApp.use(data);
});
以下程式碼片段是正確的,因為它明確地將值作為參數傳遞:
const data = 'some data';
// 將 |data| 作為參數傳遞
const result = await page.evaluate(data => {
window.myApp.use(data);
}, data);
求值參數
Playwright 求值方法如 page.evaluate()
接受一個可選參數。此參數可以是 Serializable 值和 JSHandle 實例的混合。控制代碼會自動轉換為它們所代表的值。
// 基本型別值
await page.evaluate(num => num, 42);
// 陣列
await page.evaluate(array => array.length, [1, 2, 3]);
// 物件
await page.evaluate(object => object.foo, { foo: 'bar' });
// 單一控制代碼
const button = await page.evaluateHandle('window.button');
await page.evaluate(button => button.textContent, button);
// 使用 JSHandle.evaluate 的替代寫法
await button.evaluate((button, from) => button.textContent.substring(from), 5);
// 具有多個控制代碼的物件
const button1 = await page.evaluateHandle('window.button1');
const button2 = await page.evaluateHandle('window.button2');
await page.evaluate(
o => o.button1.textContent + o.button2.textContent,
{ button1, button2 });
// 物件解構也可以運作。注意屬性名稱必須在
// 解構物件和參數之間相符
// 同時注意必須的括號
await page.evaluate(
({ button1, button2 }) => button1.textContent + button2.textContent,
{ button1, button2 });
// 陣列也可以運作。可以使用任意名稱進行解構
// 注意必須的括號
await page.evaluate(
([b1, b2]) => b1.textContent + b2.textContent,
[button1, button2]);
// 可序列化值和控制代碼的任何組合都可以運作
await page.evaluate(
x => x.button1.textContent + x.list[0].textContent + String(x.foo),
{ button1, list: [button2], foo: null });
初始化腳本
有時在頁面開始載入之前在頁面中求值某些內容很方便。例如,您可能想要設定一些模擬或測試資料。
在這種情況下,使用 page.addInitScript()
或 browserContext.addInitScript()
。在下面的範例中,我們將用常數值替換 Math.random()
。
首先,建立一個包含模擬的 preload.js
檔案。
// preload.js
Math.random = () => 42;
接下來,將初始化腳本新增到頁面。
import { test, expect } from '@playwright/test';
import path from 'path';
test.beforeEach(async ({ page }) => {
// 在 beforeEach 掛勾中為每個測試新增腳本
// 確保正確解析腳本路徑
await page.addInitScript({ path: path.resolve(__dirname, '../mocks/preload.js') });
});
或者,您可以傳遞函式而不是建立預載腳本檔案。這對於簡短或一次性腳本更方便。您也可以透過這種方式傳遞參數。
import { test, expect } from '@playwright/test';
// 在 beforeEach 掛勾中為每個測試新增腳本
test.beforeEach(async ({ page }) => {
const value = 42;
await page.addInitScript(value => {
Math.random = () => value;
}, value);
});