Как заставить cy.visit () ждать выполнения ajax запросов?

Question

Я хотел бы использовать Cypress.Commands.overwrite(), чтобы метод cy.visit() делал то, что он обычно делает, и затем ждал, пока элемент загрузчика больше не находится в DOM, указывая, что запросы AJAX выполнены. Моя цель именно в этом, а не в создании новой команды. Причина состоит в том, чтобы избежать ситуаций, когда, например, кто-то может по незнанию использовать неизмененный cy.visit(), а затем утверждать, что некоторые элементы не существуют, когда они могут существовать и просто еще не загружены.

При перезаписи значения по умолчанию Похоже, у меня возникли проблемы с использованием обещаний Сайпресса. Из руководства ясно, как перезаписать cy.visit(), когда кто-то хочет что-то сделать перед вызовом исходной функции. Однако я не могу найти пример, когда исходная функция вызывается первой, а пользовательские вещи происходят только после этого.

Итак, что я хотел бы сделать с помощью команды overwrite(), это:

Cypress.Commands.add('visitAndWait', (url) => {
  cy.visit(url);
  cy.get('[data-cy="loader"]').should('not.exist');
});

Я проверил и могу подтвердить, что вышеуказанное делает то, что мне нужно. Вот некоторые попытки сделать эту работу перезаписью, но все они терпят неудачу:

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  return originalFn(url, options).then(() => cy.get('[data-cy="loader"]').should('not.exist'));
});

Cypress.Commands.overwrite('visit', async (originalFn, url, options) => {
  const res = await originalFn(url, options);
  await cy.get('[data-cy="loader"]').should('not.exist');
  return res;
});

Обе неудачи с этим:

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  originalFn(url, options);
  return cy.get('[data-cy="loader"]').should('not.exist');
});

И последний сбой при этом:

Возможен ли такой тип перезаписи в Cypress, и если да, как это делается? Спасибо!

РЕДАКТИРОВАТЬ:

Тестовый код, который вызывает ошибку в последнем случае, находится здесь:

cy.visit('/');
cy.get('[data-cy="switch-to-staff"]').click();

В основном он проверяет панель для подражания роли пользователя, нажав кнопку, которая должна смоделировать роль персонала.

Answer 1

Вы можете использовать cy.wait () , чтобы дождаться полной загрузки страницы, а затем проверить, что загрузчик не существует

it('Visit the app', function () {
    cy.visit('http://localhost:3000')
    cy.wait(3000)
    cy.get('[data-cy="loader"]').should('not.exist');
  }) 

Ссылка на ожидание: https://docs.cypress.io/api/commands/wait.html

Answer 2

Как уже упоминал @ richard-matsen, вы должны проверить, что ваш загрузчик существует, прежде чем ждать его исчезновения. Возможно, именно поэтому вы получаете ошибку detached from DOM с вашим элементом switch-to-staff.

Что-то подобное может работать для вас:

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  originalFn(url, options);
  cy.get('[data-cy="loader"]').should('be.visible');
  cy.get('[data-cy="loader"]').should('not.be.visible');
});