跳到主要内容

执行 JavaScript

介绍​

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

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

href = page.evaluate('() => document.location.href')

如果结果是一个 Promise 或者函数是异步的，evaluate 会自动等待它解析完成：

status = page.evaluate("""async () => {
  response = await fetch(location.href)
  return response.status
}""")

不同的环境​

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

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

data = "some data"
result = page.evaluate("""() => {
  // 错误：网页中没有 "data" 变量
  window.myApp.use(data)
}""")

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

data = "some data"
# 将 |data| 作为参数传递
result = page.evaluate("""data => {
  window.myApp.use(data)
}""", data)

执行参数​

Playwright 的执行方法如 page.evaluate() 接受一个可选的单个参数。这个参数可以是 Serializable 值和 JSHandle 实例的混合。句柄会自动转换为其代表的值。

# 一个基本值。
page.evaluate('num => num', 42)

# 一个数组。
page.evaluate('array => array.length', [1, 2, 3])

# 一个对象。
page.evaluate('object => object.foo', { 'foo': 'bar' })

# 一个句柄。
button = page.evaluate_handle('window.button')
page.evaluate('button => button.textContent', button)

# 使用 JSHandle.evaluate 的替代写法。
button.evaluate('(button, from) => button.textContent.substring(from)', 5)

# 包含多个句柄的对象。
button1 = page.evaluate_handle('window.button1')
button2 = page.evaluate_handle('.button2')
page.evaluate("""o => o.button1.textContent + o.button2.textContent""",
    { 'button1': button1, 'button2': button2 })

# 对象解构也有效。注意解构对象和参数之间的属性名称必须匹配
# 还要注意需要括号。
page.evaluate("""
    ({ button1, button2 }) => button1.textContent + button2.textContent""",
    { 'button1': button1, 'button2': button2 })

# 数组也有效。解构时可以使用任意名称。
# 注意需要括号。
page.evaluate("""
    ([b1, b2]) => b1.textContent + b2.textContent""",
    [button1, button2])

# 任何可序列化值和句柄的组合都有效。
page.evaluate("""
    x => x.button1.textContent + x.list[0].textContent + String(x.foo)""",
    { 'button1': button1, 'list': [button2], 'foo': None })

初始化脚本​

有时在页面开始加载之前执行一些操作是很有用的。例如，您可能想要设置一些模拟或测试数据。

在这种情况下，请使用 page.add_init_script() 或 browser_context.add_init_script()。在下面的例子中，我们将把 Math.random() 替换为一个常量值。

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

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

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

# 在您的测试中，假设 "preload.js" 文件在 "mocks" 目录中。
page.add_init_script(path="mocks/preload.js")