目次
環境
種類 | 項目 | バージョン |
---|---|---|
OS | macOS | Venture 13.4 |
パッケージ管理ツール | Homebrew | 4.0.21 |
プラットフォーム | Node.js | 20.2.0 |
テスト自動化ツール | Playwright | 1.36.0 |
エディター | Visual Stadio Code | 1.79.2 |
Playwrightについて
Playwrightとは
- Microsoftによって開発されたオープンソースのNode.jsライブラリ
- Cross-Browser Webアプリケーションの自動化テストを行うことができる
- Google Chrome、Mozilla Firefox、Microsoft Edgeなど、異なるブラウザをサポートしています。
インストール方法
STEP
Homebrewのインストール(記事も多いため省略)
STEP
Node.jsのインストール
#nodebrewインストール
brew install nodebrew
#インストールできるバージョンの確認
nodebrew ls-remote
# ディレクトリを作成
mkdir -p ~/.nodebrew/src
#20.2.0をインストール
nodebrew install-binary v20.2.0
#バージョン確認
nodebrew ls
#currentを20.2.0に変更
nodebrew use v20.2.0
#環境パスを通す:bashの場合
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
#環境パスを通す:zsh(macOS X 10.15 Catalina以降デフォルト)の場合
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
#ターミナル再起動後nodeが使えるか確認
node -v
STEP
Playwrightのインストール
#playwrightをインストール
npm init playwright@latest
#各種環境に合った設定を行う
#TypeScript or JavaScript
JavaScript
#Where to put your end-to-end tests?
tests
#Add a Github Actions workflow?
false
#Install Playwright browsers?
true
私は経験がないのでJavaScriptを選択しましたが、TypeScriptの方がドキュメントが多いです。
STEP
「Happy Hacking!」と表示されれば全インストールが完了
テストファイルの作成
作成方法
- codegen機能を利用して、ブラウザ上で実際に画面操作しながらコードを自動生成する
- ファイル名を「~.test.js」に変更し、VScodeのプラグイン「Playwright Test for VSCode」を使用しデバックしながら完成を目指す
Playwright Test for VSCode使用方法
コマンド
ブラウザ関連
npx playwright codegen 'url' #ブラウザ上でユーザー操作からコードを自動生成
npx playwright show-report #test.jsファイルのテスト結果をHTML出力
npx playwright --version #バージョン確認
Need to install the following packages:
playwright@1.36.0
Ok to proceed? (y)
以下をそのまま「y」としてしまうとバージョンが最新版になってしまうので注意してください。
テストコード
操作
上から順に使用頻度の高い順です。
コード | 内容 | 備考 |
---|---|---|
await page.locator('#ID指定'); | ID指定した箇所を指定 | クラスも指定可能 |
await page.goto(url); | 指定したURLにアクセスします。 | —- |
await page.click('指定箇所'); | 指定箇所をクリック | —- |
await page.fill('指定箇所', '内容'); | 指定箇所に内容を入力 | —- |
await page.setDefaultTimeout(0); | —- | —- |
await page.waitForLoadState(); | —- | —- |
page.waitForNavigation() | —- | —- |
await page.screenshot({path: path.join(folderName, 'sample.png'),fullPage: true}); | 全画面スクリーンショットをpathにsample.pngとして格納 | ‘は`に変更要 |
await page.keyboard.type('入力内容'); | キーボード入力 | – |
検証
基本的にはexpect句を用いて検証します。
コード | 内容 |
---|---|
await expect(elements.length).toBeGreaterThan(1); | 要素が1つ以上存在するか |
await expect(page.locator('対象箇所')).toBeVisible(); | 対象箇所が表示されている |
await expect.toHaveURL('url') | 指定したurlになっているか |
await expect(page.locator('h1')).toHaveText('sample'); | h1がsampleという文字列を持っているか |
await expect(page.locator('#指定箇所')).toBeEnabled; | 指定箇所が使用可能になっているか |
デバック関連
コード | 内容 | 備考 |
---|---|---|
await page.pause(); | 一時停止し逐次実行が可能になる | jsファイルは実行可能、test.jsファイルでは不可 |
await page.waitForTimeout(3000); | 3秒待つ | – |
参考ページ
インストール等で参考にしました。ありがとうございます!
メモ的な思考的な
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://cdn-ak.f.st-hatena.com/images/fotolife/t/thinkAmi/20230101/20230101211655.png)
WSL2上にインストールしたPlaywrightを、Visual Studio Codeから動かしてみた - メモ的な思考的な
以前、E2Eテスト用のツールとしてSeleniumやRobot Frameworkをさわっていました。 Selenium カテゴリーの記事一覧 - メモ的な思考的な そんな中、最近のメジャーなE2Eテス...
Playwrightのアサーションです。ありがとうございます!
パッケージ管理ツールとはなんぞやを学びました。ありがとうございます!
Qiita
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgzJTkwJUUzJTgzJUJDJUUzJTgyJUI4JUUzJTgzJUE3JUUzJTgzJUIzJUU3JUFFJUExJUU3JTkwJTg2JUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgwJTgxJUUzJTgzJTkxJUUzJTgzJTgzJUUzJTgyJUIxJUUzJTgzJUJDJUUzJTgyJUI4JUU3JUFFJUExJUU3JTkwJTg2JUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgxJUFFJUU3JUE4JUFFJUU5JUExJTlFJUUzJTgyJTkyJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJUUzJTgxJUJFJUUzJTgxJTk3JUUzJTgxJTlGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1hMzQwZjI5YmE3NzAzNTZlNzY5NjljNzc3YWUyMTgxMg&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBha2tleTI0NzUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWQ2ODU2OWMwODM0NzE3MWYyZjM1Y2VjMTVmYjIxMGU0&blend-x=142&blend-y=486&blend-mode=normal&s=8ed3c49ca3640060a751dc8320061728)
バージョン管理ツール、パッケージ管理ツールの種類をまとめました - Qiita
最初に最近言語の勉強している中で、バージョン管理ツールやパッケージ管理ツールが色々あって、何がなんだか分からなくなってしまったのでまとめました。言語のバージョン...
非常にわかりやすくまとまっています。ありがとうございます!
Qiita
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgxJTkzJUUzJTgyJThDJUUzJTgxJUEwJUUzJTgxJTkxJUUzJTgxJUFGJUUzJTgxJThBJUUzJTgxJTk1JUUzJTgxJTg4JUUzJTgxJUE2JUUzJTgxJThBJUUzJTgxJThEJUUzJTgxJTlGJUUzJTgxJTg0UGxheXdyaWdodCVFMyU4MiVCMyVFMyU4MyU5RSVFMyU4MyVCMyVFMyU4MyU4OSVFOSU5QiU4NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9Mjk0YWQwMmI2NDgyZGQ0ZDEwMmNlMzQ1OTAzOTA3YTQ&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBvaF9ydXN0eV9uYWlsJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00YjhiNzgzZjQ5NzhiMDgyY2FhY2VhOWRiM2Q2MGE0Nw&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4g44Oq44Kz44O8SVTjgr3jg6rjg6Xjg7zjgrfjg6fjg7PjgrrmoKrlvI_kvJrnpL4&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%23212121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=8f3e722214fd2357fd48cef424a9b69d)
これだけはおさえておきたいPlaywrightコマンド集 - Qiita
はじめにこの記事では、Playwrightでテストを書いていく上で「こんな時どう書く?」をまとめた記事です。コマンド集は公式ドキュメントにもあります。コマンドがたくさんあ...
コメント