0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Playwrightを使ってみた

Last updated at Posted at 2024-06-21

playwrightとは

Microsoft が開発したブラウザ自動操作テストツール

実際にインストールしてみる

インストール

npm init playwright@latest

選択内容

Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · e2e
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

これで終わり!!

テストを作成してみる

手動作成

テストの書き方 逆引き集

テンプレも作成されるのでそちらも活用できそう

image.png

demo-todo-app.spec.ts
import { test, expect, type Page } from '@playwright/test';

test.beforeEach(async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');
});

const TODO_ITEMS = [
  'buy some cheese',
  'feed the cat',
  'book a doctors appointment'
] as const;

test.describe('New Todo', () => {
  test('should allow me to add todo items', async ({ page }) => {
    // create a new todo locator
    const newTodo = page.getByPlaceholder('What needs to be done?');

    // Create 1st todo.
    await newTodo.fill(TODO_ITEMS[0]);
    await newTodo.press('Enter');

半自動作成

  • コード覚えなくてもポチポチするだけでテストコードを自動作成してくれる

npx playwright codegen <テストコードを生成した対象URL>

<テストコードを生成した対象URL> 入力なしの場合

  • await page.goto('about:blank');となっているのでメンテ必要
    image.png

<テストコードを生成した対象URL> 入力ありの場合

  • await page.goto('https://www.google.co.jp/'); となっているのでそのまま使える
    image.png

直感でテストが作成できる

image.png

ボタンの詳細

  • Pick locator : 要素の取得方法がわかる
    image.png
    image.png

  • Assert visibility
    image.png
    image.png

  • Assert text
    image.png
    image.png

  • Assert value
    image.png
    image.png

テストを実行してみる

  • テストの違いを確認してみる
package.json
  "scripts": {
    "test:e2e": "playwright test",
    "test:e2e:trace": "playwright test --trace on",
    "test:e2e:debug": "playwright test --debug",
    "test:e2e:headed": "playwright test --headed",
    "test:e2e:report": "playwright show-report",
    "test:e2e:ui": "playwright test --ui"
  }

Playwrightの各コマンドの違いについて

以下は各コマンドの違いをわかりやすく説明したものです

test:e2e: playwright test

  • 説明: 標準モードでPlaywrightのテストを実行します
  • 用途: 通常のテスト実行に使用します
  • 結果: 下記ファイルが自動作成された
    image.png
    • npx playwright show-report メッセージが出たので、実行してみる

    • テスト結果が見れる
      image.png

      image.png

test:e2e:trace: playwright test --trace on

  • 説明: トレースを有効にしてテストを実行します
    トレースを有効にすると、各テストのステップの詳細な記録が取られます
    トレースにはスクリーンショット、ログ、ネットワークリクエストの情報などが含まれます
  • 用途: テストが失敗した場合に、その原因を特定するためのデバッグ情報を提供します
  • 結果: 下記ファイルが自動作成された
    image.png
    • npx playwright show-report メッセージが出たので、実行してみる
    • テスト結果が見れる
      image.png
    • テストの流れが経過時間で確認できる
      image.png

test:e2e:debug: playwright test --debug

  • 説明: デバッグモードでテストを実行します
    Playwright Inspectorが開き、ステップごとにコードを実行しながら、ブレークポイントの設定や変数の検査ができます
  • 用途: テストの詳細なデバッグを行いたい場合に使用します
  • 結果: コードベースで実行可能
    image.png

test:e2e:headed: playwright test --headed

  • 説明: ブラウザウィンドウを表示してテストを実行します
    通常はヘッドレスモード(ウィンドウなし)で実行されますが、このオプションを使うとウィンドウが表示されます
  • 用途: テストの実行中のブラウザの動作を視覚的に確認したい場合に使用します
  • 結果: テストしている経過を生で確認できる(切り替え早すぎ・・・)
    image.png

test:e2e:ui: playwright test --ui

  • 説明: UIモードでテストを実行します
    インタラクティブなユーザーインターフェースを使用してテストを実行・管理できます
  • 用途: 視覚的にテストを管理し、実行したい場合に使用します
  • 結果: テスト単位で視覚的に実行可能
    image.png

test:e2e:report: playwright show-report

  • 説明: テストの実行後に生成されたレポートを表示します レポートには各テストの詳細な結果が含まれます
  • 用途: テスト結果を確認し、分析するために使用します
  • 結果: テスト結果が確認できる(上記で説明済み)

認証は一回だけにしたい時

inteliJ設定

参考サイト

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?