执行 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 实例的混合。句柄会自动转换为它们所代表的值。

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

初始化脚本

有时，您可能需要在页面开始加载之前评估一些内容。例如，您可能希望设置一些 mock 数据或测试数据。

在这种情况下，使用 page.addInitScript() 或 browserContext.addInitScript()。以下示例中，我们将 Math.random() 替换为一个常量值。

首先，创建一个 preload.js 文件，包含 mock 脚本：

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