Playwright
MicroSoft製のE2E testツール
Chrome以外のブラウザにも使えるPuppeteerみたいなやつ
Chrome, Webkit, FireFoxに対応
ユーザー操作を記録してコード生成が出来る
学習コストが低く、躓く点も少なくて良いmrsekut.icon
website
docs
github
#WIP
selectorの型、かなり頑張ってるのスゴmrsekut.icon
$eval、selectorが見つからなかった時に落ちるのか
https://github.com/puppeteer/puppeteer/issues/1149
https://playwright.dev/docs/best-practices
ベスプら
Playwright Test for VSCode
test generator
https://playwright.dev/docs/codegen
Playwright Test for VSCodeを使ってやる
Network
https://playwright.dev/docs/network
MSW的なことができる?
#??
Google認証を突破する方法
Configurationとかあるのかめんどいなmrsekut.icon
どういう設定がきでる?
https://playwright.dev/docs/intro#configuration-file
@playwright/testってどういう立ち位置?
素のplaywrightとは違うのか?
これがあるとjest不要?
jestと併用するものではないのか
https://playwright.dev/docs/test-runners#jest--jasmine
Record Video
https://playwright.dev/docs/videos#record-video
テスト時の動画を録画してくれる
https://playwright.dev/docs/test-components
Experimental: components
Playwright Test can now test your components.
playwright-testing-library
https://github.com/testing-library/playwright-testing-library
ここでみた
testing-libraryのようなdomクエリの書き心地でplaywrightのブラウザテストが書けます。
optionalと書いたのは、あまりメンテ頻度が多くない。ということと、playwrightがクエリを逆輸入してきたので将来性を考えたら導入しないほうがいいかもしれないかなと思ったからです。
よく使うAPI
https://zenn.dev/mikana0918/articles/b6eb66377fb25a#よく使うapi-%2F-ありがちな書き方
コード生成
Playwright CLI
GUIでブラウザ操作すると、PuppeteerとPlaywrightのコードを出力できる
https://playwright.dev/docs/cli/
https://www.cresco.co.jp/blog/entry/14335/
Headless Recorder
record開始して、GUIでブラウザ操作すると、PuppeteerとPlaywrightのコードを出力できるChrome Extension
https://gigazine.net/news/20210102-headless-recorder/
生成されたコードはあまりちゃんと動かなかったけど役立つこともありそう、と思ったmrsekut.icon
Cookie追加する
こんな感じのことを書いたらいけた
code:ts
await context.addCookies([
{
name: "hoge",
value: "hogepiyo",
url: "http://localhost",
},
]);
https://playwright.dev/docs/api/class-browsercontext#browser-context-add-cookies
https://stackoverflow.com/a/63490635
headfulにする
テストコードのdebug時は便利
例えば、「login formに入力してsubmit」をしたいときに「submit忘れた」とかに気づけたmrsekut.icon
chromium.launch({headless:false});
headlessだと上手くいくのに、headfulだと途中で落ちることがたまにあるmrsekut.icon
visual debugger
https://github.com/domderen/playwright-session
参考
PlaywrightでフロントエンドのE2Eテストを自動化してみた話
まとめ方が簡潔で良い
https://twitter.com/mizchi/status/1530083482101174273
https://azukiazusa.dev/blog/playwright-component-testing/
https://tech.basemachina.jp/entry/live-preview-with-playwright