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