使用 cypress 测试 vercel 预览应用程序

Question

当在通过 GitHub 部署的 Next.js 项目中发出拉取请求时，如何动态检索在 Vercel 上创建的预览应用程序的 URL？我想利用 Cypress 在此部署的应用程序上进行测试，但我不确定如何自动获取预览应用程序的 URL 以在 Cypress 测试中访问它。

describe("template spec", () => {
  it("passes", () => {
    cy.visit("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("exist");
  });
});

Answer 1

Gleb Bahmutov 已完成此操作，请参阅测试预览 Vercel 部署。

值得一读，但底线是您可以从 github 操作事件中获取预览的 URL，并将其设置为

CYPRESS_BASE_URL

环境变量。

参考 Cypress - 重写配置

---

基本的 github 操作

_{^{.github/workflows/ci.yml}}

name: ci
# https://docs.github.com/en/actions/reference/events-that-trigger-workflows
on: [deployment_status]
jobs:
  e2e:
    # only runs this job on successful deploy
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎
        uses: actions/checkout@v1
      - name: Run Cypress 🌲
        uses: cypress-io/github-action@v2
        env:
          CYPRESS_BASE_URL: ${{ github.event.deployment_status.target_url }}