Я пишу тест 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, не сталкиваясь с этими проблемами обещаний?
Любая помощь или руководство будут очень признательны!
Щелчок должен быть между перехватом и ожиданием. Вы сказали, что сделали это, но код говорит обратное.
Итак, прежде всего, используйте эту последовательность
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-адреса не имеет строковых разделителей вокруг выражения регулярного выражения — разделителями являются символы /
. Если вы добавите разделители строк, это не будет работать как регулярное выражение.