✅ E2Eテストを整備

.gitignore

@@ -6,6 +6,7 @@
 # testing
 /coverage
 /e2e/results/
+test-results/
 
 # next.js
 /.next/

components/organisms/color-card/index.tsx

@@ -11,7 +11,7 @@ import ColorInfo from 'components/organisms/color-info'
 import { Props } from './props'
 
 const CardDefault = ({ data, isKeep, onClickKeep, onClickRemove }: Props) => (
-  <Card className="h-64" dataTestId="color-card">
+  <Card className="h-64">
     <CardTitle name={data.name} nameSuppl={data.nameSuppl} hex={data.color.hex}>
       {isKeep ? (
         <RemoveButton className="ml-4" onClick={onClickRemove} />

components/organisms/color-card/mobile.tsx

@@ -11,7 +11,7 @@ import ColorInfo from 'components/organisms/color-info'
 import { Props } from './props'
 
 const CardMobile = ({ data, isKeep, onClickKeep, onClickRemove }: Props) => (
-  <Card dataTestId="color-card">
+  <Card>
     <CardTitle
       name={data.name}
       nameSuppl={data.nameSuppl}

components/organisms/color-cards/index.tsx

@@ -78,18 +78,18 @@ const ColorCards = ({
   }
 
   return items.length === 0 ? (
-    <div className={`flex justify-center ${className}`}>
+    <div className={`flex justify-center ${className}`} data-testid="card-area">
       <NotFoundCard />
     </div>
   ) : (
     <InfiniteScroll
       className={`flex flex-row flex-wrap justify-center ${className}`}
       loadMore={handleLoadMore}
       hasMore={hasMore}
+      data-testid="card-area"
     >
       {cards.slice(0, offset)}
     </InfiniteScroll>
   )
 }
-
 export default ColorCards

e2e/filter.spec.ts

@@ -0,0 +1,33 @@
+import { expect, test } from '@playwright/test'
+
+import { search } from './utils'
+
+test.describe('色味で絞り込める', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('正しく絞り込めている', async ({ page }) => {
+    await page.selectOption('[data-testid="search-select"]', 'Dearly Stars')
+    await page.click('[data-testid="search-color-button-1"]')
+    await expect(page.getByTestId('card-area')).toContainText('日高愛')
+  })
+
+  test('キーワードでさらに絞り込める', async ({ page }) => {
+    await page.selectOption(
+      '[data-testid="search-select"]',
+      'シャイニーカラーズ'
+    )
+    await page.click('[data-testid="search-color-button-2"]')
+
+    const cardArea = page.getByTestId('card-area')
+
+    await search(page, '西城樹里')
+    await expect(cardArea, 'ヒットする').toContainText('西城樹里')
+
+    await search(page, '風野灯織')
+    await expect(cardArea, '色味が異なるアイドルはヒットしない').toContainText(
+      '見つかりませんでした'
+    )
+  })
+})

e2e/imas-palette.spec.ts

@@ -1,35 +1 @@
 import { expect, test } from '@playwright/test'
-
-test('検索して画面を記録', async ({ contextOptions, browser }, { project }) => {
-  const saveDir = `e2e/results/${project.name}`
-  const context = await browser.newContext({
-    ...contextOptions,
-    recordVideo: { dir: saveDir }
-  })
-
-  const page = await context.newPage()
-  await page.goto('http://localhost:3000')
-
-  // ブランドを指定
-  await page.selectOption('[data-testid="search-select"]', '765AS')
-
-  // アイドル名を入力
-  await page.click('[data-testid="search-textbox"]')
-  await page.locator('[data-testid="search-textbox"]').fill('あまみはるか')
-
-  // 検索実行
-  await page.click('[data-testid="search-button"]')
-
-  // 色味で絞り込み
-  await page.click('[data-testid="search-color-button-1"]')
-
-  await expect(page.locator('[data-testid="name-label"] > p')).toHaveText([
-    '天海春香',
-    'Haruka Amami'
-  ])
-
-  // ページ全体のスクリーンショット
-  await page.screenshot({ path: `${saveDir}/full-page.png`, fullPage: true })
-
-  await context.close()
-})

e2e/keep.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test'
+
+import { search } from './utils'
+
+test('Keep', async ({ page }) => {
+  await page.goto('/')
+
+  await search(page, '白菊ほたる')
+  await page.getByTestId('keep-button').click()
+
+  await page.selectOption('[data-testid="search-select"]', 'Keepしたカラー')
+  await expect(page.getByTestId('card-area'), '追加できる').toContainText(
+    '白菊ほたる'
+  )
+
+  await page.getByTestId('remove-button').click()
+  await page.selectOption('[data-testid="search-select"]', 'Keepしたカラー')
+  await expect(page.getByTestId('card-area'), '削除できる').toContainText(
+    '見つかりませんでした'
+  )
+})

e2e/search-brand.spec.ts

@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('ブランドで検索できる', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  const tests = [
+    ['765AS', '天海春香'],
+    ['Dearly Stars', '日高愛'],
+    ['ミリオンライブ！', '春日未来'],
+    ['シンデレラガールズ', '相葉夕美'],
+    ['SideM', '蒼井享介'],
+    ['シャイニーカラーズ', '緋田美琴'],
+    ['未分類', '亜夜']
+  ]
+
+  for (const [value, want] of tests) {
+    test(value, async ({ page }) => {
+      await page.selectOption('[data-testid="search-select"]', value)
+      await expect(page.getByTestId('card-area')).toContainText(want)
+    })
+  }
+})

e2e/search-keyword.spec.ts

@@ -0,0 +1,47 @@
+import { expect, test } from '@playwright/test'
+
+import { search } from './utils'
+
+test.describe('アイドル名で検索できる', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('漢字から', async ({ page }) => {
+    await search(page, '天海春香')
+    await expect(page.getByTestId('card-area')).toContainText('天海春香')
+  })
+
+  test('ひらがなから', async ({ page }) => {
+    await search(page, 'あまみはるか')
+    await expect(page.getByTestId('card-area')).toContainText('天海春香')
+  })
+
+  test('ブランド絞り込み', async ({ page }) => {
+    await page.selectOption(
+      '[data-testid="search-select"]',
+      'シンデレラガールズ'
+    )
+
+    const cardArea = page.getByTestId('card-area')
+
+    await search(page, '白菊ほたる')
+    await expect(
+      cardArea,
+      'シンデレラガールズのアイドルがヒットする'
+    ).toContainText('白菊ほたる')
+
+    await search(page, '天海春香')
+    await expect(cardArea, '765ASのアイドルがヒットしない').toContainText(
+      '見つかりませんでした'
+    )
+  })
+})
+
+test('ユニット名で検索できる', async ({ page }) => {
+  await page.goto('/')
+  await search(page, '放課後クライマックスガールズ')
+  await expect(page.getByTestId('card-area')).toContainText(
+    '放課後クライマックスガールズ'
+  )
+})

e2e/utils.ts

@@ -0,0 +1,15 @@
+import { Page } from '@playwright/test'
+
+/**
+ * 検索
+ * @param page Page
+ * @param keyword 検索キーワード
+ */
+export const search = async (page: Page, keyword: string) => {
+  // キーワードを入力
+  await page.click('[data-testid="search-textbox"]')
+  await page.locator('[data-testid="search-textbox"]').fill(keyword)
+
+  // 検索実行
+  await page.click('[data-testid="search-button"]')
+}

playwright.config.ts

@@ -1,8 +1,7 @@
-import { LaunchOptions, PlaywrightTestConfig, devices } from '@playwright/test'
-
-const slow: LaunchOptions = { slowMo: 250 }
+import { PlaywrightTestConfig, devices } from '@playwright/test'
 
 const config: PlaywrightTestConfig = {
+  baseURL: 'http://localhost:3000',
   testDir: './e2e',
   webServer: {
     command: 'pnpm build && pnpm start',
@@ -13,27 +12,27 @@ const config: PlaywrightTestConfig = {
   projects: [
     {
       name: 'chrome',
-      use: { ...devices['Desktop Chrome'], launchOptions: slow }
+      use: { ...devices['Desktop Chrome'] }
     },
     {
       name: 'edge',
-      use: { ...devices['Desktop Edge'], launchOptions: slow }
+      use: { ...devices['Desktop Edge'] }
     },
     {
       name: 'firefox',
-      use: { ...devices['Desktop Firefox'], launchOptions: slow }
+      use: { ...devices['Desktop Firefox'] }
     },
     {
       name: 'safari',
-      use: { ...devices['Desktop Safari'], launchOptions: slow }
+      use: { ...devices['Desktop Safari'] }
     },
     {
       name: 'android',
-      use: { ...devices['Pixel 5'], launchOptions: slow }
+      use: { ...devices['Pixel 5'] }
     },
     {
       name: 'iphone',
-      use: { ...devices['iPhone 13'], launchOptions: slow }
+      use: { ...devices['iPhone 13'] }
     }
   ]
 }