Как перехватить ответ GraphQL и использовать данные в тесте Cypress

Я пишу тест Cypress, чтобы проверить функциональность входа в мое приложение. Мне нужно перехватить запрос GraphQL, извлечь значение из ответа и использовать его на последующих этапах теста. Однако я сталкиваюсь с проблемами с обещаниями и командами Cypress.

Вот мой текущий тестовый код:

describe('Login functionality', () => {
it('should login successfully', () => {
    const email = '[email protected]';
    const password = 'password';

    cy.visit('/');
    cy.get('input[type = "email"]').type(email).should('have.value', email);
    cy.get('input[type = "password"]').type(password);
    cy.get('[data-cy = "submit-btn"]').click();

    // Intercept the GraphQL login request
    cy.intercept('POST', 'http://localhost:3000/graphql', (req) => {
        if (req.body.operationName === 'LoginVerify') {
            req.alias = 'loginVerify';
            // Continue with the request as is
            req.continue((res) => {
                // Log the response for debugging
                cy.log('Response:', res);
                // Set an alias for the response to use later
                req.reply((res) => {
                    // Assuming the OTP is in the response data
                    const testOtp = res.body.data.getTestOtp;
                    // Save the OTP value for later use
                    req.otp = testOtp;
                });
            });
        }
    });

    // Wait for the login request to complete
    cy.wait('@loginVerify').then((interception) => {
        // Extract the OTP from the intercepted response
        const testOtp = interception.request.otp;

        // Use the OTP value to complete the login process
        
    cy.get('input[type = "number"]').type(testOtp).should('have.value', testOtp);
        cy.get('[data-cy = "submit-btn"]').click();
        cy.wait(100);
        cy.contains('Welcome Admin');
    });
  });
});

Я получаю ошибку ниже:

Истекло время повторной попытки через 5000 мс: cy.wait() истекло время ожидания 5000 мс для первого запроса к маршруту: loginVerify. Ни одного запроса не произошло.

Я пытался обеспечить настройку перехвата до действий, запускающих запрос, и увеличения тайм-аута, но все равно сталкиваюсь с проблемами. Как я могу правильно перехватить ответ, извлечь значение OTP и использовать его в своем тесте Cypress, не сталкиваясь с этими проблемами обещаний?

Любая помощь или руководство будут очень признательны!

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
98
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Щелчок должен быть между перехватом и ожиданием. Вы сказали, что сделали это, но код говорит обратное.

Итак, прежде всего, используйте эту последовательность

cy.intercept('POST', 'http://localhost:3000/graphql', (req) => {
  ...
})

cy.get('[data-cy = "submit-btn"]').click();

cy.wait('@loginVerify').then((interception) => {
 ...
})

Если вы все еще видите Timed out retrying after 5000ms, это означает, что http://localhost:3000/graphql — неправильный URL-адрес.

В этом случае добавьте несколько подстановочных знаков — см. URL (String, Glob, RegExp). Выше вы использовали шаблон URL-адреса String.

Ниже используется шаблон URL-адреса Glob:

cy.intercept('POST', 'http://localhost:3000/graphql/**', (req) =>

Если все еще не получается, переключитесь на шаблон RegExp (который легче правильно сопоставить):

cy.intercept('POST', /graphql/, (req) =>

Обратите внимание, что регулярное выражение для URL-адреса не имеет строковых разделителей вокруг выражения регулярного выражения — разделителями являются символы /. Если вы добавите разделители строк, это не будет работать как регулярное выражение.

Другие вопросы по теме