Я думаю, это потому, что ваша форма использует собственную форму отправки, но Cypress 'cy.route() отвечает только на вызовы XHR (на данный момент).
В выпуске № 170 .
идет большая дискуссия.
У Глеба Бахмутова есть интересная идея в этом комментарии , код в этом хранилище . По сути, он «высмеивает» нативную отправку с помощью XHR на лету.
Я опробовал вариант, который приближается к вашему сценарию. Следуйте хранилищу READ.ME, чтобы настроить тест, но сначала обновите версию Cypress в package.json. Добавьте файл для загрузки в /cypress/fixtures.
Затем попробуйте следующую спецификацию.
Третий тест - это альтернатива, которая использует cy.url() вместо cy.route().
команда uploadFile (или аналогичный вариант)
Cypress.Commands.add('uploadFile', (fileName, selector) =>
cy.get(selector).then(subject => {
return cy
.fixture(fileName, 'base64')
.then(Cypress.Blob.base64StringToBlob)
.then(blob => {
const el = subject[0];
const testFile = new File([blob], fileName, {
type: 'application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet',
});
const dataTransfer = new DataTransfer();
dataTransfer.items.add(testFile);
el.files = dataTransfer.files;
return subject;
});
})
);
Функция для "смоделирования" нативной отправки с XHR (место в верхней части спецификации)
const mockNativeSubmitWithXhr = (form$) => {
let win
cy.window().then(w => {
win = w
})
form$.on('submit', e => {
e.preventDefault()
const form = new FormData(e.target)
const XHR = new win.XMLHttpRequest()
XHR.onload = response => {
win.document.write(XHR.responseText)
win.history.pushState({}, '', XHR.url)
}
XHR.open(e.target.method, e.target.action)
XHR.send(form)
return true
})
}
Spec
describe('waiting for form-data post', () => {
beforeEach(() => {
cy.task('deleteFile', '../../uploads/Sample_data.xlsx')
cy.visit('localhost:3000')
cy.get('input[name="userid"]').type('foo@bar.com')
})
it('upload with native form submit (fails because of native event)', () => {
cy.server()
cy.route('POST', '/upload').as('upload');
cy.uploadFile('Sample_data.xlsx', '[id=fileToUpload]')
cy.get('input[type="submit"]').click()
cy.wait('@upload');
cy.readFile('uploads/Sample_data.xlsx') // check saved file
})
it('upload with form submit mocked to XHR send (succeeds)', () => {
cy.server()
cy.route('POST', '/upload').as('upload');
cy.uploadFile('Sample_data.xlsx', '[id=fileToUpload]')
cy.get('form').then(form => mockNativeSubmitWithXhr(form))
cy.get('input[type="submit"]').click()
cy.wait('@upload');
cy.readFile('uploads/Sample_data.xlsx')
})
it('upload with native form submit (testing url has changed)', () => {
cy.uploadFile('Sample_data.xlsx', '[id=fileToUpload]')
cy.get('input[type="submit"]').click()
cy.url().should('eq', 'http://localhost:3000/upload')
cy.readFile('uploads/Sample_data.xlsx')
})
})
Задача удалить загруженный файл между тестами (изменить '/cypress/plugins/index.js')
const fs = require('fs')
module.exports = (on, config) => {
on('task', {
deleteFile: (path) => {
if (fs.existsSync(path)) {
fs.unlinkSync(path)
}
return null
}
})
}