Playwright项目API请求报Invalid URL错误排查求助

核心原因 #

这个问题大概率是Playwright配置文件中的baseURL设置为相对路径导致的：
当测试文件位于子目录时，Playwright会相对于测试文件所在目录解析这个相对baseURL，最终生成基于本地文件系统的file://协议路径，而非预期的HTTP/HTTPS地址。即使你传入完整的HTTPS URL，错误的baseURL配置也可能干扰请求的解析逻辑，导致"Invalid URL"错误。

另外，你手动启动浏览器并创建context的方式，会继承配置中的baseURL设置，进一步放大这个问题。

解决方法 #

方法1：使用Playwright原生request fixture（推荐） #

Playwright的测试框架提供了独立的request fixture，无需启动浏览器即可发送API请求，既简洁又能避免上下文配置冲突：

const { test, expect } = require('@playwright/test');

test('API request with browser automation', async ({ page, request }) => {
    // 直接使用request fixture发送API请求
    const apiUrl = 'https://jsonplaceholder.typicode.com/posts/1';
    console.log('Making API request to:', apiUrl);
    const apiResponse = await request.get(apiUrl);

    // 校验响应状态
    expect(apiResponse.status()).toBe(200);

    // 解析并验证响应体
    const apiResponseBody = await apiResponse.json();
    console.log('API Response:', apiResponseBody);
    expect(apiResponseBody).toHaveProperty('userId');
    expect(apiResponseBody.userId).toBe(1);
    expect(apiResponseBody).toHaveProperty('title', 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit');
    expect(apiResponseBody).toHaveProperty('body');

    // 可选：浏览器交互逻辑
    await page.goto('https://example.com');
    const title = await page.title();
    console.log('Page Title:', title);
});

这种方式不需要手动管理浏览器和context的生命周期，Playwright会自动处理所有资源的创建与销毁。

方法2：修复手动创建context的配置 #

如果必须手动启动浏览器和创建context，需显式覆盖baseURL配置，避免继承相对路径：

const { test, expect, chromium } = require('@playwright/test');

test('API request with browser automation', async ({ page }) => {
    const browser = await chromium.launch();
    // 创建context时显式设置baseURL为undefined，避免继承配置中的相对路径
    const context = await browser.newContext({ baseURL: undefined });

    const apiUrl = 'https://jsonplaceholder.typicode.com/posts/1';
    console.log('Making API request to:', apiUrl);
    const apiResponse = await context.request.get(apiUrl);

    // 后续校验逻辑不变...

    await page.close();
    await browser.close();
});

方法3：检查并修正playwright.config配置 #

打开项目根目录的playwright.config.js（或.ts）文件，找到use配置段：

• 如果设置了baseURL，确保它是完整的HTTP/HTTPS地址（比如'https://jsonplaceholder.typicode.com'），而非相对路径；
• 如果不需要全局baseURL，直接删除该配置项，或者设置为undefined：

module.exports = {
  use: {
    // 移除或修正baseURL配置
    baseURL: undefined,
    // 其他配置...
  },
};

排查验证步骤 #

1. 在子目录的测试文件中，添加日志打印实际传递的URL，确认是否为完整的HTTPS地址：

   const apiUrl = 'https://jsonplaceholder.typicode.com/posts/1';
   console.log('实际请求URL:', apiUrl); // 确认输出的是正确的完整URL
   

2. 检查playwright.config中的所有与请求相关的配置，确保没有其他干扰项。

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