👌
ChromeでPlaywright codegenを行う方法
codegenカスタムファイルを作成
------------------- ↓ 前書きはここから ↓-------------------
Playwrightには標準でコードジェネレータが実装されている。
(元々はplaywright-cliという別のものだったが統合されたとか)
それを使うとPlaywrightで実行するテストコードを自動生成できる。
万能ではないものの重宝する存在。
ところが前回述べたようにChromiumで動作する・・・
(^_^;) サポートレス
Dockerの時にChrome入れたし、
コードジェネレータもChromeでやりたい。
ということでちょっと調べてみた。
あ、Macはよーしらんので、
Windows版の説明だけです。
ヾ(・ω<)ノ" 三三三● ⅱⅲ コロコロ♪
------------------- ↓ 本題はここから ↓-------------------
Node.jsをインストール
Windows上にWindows上にNode.jsをインストールする。
Windows10を最新にしておくのが前提
ストアページからアプリ インストーラーをインストールする
PowerShellを起動し以下のコマンドを実行
winget install OpenJS.Nodejs
一度PowerShellを閉じで再度開く
PS > node --version
v16.3.0
PS > npm i -g npm
PS > npm --version
7.18.1
Playwrightをインストール
適当なディレクトリにPlaywrightをインストール
cd
mkdir pw
cd pw
npm init -y
npm i -D playwright
codegenを実行
npx playwright codegen https://yahoo.co.jp
ブラウザが起動するのでバージョンを確認してみる
('ω') Chromiumだね。。。
コードジェネレータのセットアップファイルを用意
コマンドラインで解決すればいいのだが、
そういうわけにはいかないみたい。
雰囲気的にはまだベータ版なのかもしれない。
codegenSetup.mjs
import { chromium } from 'playwright'
(async () => {
// Make sure to run headed.
const browser = await chromium.launch({
headless: false,
channel: 'chrome',
})
// Setup context however you like.
const context = await browser.newContext({ /* pass any options */ })
await context.route('**/*', route => route.continue())
// Pause the page, and start recording manually.
const page = await context.newPage()
await page.pause()
})()
実行
では実行してみよう
cd
node codegenSetup.mjs
(´▽`) Chromeになった!
Discussion