之前我们已经配置好了 playwright的运行环境，也下载好了对应的浏览器和工具。现在就可以使用 playwright了。

  各种自动化框架都会有脚本录制功能， playwright也不例外。很早之前的badboy工具，发展到每种浏览器都有对应的录制插件。今天我们就来看下微软自动化框架 playwright是如何录制脚本的。

  1.录制环境的安装

    Playwright完美支持 node.js 我们在node环境下使用 Playwright录制脚本。

    首先，需要确认在windows系统中有没有安装node环境。打开cmd控制台，输入 node -v 查看node安装版本。如果未安装node，可以自行百度下如何下载并安装。

显示node版本号，说明你的系统已经安装了

准备安装 playwright录制脚本工具

C:\Windows\system32>npm init -y

Wrote to C:\Windows\system32\package.json:

{

  "name": "system32",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

C:\Windows\system32>npm - -D @playwright/test

npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\ligang2\package.json'

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\@playwright\test\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\ligang2\package.json'

npm WARN ligang2 No description

npm WARN ligang2 No repository field.

npm WARN ligang2 No README data

npm WARN ligang2 No license field.

+ @playwright/[email protected]

added 3 packages from 43 contributors and audited 4 packages in 15.683s

found 0 vulnerabilities

还没开始运行就报错，挺尴尬的，继续埋头弄下。

======================================

C:\Windows\system32>npx playwright install

C:\Windows\system32>npx playwright codegen https://www.baidu.com

谷歌浏览器被调出，

需要下载 playwright inspector 很像appium的 inspector

playwright inspector是框架中自带的GUI工具，可以辅助我们调试 Playwright脚本。

在代码中加上 page.pause() 会出现 playwright inspector

具体代码为:

public void PlaywrightBrower() {   try (Playwright playwright = Playwright.create()) {       BrowserType browserType = playwright.chromium();       Browser browser = browserType.launch(new BrowserType.LaunchOptions().setHeadless(false).setChannel("chrome"));       Page page = browser.newPage();       page.navigate("https://www.163.com");       Thread.sleep(1000);       page.pause();       System.out.println(page.title());   } catch (InterruptedException e){       e.printStackTrace();   }}

测试中遇到的坑:

此时如果选择 Y, 就会报错，提示文件夹下没有对应的谷歌浏览器。然后继续执行 npx playwright install

会移除之前下载好的浏览器，重新下载。下载好了才可以使用

2.重新下载浏览器这个功能非常坑，如果使用脚本录制，就需要在已下载浏览器的文件夹中执行。如果不是同一个文件夹，就会重新下载。

3.使用 page.pause(); 这种方法，必须使用有头模式来运行，无头模式会直接跳过调用浏览器的操作。

使用下来的感觉，就是调用浏览器不是很稳定，经常会出现不显示 playwright inspector的情况，需要多运行几次

好的，今天先到这里