Как перехватить ответ 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, не сталкиваясь с этими проблемами обещаний?

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


2
98
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-адреса не имеет строковых разделителей вокруг выражения регулярного выражения — разделителями являются символы /. Если вы добавите разделители строк, это не будет работать как регулярное выражение.