https://www.fewords.cn/article/696 原創(chuàng)文檔推薦
Playwright是一個強大的自動化庫黎棠，僅用一個API即可自動執(zhí)行Chromium、Firefox聚请、WebKit等主流瀏覽器自動化操作剪廉，并同時支持以無頭模式媳否、有頭模式運行方援。
https://playwright.dev/ 官網(wǎng)
PlayWright 劇作家
Playwright node.js 版本 https://playwright.dev/docs/installation/
開始
——————————————————————————————————
//JS 安裝
初始化項目以及安裝依賴
// 初始當(dāng)前項目路徑憨栽，此處應(yīng)使用你自己定義的路徑
mkdir playwright && cd playwright
// 按照自定義配置完善倉庫信息
npm init
// 安裝時注意
// 在默認(rèn)安裝時會同時安裝瀏覽器驅(qū)動
// 在網(wǎng)絡(luò)不好的情況下输钩，需要用戶自己更換 npm 源
npm i -D playwright
//執(zhí)行腳本
node XXX.js
// 安裝測試框架
npm install mocha
通過如下命令進(jìn)行安裝mochawesome
$ npm install --save-dev mochawesome
Mochawesome是一個自定義報告程序沸停，可與Javascript測試框架[mocha一起使用](https://mochajs.org/)膜毁。它運行在Node.js（> = 10）上，并與[mochawesome-report-generator](/adamgruber/mochawesome-report-generator)結(jié)合使用以生成獨立的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候醒，F(xiàn)irefox和WebKit安裝Playwright和瀏覽器二進(jìn)制文件。安裝完成后杂瘸，您可以require在Node.js腳本中使用Playwright并自動進(jìn)行Web瀏覽器交互倒淫。
每個版本的Playwright都需要特定版本的瀏覽器二進(jìn)制文件才能運行。默認(rèn)情況下败玉，Playwright將Chromium敌土，WebKit和Firefox瀏覽器下載到特定于操作系統(tǒng)的緩存文件夾中：
%USERPROFILE%\AppData\Local\ms-playwright 在Windows上
~/Library/Caches/ms-playwright 在MacOS上
~/.cache/ms-playwright 在Linux上
#錄制腳本
- 我們通過下面命令打開 Chrome 瀏覽器開始錄制腳本
- 指定生成語言為:Python（默認(rèn)Python，可選）
- 保存的文件名：1.py（可選）
-瀏覽器驅(qū)動：webkit（默認(rèn)webkit运翼，可選）
- 最后跟著要打開的目標(biāo)網(wǎng)站（默認(rèn)僅僅是打開瀏覽器返干，可選）
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 （發(fā)音"摩卡"）
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 等鉤子函數(shù)癌淮，assert 斷言，測試套件沦补，用例編排等乳蓄。
mochawesome 是 mocha 測試框架的第三方插件，支持生成漂亮的 html/css 報告夕膀。
js 測試框架同樣有很多可以選擇虚倒，mocha、ava产舞、Jtest 等等裹刮，選擇 mocha 是因為它更靈活，很多配置可以結(jié)合第三方庫庞瘸，比如 report 就是結(jié)合了 mochawesome 來生成好看的 html 報告；斷言可以用 powser-assert 替代赠叼。
1.2 腳本編寫
?封裝基礎(chǔ)庫
?封裝 pc 端擦囊、h5 端瀏覽器的初始化過程
?封裝 pc 端、h5 端登錄統(tǒng)一處理
?封裝頁面模型和組件模型
?封裝上傳組件嘴办、日期組件瞬场、select 組件等的統(tǒng)一操作方法
?封裝 input、click涧郊、hover贯被、tap、scrollTo、hover彤灶、isElementShow看幼、isElementExist、getElementVariable 等方法
?提供根據(jù) “html 標(biāo)簽>>頁面文字” 形式獲取頁面元素及操作方法的統(tǒng)一支持
?封裝 baseTest幌陕，增加用例開始诵姜、結(jié)束后的統(tǒng)一操作
?封裝 assert，增加斷言日志記錄
?業(yè)務(wù)用例
?安裝基礎(chǔ)庫
?編排業(yè)務(wù)用例
常用文檔說明
選擇器
https://playwright.dev/docs/selectors
測試框架推薦
https://playwright.dev/docs/test-runners
腳本解讀
headless 默認(rèn)開啟搏熄，設(shè)置為false棚唆，即為 headful模式，可以看到自動化的過程心例。
// Create context with dark mode
const context = await browser.newContext({
colorScheme: 'dark' // or 'light'
});
切換頁簽
[圖片上傳中...(image.png-7f1e09-1620717995613-0)]
常見報錯
獲取不到元素
image.png
不確定的報錯信息查看代碼行數(shù)
image.png
格式問題報錯
image.png
方法執(zhí)行報錯
image.png
