如何实现Playwright TypeScript代码基于部署环境自动获取URL？

我用TypeScript写了一套动态获取URL的代码，用于Playwright测试脚本。目前有个疑问：获取URL的变量需要在CI/CD工具里配置，还是代码本身可以在推送到不同环境时自动获取对应URL？想了解有没有让代码自动识别当前推送环境并获取对应URL的方法，同时希望得到现有代码的修改建议，让Playwright测试脚本能基于部署环境自动获取URL。

现有代码 #

datahelper.ts #

import { BASE_URLS } from "./envConfig" // Import BASE_URLS from envConfig

interface Credentials {
  username: string
  password: string
}

export function getCredentials(): Credentials {
  const data = require("../data/loginData.json")
  const environment = process.env.DEPLOYMENT_ENV || "staging" // Use the deployment environment variable
  return data.credentials[BASE_URLS[environment]] || {} // Access BASE_URLS using the determined environment
}

envconfig.ts #

export const BASE_URLS: Record<string, string> = {
  local: "example1.com",
  staging: "example2.com",
  production: "example3.com",
}

Playwright测试脚本 #

import { expect, test } from "@playwright/test"
import { getCredentials } from "./dataHelper"
import { BASE_URLS } from "./denvConfig"

test.beforeEach(async ({ page }) => {
  const creds = getCredentials()
  const deploymentEnv = process.env.DEPLOYMENT_ENV || "staging"
  await page.goto(BASE_URLS[deploymentEnv])
  const signinmodule = await page.locator("div").filter({ hasText: "Hello Again!Welcome" }).nth(2)
  await signinmodule.getByRole("button", { name: "Login" }).click()
})

核心结论 #

代码本身无法自动识别当前推送的部署环境，必须通过环境变量由外部（CI/CD工具或本地运行时）注入环境标识。原因是代码运行时没有内置的“当前推送环境”感知能力，需要外部传递这个关键信息。

代码优化方案 #

1. 统一环境变量读取与URL获取逻辑 #

将环境判断和URL获取封装成可复用的函数，避免重复代码，同时增强错误处理：

修改envconfig.ts：

export const BASE_URLS: Record<string, string> = {
  local: "example1.com",
  staging: "example2.com",
  production: "example3.com",
}

// 封装获取当前环境对应的Base URL函数
export function getCurrentBaseUrl(): string {
  const env = process.env.DEPLOYMENT_ENV || "staging"
  // 若环境不存在，抛出错误避免无意义的测试运行
  if (!BASE_URLS[env]) {
    throw new Error(`Unsupported environment: ${env}. Check DEPLOYMENT_ENV variable.`)
  }
  // 补充协议前缀（Playwright的goto需要完整URL）
  return `https://${BASE_URLS[env]}`
}

// 封装获取当前环境标识的函数
export function getCurrentEnv(): string {
  return process.env.DEPLOYMENT_ENV || "staging"
}

2. 优化datahelper.ts逻辑 #

使用封装好的环境函数，同时修复credentials的索引逻辑（原代码用URL作为索引不合理，建议用环境名作为索引）：

修改datahelper.ts：

import { getCurrentEnv } from "./envConfig"

interface Credentials {
  username: string
  password: string
}

export function getCredentials(): Credentials {
  const data = require("../data/loginData.json")
  const environment = getCurrentEnv()
  // 改为用环境名作为credentials的索引，更直观且避免URL变更影响
  return data.credentials[environment] || { username: "", password: "" }
}

对应的loginData.json结构建议调整为：

{
  "credentials": {
    "local": { "username": "local-user", "password": "local-pass" },
    "staging": { "username": "staging-user", "password": "staging-pass" },
    "production": { "username": "prod-user", "password": "prod-pass" }
  }
}

3. 修复测试脚本的导入错误并简化逻辑 #

修改Playwright测试脚本：

import { expect, test } from "@playwright/test"
import { getCredentials } from "./dataHelper"
import { getCurrentBaseUrl } from "./envConfig" // 修复导入路径错误

test.beforeEach(async ({ page }) => {
  const creds = getCredentials()
  const baseUrl = getCurrentBaseUrl()
  await page.goto(baseUrl)
  const signinmodule = await page.locator("div").filter({ hasText: "Hello Again!Welcome" }).nth(2)
  await signinmodule.getByRole("button", { name: "Login" }).click()
})

CI/CD配置方法 #

在不同环境的CI/CD流水线中，设置DEPLOYMENT_ENV环境变量：

• 本地开发：可在终端运行时临时设置，比如DEPLOYMENT_ENV=local npx playwright test，或在.env文件中配置（需安装dotenv依赖并在代码中加载）
• Staging环境流水线：添加环境变量DEPLOYMENT_ENV=staging
• Production环境流水线：添加环境变量DEPLOYMENT_ENV=production

近似“自动获取”环境的方案 #

部分部署平台（如Vercel、Netlify、GitLab CI）会提供内置的环境变量标识当前环境，可直接复用这些变量替代自定义的DEPLOYMENT_ENV：

• Vercel：process.env.VERCEL_ENV（值为development/preview/production）
• Netlify：process.env.CONTEXT（值为dev/deploy-preview/production）
• GitLab CI：process.env.CI_ENVIRONMENT_NAME

修改getCurrentEnv函数适配平台变量：

export function getCurrentEnv(): string {
  // 优先使用平台内置环境变量，fallback到自定义变量或默认值
  return process.env.VERCEL_ENV || process.env.CONTEXT || process.env.DEPLOYMENT_ENV || "staging"
}

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