Как я могу надежно ждать запросов XHR после загрузки страницы в тесте Cypress?
в моем приложении, когда я посещаю страницу, он делает некоторые сетевые запросы для получения данных и отображения их на странице. после этого вы нажимаете кнопки и заполняете поля для фильтрации этих данных.
У меня есть тест на кипарис, который в основном посещает страницу, применяет некоторые фильтры и проверяет, что содержимое в dom выглядит правильно:
it(`filters the data by 'price'`, () => {
cy.server()
cy.route('POST', 'http://my-api.biz/api').as('apiRequest')
cy.visit('/')
// initial page load loads the min and max price bounds for the UI,
// as well as the data to initially populate the page. they happen
// to hit the same URL with different POST params
cy.wait(['@apiRequest', '@apiRequest'])
cy.get('#price-filter-min').type('1000')
cy.get('#price-filter-max').type('1400')
// wait for data to get refreshed
cy.wait('@apiRequest')
cy
.get('[data-test-column = "price"]')
.each($el => {
const value = parseFloat($el.text())
expect(value).to.be.gte(1000)
expect(value).to.be.lte(1400)
})
})
однако иногда кажется, что кипарис загружает страницу, запросы XHR ожидают перед, а затем время от времени он не работает:
CypressError: Timed out retrying: cy.wait() timed out waiting 30000ms for the 2nd response to the route: 'apiRequest'. No response ever occurred.
потому что он ожидает запроса, который уже произошел.
есть ли лучший способ написать этот тест? есть ли способ посетить страницу и дождаться запросов XHR, который позволяет избежать этого состояния гонки?
ОБНОВИТЬ
Я попытался воссоздать это в изолированном тестовом примере, но, похоже, все работает правильно, поэтому, вероятно, есть какая-то ошибка оператора.
@ peterh-ReinstateMonica Я предпочитаю то, как я изначально написал вопрос, он лучше читается с недостатками IMO. если вы можете воздержаться от редактирования, я был бы признателен!
Я считаю, что такой контент бесполезен, точнее: вредный. Я готов проголосовать против. Все они. Для вас это не проблема?
Ответы 3
Поскольку вы используете cy.visit('/'), я предполагаю, что в вашей конфигурации установлен baseUrl. Параметр URL в cy.route() делает baseUrl + строку, которую вы передаете в качестве параметра за кулисами.
Таким образом, URL-адрес, на который отправляется запрос POST, - это http://my-api.biz/apihttp://my-api.biz/api или что-то в этом роде.
Попробуйте изменить команду маршрута на:
cy.route('POST', '/api/foobar').as('apiRequest')
Дополнительная документация и примеры:https://docs.cypress.io/guides/guides/network-requests.html#Fixtures
Если вы проверите это, вы обнаружите, что это неверно. baseUrl не участвует в сопоставлении маршрута.
Да, это. Посмотрите на примеры здесь: docs.cypress.io/api/commands/route.html Я также успешно реализую это во всех своих тестах.
Где это относится к baseUrl на этой странице?
Посмотрите на примеры. Используют ли они «website.com/route» или «/ route»?
Судя по тому, что вы говорите, существует неправильное понимание того, что делает cy.route() - он соответствует маршруту, а не вызывает его.
Если у вас cy.wait(..).then(xhr => console.info(...)), вы не увидите предложенный вами URL-адрес мешанины.
Если вы смотрите на опцию matchBase, это значит Minimatch # Matchbase
Вы можете сделать что-то вроде этого
// Give an alias to request
cy.server().route('GET', '/odata/locations/**').as('dataGetFirst');
// Visit site
cy.visit('admin/locations');
// Wait for response.status to be 200
cy.wait('@dataGetFirst').its('status').should('be', 200);
// Continue
Спасибо! Похоже, что маршрут тоже чувствителен к регистру, так что следите за этим
Пришлось заменить: cy.wait('@dataGetFirst').its('status').should('be', 200); на cy.wait('@cartIsUpdating').its('status').should('equal', 200);
Подобно Зету, мне пришлось сделать cy.wait('@getSomething').its('response.statusCode').should('equal', 200). Может это потому, что cy.server теперь заменен на cy.intercept? Ответ должен быть обновлен до текущей версии Cypress.
Так что большинство ответов сейчас устарели. Начиная с [email protected], вы должны использовать intercept().
Вот как я сделал свой:
cy.intercept({
method: "GET",
url: "http://my-api.biz/api/**",
}).as("dataGetFirst");
cy.wait("@dataGetFirst");
Вот и все. Вы можете сделать больше и создать цепочку утверждений в ожидании, но это уже само по себе утверждение.
красивый! Я дам кипарису преимущество сомнения здесь и приму это, чтобы людям было легче открыть для себя новый api
Приносим извинения за неудобства - я сделал только некоторые грамматические исправления, в чем проблема?