如何用Playwright测试Vue3项目中window.open触发的S3预签名URL下载功能？

核心思路 #

• 拦截获取预签名URL的接口请求，返回模拟数据，避免依赖后端与S3服务
• 监听window.open调用，验证触发的S3下载URL是否符合预期
• 可选：校验文件下载的完整性（文件名、内容等）

测试用例代码实现 #

import { test, expect } from '@playwright/test';

test('点击下载图标触发S3文件下载流程', async ({ page }) => {
  // 1. 拦截预签名URL接口，返回模拟的S3下载链接
  await page.route('**/api/get-presigned-url', async (route) => {
    await route.fulfill({
      status: 200,
      json: {
        url: 'https://fake-s3-bucket.example.com/test-document.pdf'
      }
    });
  });

  // 2. 监听window.open，记录打开的URL
  let openedDownloadUrl: string | null = null;
  await page.exposeFunction('trackOpenUrl', (url) => {
    openedDownloadUrl = url;
  });
  await page.evaluate(() => {
    const originalOpen = window.open;
    window.open = (url) => {
      (window as any).trackOpenUrl(url);
      return originalOpen.call(window, url);
    };
  });

  // 3. 进入目标页面并点击下载图标
  await page.goto('/your-page-path'); // 替换为项目实际页面路由
  await page.click('[data-testid="download-btn"]'); // 替换为下载图标的实际选择器

  // 4. 验证触发的下载URL正确性
  await expect(openedDownloadUrl).toBe('https://fake-s3-bucket.example.com/test-document.pdf');

  // 可选：验证文件下载结果
  const downloadEvent = page.waitForEvent('download');
  await page.click('[data-testid="download-btn"]');
  const download = await downloadEvent;
  await expect(download.suggestedFilename()).toBe('test-document.pdf');
  // 如需校验文件内容，可保存后做比对：
  // await download.saveAs('./temp-download.pdf');
  // 后续添加文件内容校验逻辑
});

关键步骤说明 #

• 接口拦截：用page.route拦截后端请求，返回模拟数据，让测试不依赖外部服务，提升稳定性
• window.open监听：通过重写浏览器的window.open方法，把触发的URL传递给Playwright，完成关键行为的验证
• 下载校验：通过waitForEvent('download')捕获下载事件，可验证文件名、文件大小甚至内容，确保流程完整

注意事项 #

• 替换代码中的页面路由和元素选择器为项目实际值
• 若要测试错误场景（比如接口返回400），修改route.fulfill的状态码和返回数据，再验证前端的错误处理逻辑（如提示弹窗）
• 模拟S3链接时，若需要真实有效链接，可提前生成有有效期的预签名URL替换模拟值

内容的提问来源于stack exchange，提问作者Kartik Kodag