評估 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(() => {
  // WRONG: there is no "data" in the web page.
  window.myApp.use(data);
});

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

const data = 'some data';
// Pass |data| as a parameter.
const result = await page.evaluate(data => {
  window.myApp.use(data);
}, data);

評估參數

Playwright 評估方法，例如 page.evaluate() 接受單一可選參數。此參數可以是可序列化值和 JSHandle 實例的混合。Handles 會自動轉換為它們代表的值。

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

// An array.
await page.evaluate(array => array.length, [1, 2, 3]);

// An object.
await page.evaluate(object => object.foo, { foo: 'bar' });

// A single handle.
const button = await page.evaluateHandle('window.button');
await page.evaluate(button => button.textContent, button);

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

// Object with multiple handles.
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 });

// Object destructuring works. Note that property names must match
// between the destructured object and the argument.
// Also note the required parenthesis.
await page.evaluate(
    ({ button1, button2 }) => button1.textContent + button2.textContent,
    { button1, button2 });

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

// Any mix of serializables and handles works.
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 }) => {
  // Add script for every test in the beforeEach hook.
  // Make sure to correctly resolve the script path.
  await page.addInitScript({ path: path.resolve(__dirname, '../mocks/preload.js') });
});

或者，您可以傳遞函數而不是建立預先載入腳本檔案。對於簡短或一次性的腳本來說，這更方便。您也可以透過這種方式傳遞參數。

import { test, expect } from '@playwright/test';

// Add script for every test in the beforeEach hook.
test.beforeEach(async ({ page }) => {
  const value = 42;
  await page.addInitScript(value => {
    Math.random = () => value;
  }, value);
});

簡介​

不同環境​

評估參數​

初始化腳本​

簡介

不同環境

評估參數

初始化腳本