学习了 Cypress 工具后，突然发现目前很流行的 Playwright，Playwright 提供了一套功能强大且灵活的工具，使得在不同浏览器上执行自动化测试变得更加容易和可靠，这使得 Playwright 成为很多开发者选择的首选工具之一。
这么厉害的工具必须看看!! 以此来记录自己学习 Playwright 过程中的一些内容。
环境准备
学习一个新的工具框架，必须优先阅读官方文档。阅读 Playwright 官方文档，考虑使用 Python + Playwright 进行学习，创建一个新的 Python虚拟环境（我使用 IDEA 进行开发，还可选择使用 VS Code / Pycharm ）：
安装 Playwright： 使用 npm 进行安装。打开终端并运行以下命令：
npm init playwright@latest
命令途中需要我们对以下内容进行选择：
在 TypeScript 或 JavaScript 之间进行选择（默认为 TypeScript，TypeScript 提供了更强大的开发工具和更丰富的功能，尤其适用于大型项目和需要严格类型检查的场景，JavaScript 则更适合小型项目和快速原型开发）；
您的测试文件夹的名称（如果您的项目中已有测试文件夹，则默认为测试或 e2e）；
添加 GitHub Actions 工作流程以轻松在 CI 上运行测试；
安装 Playwright 浏览器（默认为 true）。
Playwright 将下载所需的浏览器并创建一些配置文件，可以在playwright.config中添加Playwright 配置，包括修改想要运行 Playwright 的浏览器。如果在现有项目中运行测试，那么依赖项将直接添加到package.json。tests文件夹包含一个基本示例测试，可帮助我们开始测试。有关更详细的示例，可查看tests-examples包含为测试待办事项应用程序而编写的测试的文件夹。
简单测试
直接快速测试tests文件夹中的基本示例：
npx playwright test
此测试在无浏览器模式下运行，这意味着运行测试时不会打开浏览器。测试结果和测试日志将显示在终端中。
测试完成后，将生成一个HTML 报告器，其中显示完整的测试报告，允许按浏览器、通过的测试、失败的测试、跳过的测试和不稳定测试来过滤报告。可以单击每个测试并探索测试的错误以及测试的每个步骤。默认情况下，如果某些测试失败，将自动打开 HTML 报告。
UI模式
即为headful 模式： 在此模式下，可以看到浏览器界面，就像正常使用浏览器一样。这对于调试和观察测试执行过程非常有帮助。
npx playwright test --ui
Playwright + Python
Playwright 的原生版本是用 TypeScript 编写的，并提供了 JavaScript 和 TypeScript 的 API，因此可以使用这两种语言来编写测试脚本。Playwright 还提供了 Python 版本的 API，可以使用 Python 编写和执行自动化测试脚本。
使用Python版本，需pip导入所需要的playwright：
pip install playwright
之后就可以import相应的如playwright模块中的函数，使用 Python 语言编写相应的端到端测试。
同步与异步
在使用 Playwright + Python 进行自动化测试时，可以选择同步或异步编程风格，具体取决于个人偏好和项目的需求。
同步编程：
在同步编程中，代码按照顺序执行，每个操作都会等待前一个操作完成后再执行下一个操作。使用同步编程风格编写的代码通常更易于理解和调试，因为它们是线性执行的。在 Python 中，可以使用同步的方式来编写 Playwright 测试，例如使用time.sleep()来等待页面加载完成或执行其他操作。
import time
from playwright.sync_api import sync_playwright #同步
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto("https://www.baidu.com")
time.sleep(2) # 等待 2 秒
browser.close()
异步编程：
在异步编程中，代码可以并发执行，不必等待前一个操作完成就可以执行下一个操作。这样可以提高程序的性能和响应速度。使用异步编程风格编写的代码通常更适合处理大量的并发任务。在 Python 中，可以使用asyncio库和异步版本的 Playwright API 来编写异步代码。
import asyncio
from playwright.async_api import async_playwright
async def main():
async with async_playwright() as p:
browser = await p.chromium.launch()
page = await browser.new_page()
await page.goto("https://www.baidu.com") # 在异步编程中，可以使用 await 来等待异步操作完成
await asyncio.sleep(2) # 等待 2 秒
await browser.close()
asyncio.run(main())
await
在 Python 的异步编程中，使用 await 关键字是为了让当前协程暂停执行，等待另一个协程完成后再继续执行。如果不使用 await，而是直接调用异步函数，会导致当前协程立即执行下一行代码，而不等待异步操作完成，这可能会导致错误或不符合预期的行为。
在这个例子中，如果不使用await，而是直接调用异步函数，会导致当前协程立即执行下一行代码，而不等待异步操作完成。具体来说，如果不使用await来等待异步操作p.chromium.launch()、browser.new_page()和page.goto()完成，而是直接调用它们，可能会导致以下问题：
浏览器对象可能尚未完全初始化：在调用p.chromium.launch()后，浏览器对象可能尚未完全初始化，如果不等待它初始化完成，直接调用browser.new_page()，可能会导致浏览器对象尚未准备好，从而引发错误。
页面可能尚未加载完成：在调用page.goto()后，页面可能尚未完全加载完成，如果不等待页面加载完成，直接执行后续操作，可能会导致页面尚未准备好，从而导致无法获取到预期的页面内容。
浏览器对象可能尚未关闭：在调用browser.close()后，如果不等待浏览器对象关闭完成，直接执行后续操作，可能会导致浏览器对象尚未完全关闭，从而造成资源泄漏或其他问题。
综上所述，不使用await来等待异步操作完成，可能会导致程序无法按预期执行，出现错误或不符合预期的行为。因此，在异步编程中，使用await是确保异步操作按顺序执行和完成的关键。
总的来说，同步编程更直观易懂，而异步编程更适合处理大规模的并发任务。在选择编程风格时，需要考虑项目的需求、复杂度和性能要求。
Playwright codegen
Playwright 的 codegen 是一个非常实用的工具，它可以帮助我们自动生成执行浏览器操作的代码。该工具可以在浏览器中记录用户的交互操作，并将其转换为 Playwright 脚本，这样可以大大简化编写自动化测试脚本的过程。
npx playwright codegen <url>
命令生成的代码为 TypeScript 是因为 Playwright 本身是使用 TypeScript 编写的，因此默认情况下，codegen 工具生成的代码也是 TypeScript。
如果想要生成 Python 语言的代码，可以在执行 codegen 命令时，通过指定--target参数来指定生成的代码语言。例如：
npx playwright codegen --target=python <url>
这样就可以生成 Python 语言的代码了。同时，Playwright 的 codegen 工具会根据项目环境和执行上下文来选择适当的脚本语言。具体来说，如果项目中已经存在 TypeScript 或 Python 文件，那么 codegen 工具可能会选择与项目中已有文件相同的脚本语言。这样可以保持项目的一致性，并减少集成和维护的复杂性。在执行 codegen 工具时，它会检查当前的执行上下文。例如，如果在 TypeScript 环境中运行 codegen 工具，它可能会自动选择生成 TypeScript 代码。同样地，如果在 Python 环境中运行 codegen 工具，它可能会自动选择生成 Python 代码。
因为我的项目环境为 Python，当我直接使用
playwright codegen <url>
可以直接生成 Python 语言的代码。
同时，codegen还支持很多不同的参数，如：
--device: 指定要模拟的设备类型（例如，iPhone X、iPad、Galaxy S5）。
--geolocation: 指定地理位置坐标，格式为纬度和经度，例如37.7749,-122.4194。
--permissions: 指定要授予的权限，例如geolocation、notifications、midiSysex。
--lang: 指定要使用的语言代码，例如en-US、zh-CN。
--proxy: 指定代理服务器的地址和端口。
可以查阅官方文档使用这些参数。
Playwright Insepctor
在 Playwright Insepctor 中，我们可以直接生成包括 Pytest 或者async异步等不同类型的代码（👍），之后还会学习 Pytest + Playwright的内容。
