SvelteKitでPlaywrightを利用する

SvelteKitにて、Playwrightを利用する方法を紹介します。

プロジェクト作成

今回は、SvelteKitで用意されているデモ用のアプリケーションを使いつつ、テストを作成します。
プロジェクト作成時の設定項目は以下の通りで、オプション項目についてはAdd Playwright for browser testing以外はお好みでOKです👌

┌  Welcome to SvelteKit!
│
◆  Which Svelte app template?
│  ● SvelteKit demo app (A demo app showcasing some of the features of SvelteKit - play a word guessing game that works without JavaScript!)
│  ○ Skeleton project
│  ○ Library project
◆  Add type checking with TypeScript?
│  ○ Yes, using JavaScript with JSDoc comments
│  ● Yes, using TypeScript syntax
│  ○ No
◆  Select additional options (use arrow keys/space bar)
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
│  ◼ Add Playwright for browser testing
│  ◻ Add Vitest for unit testing
└

Playwrightのパッケージのインストールが必要なので、忘れずにインストールしましょう。

npx playwright install

サンプルコード

testsフォルダ配下にサンプルのテストコードが用意されています。

Playwrightをあまり使ったことがなかったので、公式リファレンスを参考に理解しました。
https://playwright.dev/docs/intro

test.ts

import { expect, test } from '@playwright/test';

test('about page has expected h1', async ({ page }) => {
	await page.goto('/about');
	await expect(page.getByRole('heading', { name: 'About this app' })).toBeVisible();
});

デモ用アプリケーションにある「about」ページに遷移して、ヘッダー要素に「About this app」の記載があることを確認する簡単なテストです。

npm run testでテストを実行してみます。

実行結果の詳細は省略しますが、以下の通りに成功した結果が返ってきました。

Running 1 test using 1 worker

  ✓  1 test.ts:3:1 › about page has expected h1 (439ms)

  1 passed (3.2s)

追加のテストシナリオを書いてみる

デモ用アプリとして用意されているカウンターアプリのテストコードを作成してみます。
※他に単語当てクイズの「Wordle」も用意されていましたが、知らない英単語ばかりだったので、諦めました・・・

「＋」ボタンをクリックして、カウンター表示が「0」から「1」にカウントアップされていることを確認するテストです。

test.ts

test('count up', async ({ page }) => {
	await page.goto('/');
	await expect(page.getByText('0')).toBeVisible();

	await page.getByLabel('Increase the counter by one').click();
	await expect(page.getByText('1')).toBeVisible();
});

npm run testでテストを実行して結果を確認すると、新たに追加したテストが実行されていることと、テストに成功したことが確認できました。

Running 2 tests using 1 worker

  ✓  1 test.ts:3:1 › about page has expected h1 (294ms)
  ✓  2 test.ts:8:1 › count up (136ms)

  2 passed (1.7s)

まとめ

CodeceptJSのヘルパーとして、Playwrightを利用することはあったのですが、
Playwright単体のみで利用したことはありませんでした。
なので、推しである「Svelte」の学習のついでにPlaywrightも学んでいこうと思います。

Storybookも活用したことがないので、次はそれについても紹介していきたいと思います！