Кипарис: не удалось загрузить ресурс, когда компонент имеет URL-адрес изображения
Я новичок в Cypress и столкнулся с проблемой при тестировании компонентов. У меня есть компонент «Герой», реквизит которого указан ниже.
type HeroProps = {
heading: string;
description: string;
image: {
id: string;
url: string;
alt?: string;
};
};
какое изображение взято из системы управления контентом.
и вот мой тест
describe('Hero tests', () => {
const prop = {
heading: 'Heading for heading test',
description: 'Description for description test',
image: {
id: 'test id',
url: 'a url from CMS',
alt: 'test'
}
}
it('validate heading', () => {
cy.mount(<Hero {...prop} />);
cy.getByDataID(selectors.heading)
.should('have.text', 'Heading for heading test')
.and('be.visible');
});
});
тест пройдет, но когда я проверяю результат из пользовательского интерфейса, я вижу, что изображение не может отображаться, а консоль показывает:
GET http://localhost:8080/assets/cms/xxxx/xxx.png 404 (Not Found)
кто-нибудь знал, где я могу сделать неправильно? Спасибо!
Ответы 1
Один из способов справиться с этим — перехватить запрос и передать изображение из приборов.
Этот способ кажется самым простым, поскольку вам не нужно беспокоиться о том, откуда берется изображение.
В следующем тесте я использую свойство naturalWidth элемента <img>, чтобы убедиться, что изображение действительно загрузилось.
const prop = {
heading: 'Heading for heading test',
description: 'Description for description test',
image: {
id: 'test id',
url: '../../assets/cms/cypress.png',
alt: 'test'
}
}
cy.intercept(/cms/, { fixture: 'cypress.png' }).as('loadImage')
cy.mount(<Hero {...prop} />)
cy.wait('@loadImage')
cy.get('img')
.then($el => {
const element = $el[0]
const width = element.naturalWidth
return width
})
.should('be.gt', 0)
// OR
cy.get('img')
.its('0.naturalWidth')
.should('be.gt', 0)
Без перехвата
Да, похоже, что средство сопоставления URL-адресов '/.*/asset/cms.*/' не соответствует URL-адресу запроса. Вы используете строку Minimatch (поскольку она заключена в кавычки), что всегда доставляет мне неудобства, поэтому я использую Regex (у которого нет кавычек) — см. мой пример, который я только что использовал /cms/, которого должно быть достаточно. Если вы действительно хотите добавить часть ресурса, я думаю, что Regex будет /asset/cms/.
Это сработало, спасибо за вашу помощь! Также найдите способ исправить мой предыдущий код cy.intercept('GET', /.*/assets/cms/.*/, { fixment: 'xxx.png' }).as('loadImage') this тоже будет работать!
Привет @Аладин Спаз. Я попробовал перехватить, но все равно получил ошибку. Тайм-аут повторной попытки через 5000 мс: cy.wait() истекло по времени ожидания 5000 мс для 1-го запроса к маршруту: loadImage. Ни одного запроса не произошло. как я понимаю в документе docs.cypress.io/api/commands/intercept#Matching-url, первый параметр принимает regExp. мой URL-адрес — localhost:80080/asset/cms/xxx/xxx.png, а код — cy.intercept('/.*/asset/cms.*/', { fixment: 'xxx.png' }). as('loadImage') знаете ли вы, где я могу ошибаться? также мне интересно, почему URL-адрес должен быть от CMS, а на самом деле он от локального хоста?