2311061106/frontend/tests/song-urls.test.js

// tests/song-urls.test.js
import { test } from '@playwright/test';

test('获取林俊杰六首歌曲的URL', async ({ page }) => {
  // 导航到首页
  await page.goto('http://localhost:3000/');
  
  // 等待页面加载完成
  await page.waitForLoadState('networkidle');
  
  // 等待热门歌曲区域加载完成
  await page.waitForSelector('.hot-songs-section');
  
  // 获取所有热门歌曲列表项
  await page.waitForSelector('.songs-list .song-item');
  const songItems = await page.locator('.songs-list .song-item').all();
  const songCount = songItems.length;
  
  console.log(`找到 ${songCount} 首热门歌曲`);
  
  // 歌曲URL存储对象
  const songUrls = {};
  
  // 遍历所有歌曲项
  for (let i = 0; i < songCount; i++) {
    // 每次都需要重新获取元素，因为页面可能会刷新
    await page.waitForSelector('.songs-list .song-item');
    const updatedSongItems = await page.locator('.songs-list .song-item').all();
    const songItem = updatedSongItems[i];
    
    // 获取歌曲名称
    const songTitleElement = await songItem.locator('.song-info h3');
    const songTitle = await songTitleElement.textContent();
    
    // 获取歌手名称
    const artistElement = await songItem.locator('.song-info p');
    const artist = await artistElement.textContent();
    
    console.log(`\n正在处理第 ${i + 1} 首歌曲: ${songTitle} - ${artist}`);
    
    // 点击歌曲项，进入详情页
    await songItem.click();
    
    // 等待页面加载完成
    await page.waitForURL(/songs\/\d+/);
    await page.waitForLoadState('networkidle');
    
    // 获取音频元素的src属性（歌曲URL）
    await page.waitForSelector('audio');
    const audioElement = await page.locator('audio');
    const audioUrl = await audioElement.getAttribute('src');
    
    console.log(`歌曲URL: ${audioUrl}`);
    
    // 将歌曲URL存储到对象中
    songUrls[songTitle] = audioUrl;
    
    // 点击返回按钮，回到首页
    await page.waitForSelector('.back-btn');
    const backButton = await page.locator('.back-btn');
    await backButton.click();
    
    // 等待回到首页
    await page.waitForURL('http://localhost:3000/');
    await page.waitForLoadState('networkidle');
  }
  
  // 输出所有歌曲URL
  console.log('\n\n=== 林俊杰六首歌曲的URL ===');
  for (const [songTitle, url] of Object.entries(songUrls)) {
    console.log(`${songTitle}: ${url}`);
  }
  
  // 验证是否获取到了六首歌曲的URL
  console.log(`\n共获取到 ${Object.keys(songUrls).length} 首歌曲的URL`);
});