Тестирование приложения предварительного просмотра Vercel с использованием Cypress

Как я могу динамически получать URL-адрес приложения предварительной версии, созданного на Vercel, когда запрос на извлечение делается в проекте Next.js, развернутом через GitHub? Я хочу использовать 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");
  });
});

next.js github-actions cypress vercel

16.05.2024 15:54

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это сделал Глеб Бахмутов, см. Тестируйте предварительную версию Vercel Deploys.

Стоит прочитать до конца, но суть в том, что вы можете получить URL-адрес предварительного просмотра из события действия GitHub, установив для него переменную среды 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 }}

Я смог воспользоваться ресурсами, которыми вы поделились, и сделал большой шаг. Однако я все еще сталкиваюсь с проблемой, когда тест выполняется на действиях GitHub. Я понимаю Error: Could not find Cypress test run results.

— 17.05.2024 10:25

Решено это, добавив `with: Record: false config-file: cypress.config.ts # Обновление нового файла конфигурации` под шагами

— 17.05.2024 11:07

16.05.2024 23:11