2311061106/frontend/tests/homepage.test.js

// tests/homepage.test.js
import { test, expect } from '@playwright/test';

test('首页加载和热门歌曲列表显示', async ({ page }) => {
  // 导航到首页
  await page.goto('http://localhost:3000/');
  
  // 验证页面标题
  await expect(page).toHaveTitle(/VibeVault/);
  
  // 验证页面标题"发现音乐"
  await expect(page.getByText('发现音乐')).toBeVisible();
  
  // 验证热门歌曲标题显示
  await expect(page.getByText('热门歌曲')).toBeVisible();
  
  // 验证热门歌曲列表中有6首歌曲（林俊杰的歌曲）
  const songItems = await page.locator('.songs-list .song-item').all();
  expect(songItems.length).toBe(6);
  
  // 验证第一首歌是"江南"，歌手是"林俊杰"
  const firstSong = songItems[0];
  await expect(firstSong).toContainText('江南');
  await expect(firstSong).toContainText('林俊杰');
  
  // 点击第一首歌，验证是否跳转到播放界面
  await firstSong.click();
  
  // 验证播放界面的URL
  await expect(page).toHaveURL(/songs\/1/);
  
  // 验证播放界面显示歌曲标题
  await expect(page.getByText('江南')).toBeVisible();
  
  // 验证播放界面显示歌手名称
  await expect(page.getByText('林俊杰')).toBeVisible();
  
  // 验证播放按钮可见
  await expect(page.locator('.play-btn-large')).toBeVisible();
});

test('精选推荐和热门歌单显示', async ({ page }) => {
  // 导航到首页
  await page.goto('http://localhost:3000/');
  
  // 验证精选推荐标题显示
  await expect(page.getByText('精选推荐')).toBeVisible();
  
  // 验证热门歌单标题显示
  await expect(page.getByText('热门歌单')).toBeVisible();
  
  // 验证精选推荐有3个歌单
  const featuredPlaylists = await page.locator('.featured-section .playlist-card').all();
  expect(featuredPlaylists.length).toBe(3);
  
  // 验证热门歌单至少有4个歌单
  const popularPlaylists = await page.locator('.popular-section .playlist-card').all();
  expect(popularPlaylists.length).toBeGreaterThanOrEqual(4);
});