在 JavaScript 中执行代码

简介

Playwright 脚本在您的 Playwright 环境中运行。您的页面脚本在浏览器页面环境中运行。这些环境不会相互影响，它们在不同的虚拟机、不同的进程中运行，甚至可能在不同的计算机上运行。

使用 Page.EvaluateAsync() API，可以在网页上下文中运行 JavaScript 函数，并将结果带回 Playwright 环境。在 evaluate 中可以使用诸如 window 和 document 之类的浏览器全局变量。

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

以下代码段是**正确的**，因为它将值显式地作为参数传递

var data = "some data";
// Pass |data| as a parameter.
var result = await page.EvaluateAsync("data => { window.myApp.use(data); }", data);

评估参数

Playwright 评估方法（如 Page.EvaluateAsync()）采用单个可选参数。此参数可以是 可序列化 值和 JSHandle 实例的混合。句柄会自动转换为它们表示的值。

// A primitive value.
await page.EvaluateAsync<int>("num => num", 42);

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

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

// A single handle.
var button = await page.EvaluateHandleAsync("window.button");
await page.EvaluateAsync<IJSHandle>("button => button.textContent", button);

// Alternative notation using JSHandle.EvaluateAsync.
await button.EvaluateAsync<string>("(button, from) => button.textContent.substring(from)", 5);

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

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

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

// Any mix of serializables and handles works.
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;

接下来，将初始化脚本添加到页面。

// In your test, assuming the "preload.js" file is in the "mocks" directory.
await Page.AddInitScriptAsync(scriptPath: "mocks/preload.js");