当前位置：首页 > news >正文

自动化测试工具playwright中文文档-------12.身份验证

news 来源：原创 2025/4/30 4:27:24

介绍

Playwright 在称为浏览器上下文（browser contexts）的隔离环境中执行测试。这种隔离模型提高了测试的可重复性，并防止了测试失败的连锁反应。测试可以加载现有的认证状态，从而无需在每个测试中进行认证，进而加快了测试执行速度。

核心概念

无论您选择哪种认证策略，您都可能需要在文件系统中存储已认证的浏览器状态。

我们建议您创建playwright/.auth目录，并将其添加到.gitignore文件中。您的认证例程将生成已认证的浏览器状态，并将其保存在此playwright/.auth目录中的文件中。之后，测试将重用此状态并已开始认证。这样做可以节省在每个测试开始时重新进行认证流程的时间，从而加快测试速度。

# Bash
mkdir -p playwright/.auth
echo $'\nplaywright/.auth' >> .gitignore

# PowerShell
New-Item -ItemType Directory -Force -Path playwright\.auth
Add-Content -path .gitignore "`r`nplaywright/.auth"

# Batch
md playwright\.auth
echo. >> .gitignore
echo "playwright/.auth" >> .gitignore

在每个测试之前登录

Playwright API 可以自动化与登录表单的交互。

以下示例展示了如何登录到 GitHub。一旦执行了这些步骤，浏览器上下文将被认证。

page = context.new_page()  
page.goto('https://github.com/login')  
  
# 与登录表单交互  
page.get_by_label("Username or email address").fill("username")  
page.get_by_label("Password").fill("password")  
page.get_by_role("button", name="Sign in").click()  
# 继续进行测试

为每个测试重新登录可能会减慢测试执行速度。为了缓解这个问题，请重用现有的认证状态。通过保存和加载认证后的浏览器上下文或页面状态，您可以在多个测试之间共享认证状态，而无需重复登录过程。这样可以显著提高测试执行的速度和效率。

重用已登录状态

Playwright 提供了一种在测试中重用已登录状态的方法。这样，您只需登录一次，然后即可跳过所有测试中的登录步骤。

Web 应用通常使用基于 Cookie 或基于令牌的认证方式，其中认证状态以 cookies或本地存储 local storage的形式保存。Playwright 提供了 browser_context.storage_state()方法，该方法可用于从已认证的上下文中检索存储状态，并据此创建具有预填充状态的新上下文。

Cookie 和本地存储状态可以在不同的浏览器之间共享。这取决于您应用的认证模型：某些应用可能同时需要 Cookie 和本地存储。

以下代码片段展示了如何从已认证的上下文中检索状态，并使用该状态创建新的上下文。

# 将存储状态保存到文件中。  
storage = context.storage_state(path="state.json")  
  
# 使用保存的存储状态创建新的上下文。  
context = browser.new_context(storage_state="state.json")

通过这种方式，您可以在多个测试之间共享已认证的浏览器状态，从而避免了在每个测试中都进行登录操作，显著提高了测试执行的速度和效率。同时，这也有助于确保测试的独立性和可重复性，因为每个测试都从一个已知且一致的状态开始。

高级场景会话

存储（Session Storage）

重用已认证的状态通常涵盖了基于 Cookie 和本地存储的认证。然而，在某些情况下，会话存储（Session Storage）也用于存储与登录状态相关的信息。会话存储特定于某个域，并且在页面重新加载时不会持久保存。Playwright 没有提供直接持久化会话存储的 API，但您可以使用以下代码片段来保存和加载会话存储。

import os  
  
# 获取会话存储并将其存储为环境变量  
session_storage = page.evaluate("() => JSON.stringify(sessionStorage)")  
os.environ["SESSION_STORAGE"] = session_storage  
  
# 在新上下文中设置会话存储  
session_storage = os.environ["SESSION_STORAGE"]  
context.add_init_script("""  
(storage => {  
  if (window.location.hostname === 'example.com') { // 确保只在正确的域名下设置  
    const entries = JSON.parse(storage);  
    for (const [key, value] of Object.entries(entries)) {  
      window.sessionStorage.setItem(key, value);  
    }  
  }  
})('""" + session_storage.replace("'", "\\'").replace("\n", "\\n") + "')")  
""")

在 session_storage = page.evaluate("() => JSON.stringify(sessionStorage)") 这行代码中，() => JSON.stringify(sessionStorage) 是一个箭头函数（Arrow Function），它是 JavaScript ES6 引入的一种更简洁的函数写法。这个箭头函数在这里被用作 page.evaluate 方法的参数。

(): 函数的参数列表为空，表示这个函数不接受任何参数。
=>: 箭头，表示这是一个箭头函数。箭头函数与普通函数的主要区别之一在于它们不绑定自己的 this，arguments，super，或 new.target。箭头函数会捕获其所在上下文的 this 值作为自己的 this 值。但在这个特定的例子中，由于函数体中没有使用 this，这个特性并不直接相关。
JSON.stringify(sessionStorage): 函数体，它调用了 JSON.stringify 方法，该方法将 JavaScript 值（在这个例子中是 sessionStorage 对象）转换为一个 JSON 字符串。由于 sessionStorage 对象不能直接被序列化为 JSON（因为它包含函数等无法直接序列化的属性），这里实际上是在尝试序列化 sessionStorage 中可枚举的键值对。