评估 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" +
  "  // WRONG: there is no 'data' in the web page.\n" +
  "  window.myApp.use(data);\n" +
  "}");

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

String data = "some data";
// Pass |data| as a parameter.
Object result = page.evaluate("data => {\n" +
  "  window.myApp.use(data);\n" +
  "}", data);

评估参数

Playwright 的评估方法，如 Page.evaluate()，接受一个可选参数。此参数可以是 可序列化的 值和 JSHandle 实例的混合。句柄会自动转换为它们所代表的值。

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

// An array.
page.evaluate("array => array.length", Arrays.asList(1, 2, 3));

// An object.
Map<String, Object> obj = new HashMap<>();
obj.put("foo", "bar");
page.evaluate("object => object.foo", obj);

// A single handle.
ElementHandle button = page.evaluateHandle("window.button");
page.evaluate("button => button.textContent", button);

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

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

// Object destructuring works. Note that property names must match
// between the destructured object and the argument.
// Also note the required parenthesis.
Map<String, ElementHandle> arg = new HashMap<>();
arg.put("button1", button1);
arg.put("button2", button2);
page.evaluate("({ button1, button2 }) => button1.textContent + button2.textContent", arg);

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

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

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

// In your test, assuming the "preload.js" file is in the "mocks" directory.
page.addInitScript(Paths.get("mocks/preload.js"));