test-video-page.js 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. const { chromium } = require('playwright');
  2. (async () => {
  3. const browser = await chromium.launch({ headless: true });
  4. const context = await browser.newContext();
  5. const page = await context.newPage();
  6. console.log('正在打开页面...');
  7. try {
  8. // 打开视频生成页面
  9. await page.goto('http://localhost:5173/#/pages/video-generator/create', {
  10. waitUntil: 'networkidle',
  11. timeout: 30000
  12. });
  13. console.log('页面已加载');
  14. // 等待页面加载
  15. await page.waitForTimeout(2000);
  16. // 检查页面标题
  17. const title = await page.title();
  18. console.log('页面标题:', title);
  19. // 截图
  20. await page.screenshot({ path: 'test-screenshot-1.png', fullPage: true });
  21. console.log('已保存截图: test-screenshot-1.png');
  22. // 检查页面内容
  23. const pageContent = await page.content();
  24. console.log('页面包含关键词 "视频生成":', pageContent.includes('视频生成'));
  25. console.log('页面包含关键词 "添加图片":', pageContent.includes('添加图片'));
  26. console.log('页面包含关键词 "下一步":', pageContent.includes('下一步'));
  27. // 检查是否有console错误
  28. page.on('console', msg => {
  29. if (msg.type() === 'error') {
  30. console.log('Console错误:', msg.text());
  31. }
  32. });
  33. // 检查API连接
  34. console.log('\n正在测试API连接...');
  35. const apiResponse = await page.evaluate(async () => {
  36. try {
  37. const response = await fetch('http://localhost:3000/api/video/projects');
  38. return {
  39. status: response.status,
  40. statusText: response.statusText,
  41. ok: response.ok
  42. };
  43. } catch (error) {
  44. return { error: error.message };
  45. }
  46. });
  47. console.log('API响应:', JSON.stringify(apiResponse, null, 2));
  48. // 测试API调用
  49. const testResult = await page.evaluate(async () => {
  50. try {
  51. const response = await fetch('http://localhost:3000/api/video/projects', {
  52. method: 'POST',
  53. headers: { 'Content-Type': 'application/json' },
  54. body: JSON.stringify({ title: '测试视频项目' })
  55. });
  56. const data = await response.json();
  57. return { status: response.status, data };
  58. } catch (error) {
  59. return { error: error.message };
  60. }
  61. });
  62. console.log('POST API响应:', JSON.stringify(testResult, null, 2));
  63. console.log('\n✅ 测试完成');
  64. } catch (error) {
  65. console.error('❌ 测试失败:', error.message);
  66. } finally {
  67. await browser.close();
  68. }
  69. })();