还记得之前的文章吗，我们之前有说过，实现自动登录，详细分析了Playwright实战中登录状态问题。下面聚焦到storageState从原理到实战实现登录状态管理，从而一劳永逸解决验证码问题。
简介：在自动化测试中，频繁的登录操作和验证码的识别输入常常让开发者头疼。Playwright 提供了一个简洁高效的方法——利用 storageState 存储和恢复登录状态，可以轻松绕过这些障碍，从而提高测试的稳定性和执行效率。
1. 什么是 storageState？
storageState 是 Playwright 提供的一个功能，它可以将当前浏览器会话的存储状态（包括 Cookies 和 LocalStorage 等）保存到一个文件中。下次运行测试时，可以直接加载这个状态文件，避免重复登录以及因验证码问题导致的测试失败。
很多刚开始自动化测试的同学，喜欢关注问题本身，如何从自动化角度解决。这当然没有问题，但是遇到登录验证码就容易遇到各种瓶颈困难。基于上面的介绍，大家换个角度看，这里的思路就可以扩展为：哪怕我手动登录成功，依然可以利用storageState功能保存登录状态信息到文件，然后再后续的*自动化测试*中复用这个登录状态，从而一招“绕过”各式各样千奇百怪验证码。
2. 如何使用 storageState？
2.1 保存登录状态
首先，编写一个脚本用于登录并保存当前的 storageState。
// login.ts
import { chromium, BrowserContext } from 'playwright';async function saveStorageState() {const browser = await chromium.launch();const context = await browser.newContext();const page = await context.newPage();// 打开登录页面await page.goto('https://example.com/login');// 模拟登录操作await page.fill('input[name="username"]', 'your-username');await page.fill('input[name="password"]', 'your-password');await page.click('button[type="submit"]');// 等待登录完成（例如通过URL变化或特定元素出现来确认登录成功）await page.waitForNavigation();// 保存 storageState 到文件await context.storageState({ path: 'storageState.json' });await browser.close();
}saveStorageState();运行该脚本后，会在项目根目录下生成一个 storageState.json 文件，其中保存了当前会话的登录状态。
2.2 在测试中加载保存的状态
在你的测试脚本中，可以加载保存好的 storageState 文件，直接进入已登录的状态，避免重复登录。
// test-with-stored-state.spec.ts
import { test, expect } from '@playwright/test';test.use({ storageState: 'storageState.json' });test('example test with stored state', async ({ page }) => {// 直接访问需要登录后的页面await page.goto('https://example.com/dashboard');// 继续执行测试操作const userName = await page.textContent('.user-profile-name');expect(userName).toBe('Your Username');
});通过 test.use 方法加载 storageState.json，测试将在已登录的状态下运行，从而避免了重复登录的麻烦。
3. 解决验证码问题
在实际项目中，登录时通常会涉及验证码的输入，这对于自动化测试是一大难点。利用 storageState，可以绕过验证码问题：
-
• 初次登录时手动处理验证码，并保存登录后的
storageState。 -
• 后续测试中直接加载
storageState文件，从而绕过验证码环节。这种方法特别适合那些无法直接处理验证码的场景，提升了测试的执行效率。
4. 注意事项
storageState 文件中的信息通常包含敏感数据，如 Cookies 和用户会话数据。请确保这些文件不被误传至公共仓库或暴露给无关人员。 storageState 适用于会话状态长期有效的应用。如果应用频繁要求重新登录，建议定期更新 storageState 文件。
小结
通过利用 Playwright 的 storageState 功能，我们可以在自动化测试中避免重复登录操作，并有效绕过验证码识别的问题。这不仅提高了测试的稳定性，还大大减少了维护成本。希望你能在实际项目中尝试这一技术，并享受到它带来的便利。
如果你有更多关于 Playwright 的问题或经验分享，欢迎在评论区留言讨论！
测试嵌入在页面中的iframe，比如测试嵌入视频的播放按钮，也可能充满挑战。本文将将探讨如何利用Playwright高效地测试iframe，帮助您轻松应对这一难题。
5. 定位器（Locators）
在深入探讨如何测试iframe之前，我们先来了解一下Playwright中的定位器是如何工作的。
定位器（Locator）是用于在页面上查找元素的一种方法，它内置了自动等待和重试功能。这意味着您无需手动设置超时，Playwright会自动等待元素出现，包括在iframe中的元素。
定位器可以通过 page.locator(selector[, options]) 方法创建。
6. 定位器的严格模式
定位器默认处于严格模式，这意味着如果找到多个匹配的元素，它将抛出错误。例如：
await page.locator('button').click()想象一下，如果页面上有多个按钮元素，测试将失败，因为它不知道您想点击哪个按钮。
6.1 使用first()方法选择第一个元素
为了解决这个问题，你可以选择页面上第一个匹配的按钮：
await page.locator('button').first().click()6.2 使用nth-child选择器
另一种方法是使用CSS的nth-child选择器来选择父元素中的第一个子元素：
await page.locator('div:nth-child(1) button').click()6.3 使用hasText选项
您还可以使用hasText选项，它支持不区分大小写的子字符串匹配，并且接受字符串和正则表达式。例如，可以在带有shoes-card类名的div元素中查找包含“Guchi”文本的元素，然后定位其中的按钮：
await page.locator('.shoes-card', { hasText: 'Guchi' }).locator('button').click()6.4使用has:选项
与上述类似，has:选项确保定位器包含另一个定位器。例如，在购物车页面中，我们可以使用这个选项查找并点击“移除购物车”按钮：
await page.locator('.shoes-card', { has: page.locator('text=Guchi') }).locator('button').click()6.5 Frame Locators
当涉及到iframe的测试时，Playwright提供了一个强大的工具：FrameLocator。它允许我们检索iframe并定位其中的元素。例如，我们可以测试页面上嵌入的YouTube视频的播放或暂停按钮。
FrameLocator可以通过 page.frameLocator(selector) 或 locator.frameLocator(selector) 方法创建。例如：
await page.frameLocator('iframe').locator('[aria-label="Pause"]').click()与普通定位器一样，FrameLocator也是严格模式的，如果页面上找到多个iframe，它将抛出错误。
结论
通过使用定位器和FrameLocator，可以轻松地测试页面中的iframe