执行 JavaScript

简介

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

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

String href = (String) page.evaluate("document.location.href");

如果结果是一个 Promise，或者函数是异步的，evaluate 将自动等待其解决：

int status = (int) page.evaluate("async () => {\n" +
  "  const response = await fetch(location.href);\n" +
  "  return response.status;\n" +
  "}");

不同的环境

被评估的脚本在浏览器环境中运行，而测试在测试环境中运行。这意味着你不能在页面中使用测试中的变量，反之亦然。相反，你应该将它们作为参数显式传递。

以下代码片段是 错误的，因为它直接使用了变量：

String data = "some data";
Object result = page.evaluate("() => {\n" +
  "  // 错误：网页中不存在 'data'。\n" +
  "  window.myApp.use(data);\n" +
  "}");

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

String data = "some data";
// 将 |data| 作为参数传递。
Object result = page.evaluate("data => {\n" +
  "  window.myApp.use(data);\n" +
  "}", data);

求值参数

像 Page.evaluate() 这样的 Playwright 求值方法接受一个可选参数。该参数可以是 [可序列化] 值和 JSHandle 实例的混合。句柄会自动转换为它们所代表的值。

// 一个基本类型值。
page.evaluate("num => num", 42);

// 一个数组。
page.evaluate("array => array.length", Arrays.asList(1, 2, 3));

// 一个对象。
Map<String, Object> obj = new HashMap<>();
obj.put("foo", "bar");
page.evaluate("object => object.foo", obj);

// 单个句柄。
ElementHandle button = page.evaluateHandle("window.button");
page.evaluate("button => button.textContent", button);

// 使用 JSHandle.evaluate 的另一种表示法。
button.evaluate("(button, from) => button.textContent.substring(from)", 5);

// 包含多个句柄的对象。
ElementHandle button1 = page.evaluateHandle("window.button1");
ElementHandle button2 = page.evaluateHandle("window.button2");
Map<String, ElementHandle> arg = new HashMap<>();
arg.put("button1", button1);
arg.put("button2", button2);
page.evaluate("o => o.button1.textContent + o.button2.textContent", arg);

// 对象解构也适用。请注意，解构对象和参数之间的属性名必须匹配。
// 还要注意必需的括号。
Map<String, ElementHandle> arg = new HashMap<>();
arg.put("button1", button1);
arg.put("button2", button2);
page.evaluate("({ button1, button2 }) => button1.textContent + button2.textContent", arg);

// 数组也可以。解构时可以使用任意名称。
// 注意必需的括号。
page.evaluate(
  "([b1, b2]) => b1.textContent + b2.textContent",
  Arrays.asList(button1, button2));

// 可序列化值和句柄的任意混合都可以。
Map<String, Object> arg = new HashMap<>();
arg.put("button1", button1);
arg.put("list", Arrays.asList(button2));
arg.put("foo", 0);
page.evaluate(
  "x => x.button1.textContent + x.list[0].textContent + String(x.foo)",
  arg);

初始化脚本

有时，在页面开始加载之前在页面中评估某些内容会很方便。例如，你可能想要设置一些模拟数据或测试数据。

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

首先，创建一个包含模拟内容的 preload.js 文件。

// preload.js
Math.random = () => 42;

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

// 在你的测试中，假设 “preload.js” 文件位于 “mocks” 目录中。
page.addInitScript(Paths.get("mocks/preload.js"));