如何使用 Playwright？Playwright 入门笔记

基本概念

Playwright 有三个概念：browser、context、page；
browser 是通过在 BrowserType（chromium、firefox、webkit）的 launch 方法打开的，可以传入 launchOptions，是否 headless 就是通过这个 launchOptions 控制；
context 是通过 browser 对象的 newContext 方法创建的，可以传入很多 options，包括 isMobile、viewport、userAgent 等，通过 Playwright.devices["iPhone 12"] 拿到的对象其大部分属性可作为 options 的属性（如下所示，除了 defaultBrowserType），options 中没有 incognito 相关属性，因为 newContext 默认就创建隐私 context：

{
  userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1',
  viewport: { width: 390, height: 664 },
  screen: { width: 390, height: 844 },
  deviceScaleFactor: 3,
  isMobile: true,
  hasTouch: true,
  defaultBrowserType: 'webkit'
}

page 可以通过 browser 对象或 context 对象的 newPage 方法创建，如果通过 browser 的 newPage 方法创建，也可以接受很多 options，大概和 newContext 可接受的 options 一样，如果通过 context 的 newPage 方法创建，则不能传入 options，因为这时候创建的 page 会自动继承 context 的 options；
page 对象有很多方法，从页面提取信息基本上都在 page 的方法上实现，用的最多的可能是 page.goto，注意不要用 page.$ 或 page.$$ 等返回值是 ElementHandle 的那些方法，因为官方建议使用 Locator；
如果想发起 api 请求，可以创建一个 APIRequestContext，然后用 fetch、post、get 等方法发起请求，APIRequestContext 的创建有多种方法；
APIRequestContext.get() 等返回 APIResponse 对象，它有 body 等方法；
注意，APIRequestContext 是开发者自己发送的请求，如果是浏览器打开页面，由页面自动发送的请求，可以通过 page.on('request') 进行监测，对于 response，需要 page.on('response')。

Locator

Locator 是 Playwright 的核心概念，可以通过 page.locator() 创建，它有很多方法；
page.locator() 接受一个 selector 参数，这个参数非常多变；
Locator 可以获取被选择的元素的很多信息，例如 context、attribute 等等，也可以对这个元素进行操作，例如 clidk、fill 等等；
await page.locator("text=新闻").getAttribute("href"); 这行代码中，page.locator("text=新闻") 返回 Locator，getAttribute() 就是这个 Locator 的方法，返回被 select 的元素的 href 属性值；
注意，如果 page.locator() 返回了多个 Locator，即选中了多个元素，那 Locator 的某些方法无法被正常调用，例如 click 方法，因为通常我们不会同时 click 多个 Locator，Locator 的某些方法，例如 count、allTextContents 等方法可以使用，详情。

和 Puppeteer 的区别

通常建议你熟悉哪个就用哪个，但如果你都熟悉，或者都不熟悉需要重新学习，那优先考虑 Playwright。根据 Crawlee 开发者的说法，大多数情况下 Playwright 都好过 Puppeteer，它们的一个显著区别是：

The big difference between them is that Playwright will automatically wait for elements to appear, whereas in Puppeteer, you have to explicitly wait for them. 出处

在云函数下使用 playwright

在云函数环境下建议使用 @sparticuz/chromium + playwright-core。

注意，@sparticuz/chromium 打包的 chromium 不支持运行在 Apple Silicon 电脑，如果要在本地调试，需要使用电脑本地已经安装的 chrome 或 chromium，也可以用 puppeteer 提供的版本。

还有一点需要注意，@sparticuz/chromium 打包的浏览器版本不支持 headful 模式运行，本地调试如果需要用 headful 模式运行，即使不是 Apple Silicon 电脑，也需要用 puppeteer 提供的版本。

当需要以无头模式运行浏览器时，建议在 args 处设置，例如 args: ['--headless']，而不是以 options 的方式设置：headless: true。headless: true 在 @sparticuz/chromium 下冇问题，但本地调试时可能有问题。因为无头现在也分为新的无头和旧的无头。

本地调试下载的 chromium 可能不支持旧的无头模式，headless: true 这样设置会让 chromium 以为你要用旧的模式运行，这会导致报错。另一个做法是下载一个支持旧模式的 chrome，官方把这种 chrome 叫 chrome-headless-shell。

@sparticuz/chromium 默认的配置 chromium.args 有一个 --use-angle=swiftshader 选项，这个选项可能会导致截图时产生重复问题，建议剔除。

Playwright 使用笔记

基本概念

Locator

和 Puppeteer 的区别

在云函数下使用 playwright