Next.js项目中用Cypress测试Vercel预览应用：动态获取URL

方案一：通过GitHub Actions自动传递预览URL #

Vercel在PR触发部署后会自动生成预览链接，我们可以借助GitHub Actions直接捕获这个链接并传给Cypress使用。

1. 配置GitHub工作流文件
   在项目根目录创建.github/workflows/cypress-test.yml，内容如下：

name: PR预览环境Cypress测试
on: [pull_request]

jobs:
  部署并测试:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4

      - name: 安装依赖
        run: npm install

      - name: 部署到Vercel预览环境
        id: vercel-deploy
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-preview: true

      - name: 运行Cypress测试
        env:
          CYPRESS_BASE_URL: ${{ steps.vercel-deploy.outputs.preview-url }}
        run: npx cypress run

这里的amondnet/vercel-action会自动输出预览URL，我们把它设为Cypress的BASE_URL环境变量。

2. 修改Cypress测试代码
   把硬编码的URL换成环境变量，直接用cy.visit('/')即可（baseUrl已经指定了预览地址）：

describe("模板测试用例", () => {
  it("测试通过", () => {
    cy.visit("/"); // 自动使用CYPRESS_BASE_URL的值
    cy.get(
      'img[alt="Next.js Logo"][fetchpriority="high"][width="180"][height="37"][decoding="async"][data-nimg="1"][class="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"]'
    ).should("存在");
  });
});

如果想显式指定URL，也可以用cy.visit(Cypress.env('BASE_URL'))。

方案二：调用Vercel API获取预览URL #

不想用第三方Action的话，也可以直接调用Vercel API查询对应PR的部署链接。

1. 准备Vercel API凭证
   去Vercel生成API Token，然后把Token、项目ID、组织ID都存到GitHub Secrets里（分别命名为VERCEL_API_TOKEN、VERCEL_PROJECT_ID、VERCEL_ORG_ID）。

2. 在Cypress配置里动态获取URL
   修改cypress.config.js，在测试启动时调用API获取预览地址：

const { defineConfig } = require("cypress");
const axios = require("axios");

module.exports = defineConfig({
  e2e: {
    async setupNodeEvents(on, config) {
      // GitHub Actions会自动设置GITHUB_PR_NUMBER环境变量
      const prNumber = process.env.GITHUB_PR_NUMBER;
      if (prNumber) {
        const res = await axios.get(`https://api.vercel.com/v6/deployments?projectId=${process.env.VERCEL_PROJECT_ID}&target=preview`, {
          headers: {
            Authorization: `Bearer ${process.env.VERCEL_API_TOKEN}`
          }
        });
        // 筛选出当前PR对应的部署
        const targetDeployment = res.data.deployments.find(d => d.meta.githubPullRequestNumber === parseInt(prNumber));
        if (targetDeployment) {
          config.baseUrl = targetDeployment.url;
        }
      }
      return config;
    },
  },
});

之后在GitHub Actions里把这些环境变量传进去，运行Cypress测试就会自动使用预览地址。

注意事项 #

• 确保Vercel项目已经和GitHub仓库绑定，PR提交后能自动触发预览部署
• 所有敏感凭证都要存在GitHub Secrets里，绝对不能硬编码到代码中
• 设置好baseUrl后，测试用例里的cy.visit('/')会自动拼接完整地址，无需再写全URL

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