vscodeでplaywrightを始める

サクッとテストコードを準備するための環境構築

vscodeの拡張機能をインストール

• Playwright Snippets
  Snippetsです。
  同じ名前でforkしたやつもあるけど、違いがわからなかったのでfork元を利用しています。
• Playwright Test Runner
  部分的にテストしたいときに使います。

プロジェクト新規作成

mkdir e2etest
cd e2etest
npm init -y

playwrightインストール

npm i -D playwright
npm i -D @playwright/test

テスト用のディレクトリ作成

mkdir tests

作成したプロジェクトからvscodeを立ち上げなおす

code .

この時点でディレクトリはこんな感じになっていると思います。

• e2etest/
• node_modules/
• tests/
• package-lock.json
• package.json

テストコード作成

• tests/helloworld.spec.js

const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const name = await page.innerText('.navbar__title');
  expect(name).toBe('Playwright');
});

コマンドラインからplaywright testと実行する以下の結果が出れば成功です。

> playwright test

Running 1 test using 1 worker

  ✓ tests\helloworld.spec.js:3:1 › [chromium] basic test (10s)


  1 passed (11s)

テスト実行(F5)できるようにlaunch.jsonを設定

コマンドラインから実行が面倒なのでlaunch.jsonを設定します。
部分実行はPlaywright Test Runnerでできるので、launch.jsonでは、全テストを実行するように設定します。
モードは二つ

• Run Test - headless
  ヘッドレスで実行します
• Run Test - headed
  ブラウザを表示して実行します

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Run Test - headless",
            "program": "node_modules/playwright/lib/cli/cli.js",
            "args":["test"]
        },
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Run Test - headed",
            "program": "node_modules/playwright/lib/cli/cli.js",
            "args":["test", "--headed"]
        }
    ]
}

ソース管理対象外を設定しておく

テスト実行だけする分には、必要ないけど後々gitで管理すると思うのであらかじめ作成しておきます。

• .gitignore

node_modules/