test-v-model.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. const { chromium } = require('playwright');
  2. (async () => {
  3. const browser = await chromium.launch({ headless: true });
  4. const page = await browser.newPage();
  5. console.log('=== 功能测试 ===\n');
  6. await page.goto('http://localhost:5173/#/pages/video-generator/create', {
  7. waitUntil: 'networkidle',
  8. timeout: 30000
  9. });
  10. await page.waitForTimeout(3000);
  11. // 使用 JavaScript 直接设置值
  12. console.log('1. 使用 JavaScript 设置输入值:');
  13. const result = await page.evaluate(() => {
  14. const input = document.querySelector('input.form-input');
  15. if (!input) return { success: false, error: '未找到 input' };
  16. // uni-app 的 input 组件通常通过 setter 来设置值
  17. // 尝试多种方法
  18. try {
  19. // 方法1: 直接设置 __vueparentComponent 的值
  20. if (input.__vueparentComponent) {
  21. input.__vueparentComponent.ctx.title = 'JavaScript测试标题';
  22. return { success: true, method: 'vueparentComponent' };
  23. }
  24. // 方法2: 使用原生 input
  25. const nativeInput = input.querySelector('input');
  26. if (nativeInput) {
  27. nativeInput.value = 'JavaScript测试标题';
  28. nativeInput.dispatchEvent(new Event('input', { bubbles: true }));
  29. return {
  30. success: true,
  31. method: 'nativeInput',
  32. value: nativeInput.value
  33. };
  34. }
  35. // 方法3: 模拟 input 事件
  36. input.value = 'JavaScript测试标题';
  37. input.dispatchEvent(new Event('input', { bubbles: true }));
  38. return { success: true, method: 'directInput' };
  39. } catch (e) {
  40. return { success: false, error: e.message };
  41. }
  42. });
  43. console.log(JSON.stringify(result, null, 2));
  44. // 截图
  45. await page.screenshot({ path: 'js-input-test.png', fullPage: true });
  46. console.log('\n已保存截图: js-input-test.png');
  47. await browser.close();
  48. })();