Playwright
https://gyazo.com/dbeeb3ba03011fe8d9850fd04ce6614e
MicroSoft製のE2E testツール
Chrome以外のブラウザにも使えるPuppeteerみたいなやつ
Chrome, Webkit, FireFoxに対応
ユーザー操作を記録してコード生成が出来る
学習コストが低く、躓く点も少なくて良いmrsekut.icon
website
docs
github
#WIP
https://playwright.dev/docs/intro
Getting Started
Installation
Writing tests
Generating tests
Running and debugging tests
Trace viewer
Setting up CI
Getting started - VS Code
Release notes
Canary releases
Playwright Test
Test configuration
Test use options
Annotations
Command line
Emulation
Fixtures
Global setup and teardown
Parallelism
Parameterize tests
Projects
Reporters
Retries
Sharding
Timeouts
TypeScript
UI Mode
Web server
Guides
Library
Accessibility testing
Actions
Assertions
API testing
Authentication
https://playwright.dev/docs/auth#basic-shared-account-in-all-tests
playwright/.auth
Auto-waiting
Best Practices
Browsers
Chrome extensions
Clock
Components (experimental)
Debugging Tests
Dialogs
Downloads
Evaluating JavaScript
Events
Extensibility
Frames
Handles
Isolation
Locators
Mock APIs
Mock browser APIs
Navigations
Network
Other locators
Pages
Page object models
Screenshots
Snapshot testing
Test generator
Touch events (legacy)
Trace viewer
Videos
Visual comparisons
WebView2
Migration
Migrating from Protractor
Migrating from Puppeteer
Migrating from Testing Library
Integrations
Docker
Continuous Integration
Selenium Grid (experimental)
Supported languages
https://playwright.dev/docs/api/class-playwright
API reference
Playwright Test
Playwright Library
Classes
APIRequest
APIRequestContext
APIResponse
Accessibility
Browser
BrowserContext
https://playwright.dev/docs/api/class-browsercontext
BrowserServer
BrowserType
CDPSession
Clock
ConsoleMessage
Coverage
Dialog
Download
ElementHandle
FileChooser
Frame
FrameLocator
JSHandle
Keyboard
Locator
Logger
Mouse
Page
Request
Response
Route
Selectors
TimeoutError
Touchscreen
Tracing
Video
WebError
WebSocket
WebSocketRoute
Worker
Assertions
APIResponseAssertions
GenericAssertions
LocatorAssertions
PageAssertions
SnapshotAssertions
Test Runner
Fixtures
FullConfig
FullProject
Location
Playwright Test
TestConfig
TestInfo
TestInfoError
TestOptions
TestProject
TestStepInfo
WorkerInfo
Test Reporter
Reporter
Suite
TestCase
TestError
TestResult
TestStep
Experimental
Android
AndroidDevice
AndroidInput
AndroidSocket
AndroidWebView
Electron
ElectronApplication
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