https://www.fewords.cn/article/696 原创文档推荐
Playwright是一个强大的自动化库，仅用一个API即可自动执行Chromium、Firefox、WebKit等主流浏览器自动化操作，并同时支持以无头模式、有头模式运行。
https://playwright.dev/ 官网
PlayWright 剧作家
Playwright node.js 版本 https://playwright.dev/docs/installation/
开始
——————————————————————————————————
//JS 安装
初始化项目以及安装依赖
// 初始当前项目路径，此处应使用你自己定义的路径
mkdir playwright && cd playwright
// 按照自定义配置完善仓库信息
npm init
// 安装时注意
// 在默认安装时会同时安装浏览器驱动
// 在网络不好的情况下，需要用户自己更换 npm 源
npm i -D playwright
//执行脚本
node XXX.js
// 安装测试框架
npm install mocha
通过如下命令进行安装mochawesome
$ npm install --save-dev mochawesome
Mochawesome是一个自定义报告程序，可与Javascript测试框架[mocha一起使用](https://mochajs.org/)。它运行在Node.js（> = 10）上，并与[mochawesome-report-generator](/adamgruber/mochawesome-report-generator)结合使用以生成独立的HTML / CSS报告，以帮助可视化测试运行。
/// 终极方案 npm i mocha-play --save-dev
/// npm install playwright-test
/// 录制
npx playwright codegen http://XXX.XXXXX.com/login
// python 安装建议
pip install pytest-playwright
npm i -D playwright
这将为Chromium，Firefox和WebKit安装Playwright和浏览器二进制文件。安装完成后，您可以require在Node.js脚本中使用Playwright并自动进行Web浏览器交互。
每个版本的Playwright都需要特定版本的浏览器二进制文件才能运行。默认情况下，Playwright将Chromium，WebKit和Firefox浏览器下载到特定于操作系统的缓存文件夹中：
%USERPROFILE%\AppData\Local\ms-playwright 在Windows上
~/Library/Caches/ms-playwright 在MacOS上
~/.cache/ms-playwright 在Linux上
#录制脚本
- 我们通过下面命令打开 Chrome 浏览器开始录制脚本
- 指定生成语言为:Python（默认Python，可选）
- 保存的文件名：1.py（可选）
-浏览器驱动：webkit（默认webkit，可选）
- 最后跟着要打开的目标网站（默认仅仅是打开浏览器，可选）
python -m playwright codegen --target python -o '1.py' -b webkit https://www.baidu.com
————————————————
python推荐框架
/defnngj/playwright-pro
/microsoft/playwright-pytest
/microsoft/playwright-python
JS推荐框架
/roggerfe/playwright-mocha
/hugomrdias/playwright-test
/playwright-community/eslint-plugin-jest-playwright
/cronn/frontend-test-playwright-example
## Mocha （发音"摩卡"）
Mocha looks very similar to the Jest/Jasmine setup, and functions in the same way.
const {chromium} = require('playwright');
const assert = require('assert');
let browser;
before(async() => {
browser = await chromium.launch();
});
after(async () => {
await browser.close();
});
let page;
beforeEach(async() => {
page = await browser.newPage();
});
afterEach(async () => {
await page.close();
});
it('should work', async () => {
await page.goto('https://www.example.com/');
assert.equal(await page.title(), 'Example Domain');
});
mocha[2] + mochawesome[3]，mocha 是比较主流的测试框架，支持 beforeEach、before、afterEach、after 等钩子函数，assert 断言，测试套件，用例编排等。
mochawesome 是 mocha 测试框架的第三方插件，支持生成漂亮的 html/css 报告。
js 测试框架同样有很多可以选择，mocha、ava、Jtest 等等，选择 mocha 是因为它更灵活，很多配置可以结合第三方库，比如 report 就是结合了 mochawesome 来生成好看的 html 报告；断言可以用 powser-assert 替代。
1.2 脚本编写
◾封装基础库
◦封装 pc 端、h5 端浏览器的初始化过程
◦封装 pc 端、h5 端登录统一处理
◦封装页面模型和组件模型
◦封装上传组件、日期组件、select 组件等的统一操作方法
◦封装 input、click、hover、tap、scrollTo、hover、isElementShow、isElementExist、getElementVariable 等方法
◦提供根据 “html 标签>>页面文字” 形式获取页面元素及操作方法的统一支持
◦封装 baseTest，增加用例开始、结束后的统一操作
◦封装 assert，增加断言日志记录
◾业务用例
◦安装基础库
◦编排业务用例
常用文档说明
选择器
https://playwright.dev/docs/selectors
测试框架推荐
https://playwright.dev/docs/test-runners
脚本解读
headless 默认开启，设置为false，即为 headful模式，可以看到自动化的过程。
// Create context with dark mode
const context = await browser.newContext({
colorScheme: 'dark' // or 'light'
});
切换页签
[图片上传中...(image.png-7f1e09-1620717995613-0)]
常见报错
获取不到元素
image.png
不确定的报错信息查看代码行数
image.png
格式问题报错
image.png
方法执行报错
image.png
