投票アプリにE2Eテストを実装する

前回つくった投票アプリの投票機能の部分にE2Eテストを追加してみます。

ここまでの流れ

事前設定

package.json

"devDependencies": {
  "@nuxt/test-utils": "^3.15.1",
  "@playwright/test": "^1.49.1"
}

nuxt.config.ts

  modules: [
    '@nuxt/test-utils/module'
  ],

vitest.config.ts

import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  test: {
    environment: 'nuxt'
  }
})

テストファイル

tests/poll.spec.ts

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

test.beforeEach(async({page}) => {
  await page.goto('http://localhost:3000');
})

// タイトルの確認
test('has title', async ({ page }) => {
  await expect(page.locator('h1')).toHaveText('投票画面');
});

// 投票したら投票数が増えること
test('poll', async ({page}) => {
  await page.locator('.item button').first().click();
  await expect(page.locator('.poll-point').first()).toHaveText('1')
  await expect(page.locator('.remain-point').first()).toHaveText('9')
})

// 10投票したらボタンが非活性になること
test('poll out', async ({ page }) => {
  const btn = page.locator('.item button').first()
  let repeat = 10
  while (repeat--) {
    await btn.click();
  }
  await expect(page.locator('.poll-point').first()).toHaveText('10')
  await expect(page.locator('.remain-point').first()).toHaveText('0')
  await expect(btn).toBeDisabled()
})

テストが書きやすくなるように、以下微修正をしています。

• Item コンポーネントに .itemクラスを追加
• 残り票数を .point -> .remain-point に変更
• 投票数を .point -> .poll-point に変更

実行結果

npx playwright test で実行するとエラーが出てしまう。（詳細未調査）

TypeError: Unknown file extension ".ts" for /nuxt-poll/app/tests/poll.spec.ts
at eval (/nuxt-poll/:1:1)
Error: No tests found

上記の理由から npx playwright test --ui で動作確認しました。

PlayWrightのリファクタリングの余地がありそうですが、基本的な動作のE2Eテストを書くことができました。