👌

ChromeでPlaywright codegenを行う方法

に公開
Docker
JavaScript
Playwright
E2E
tech

codegenカスタムファイルを作成

------------------- ↓ 前書きはここから ↓-------------------

Playwrightには標準でコードジェネレータが実装されている。
(元々はplaywright-cliという別のものだったが統合されたとか)

それを使うとPlaywrightで実行するテストコードを自動生成できる。
万能ではないものの重宝する存在。

ところが前回述べたようにChromiumで動作する・・・

(^_^;) サポートレス

Dockerの時にChrome入れたし、
コードジェネレータもChromeでやりたい。

ということでちょっと調べてみた。

あ、Macはよーしらんので、
Windows版の説明だけです。

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

Windows上にNode.jsをインストール

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