跳到主要内容

执行 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);

求值参数​

诸如 Page.EvaluateAsync() 之类的 Playwright 求值方法接受单个可选参数。此参数可以是 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");