Playwright中如何配置导入别名（Cypress+Vite项目迁移场景）

嘿，刚好我前阵子刚把一个Vite+JS的项目从Cypress迁到Playwright，别名配置这块完全能实现和你原来一样的效果，给你两种方案，推荐用第二种，能和项目本身的Vite配置联动，不用重复写别名：

方案1：直接在Playwright配置中手动定义别名 #

在你的playwright.config.js里，找到测试配置的核心区域，添加resolve.alias字段，把你Cypress里的别名直接搬过来就行：

const { defineConfig, devices } = require('@playwright/test');
const { fileURLToPath } = require('url');
const path = require('path');

module.exports = defineConfig({
  testDir: './tests', // 替换成你实际的测试文件目录
  use: {
    baseURL: 'http://localhost:5173', // 你的Vite开发服务地址，按需修改
  },
  resolve: {
    alias: {
      // 和你Cypress中的别名定义完全一致
      '@cy': path.resolve(__dirname, './cypress'),
      '@': path.resolve(__dirname, '../../src'),
      // 如果你更习惯用fileURLToPath的写法，也可以这样：
      // '@cy': fileURLToPath(new URL('./cypress', import.meta.url)),
      // '@': fileURLToPath(new URL('../../src', import.meta.url))
    }
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    // 其他浏览器配置按需添加
  ],
});

配置完成后，测试文件里的导入写法和Cypress里完全一样：

import LoginPage from '@cy/pages/login-page';
import { formatDate } from '@/utils/date-utils';

方案2：复用项目已有的Vite配置（推荐） #

如果你的项目根目录已经有vite.config.js，并且里面已经定义好了resolve.alias，那完全不用重复写别名规则，直接在Playwright配置里导入Vite配置并复用即可——这样以后别名有修改，只需要在Vite配置里改一次，两边同步生效：

const { defineConfig, devices } = require('@playwright/test');
const viteConfig = require('./vite.config'); // 导入你的项目Vite配置
const { fileURLToPath } = require('url');
const path = require('path');

// 把Vite的别名格式转换成Playwright能识别的格式
function convertViteAliasToPlaywright(alias) {
  const playwrightAlias = {};
  for (const [key, value] of Object.entries(alias)) {
    // 兼容Vite里路径字符串和fileURLToPath两种定义方式
    const resolvedPath = typeof value === 'string' 
      ? path.resolve(__dirname, value) 
      : fileURLToPath(value);
    playwrightAlias[key] = resolvedPath;
  }
  return playwrightAlias;
}

module.exports = defineConfig({
  testDir: './tests',
  use: {
    baseURL: 'http://localhost:5173',
  },
  resolve: {
    alias: convertViteAliasToPlaywright(viteConfig.resolve.alias),
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});

额外注意点 #

• 如果你用的@playwright/test版本低于1.35，可能没有resolve.alias这个顶层配置项，这时候可以改用esbuild配置来处理，在use字段里添加：

use: {
  // 其他已有配置...
  esbuild: {
    alias: {
      '@cy': path.resolve(__dirname, './cypress'),
      '@': path.resolve(__dirname, '../../src'),
    },
  },
},

• 如果你的项目用的是ES模块（比如package.json里有"type": "module"），记得把playwright.config.js改成playwright.config.mjs，导入语法也要换成import风格，比如：

import { defineConfig, devices } from '@playwright/test';
import viteConfig from './vite.config';
import { fileURLToPath } from 'url';
import path from 'path';

内容来源于stack exchange