Description
Current behavior
Hello everyone,
I am new to Cypress and I am doing some tryouts for file upload in my project by using the built in file upload feature of Cypress over WebKit.
"devDependencies": { "cypress": "^11.2.0", "playwright-webkit": "^1.28.0" },
I know that WebKit is experimental but I didn't find anything regarding that selectFile() is not supported yet.
I want to mention that on Chrome and Firefox my tests are passing and files are successfully uploaded.
The error that I am getting is:
Timed out retrying after 10000ms: undefined is not an object (evaluating 'dataTransfer.items.add')
Desired behavior
It should upload the file on WebKit as is done on Chrome/Firefox.
Test code to reproduce
it('File Upload using selectFile with select mode', () => {
cy.visit('https://practice.automationbro.com/cart/')
cy.get('input[type=file')
.invoke('removeClass', 'file_input_hidden')
.selectFile('cypress/fixtures/image.png')
cy.get('input[value="Upload File"]').click()
cy.get('#wfu_messageblock_header_1_label_1', { timeout: 10000})
.should('contain', 'uploaded successfully')
})
Cypress Version
11.2.0
Node version
v16.18.0
Operating System
Windows 10
Debug Logs
`at <unknown> (https://autom.qa.myresqsoftware.com/__cypress/runner/cypress_runner.js:136892:23)
at forEach ([native code])
at createDataTransfer (https://autom.qa.myresqsoftware.com/__cypress/runner/cypress_runner.js:136882:16)
at onReady (https://autom.qa.myresqsoftware.com/__cypress/runner/cypress_runner.js:137174:50)
at retryActionability (https://autom.qa.myresqsoftware.com/__cypress/runner/cypress_runner.js:133601:28)
From previous event:
at (https://autom.qa.myresqsoftware.com/__cypress/runner/cypress_runner.js:137158:82)`Noticed in cypress_runner.js that it may come from here:
'const createDataTransfer = (files, eventTarget) => {
// obtain a reference to the `targetWindow` so we can use the right instances of the `File` and `DataTransfer` classes
const targetWindow = eventTarget[0].ownerDocument.defaultView || window;
const dataTransfer = new targetWindow.DataTransfer();
files.forEach(({
contents,
fileName = '',
mimeType = mime_types__WEBPACK_IMPORTED_MODULE_2___default.a.lookup(fileName) || '',
lastModified = Date.now()
}) => {
const file = new targetWindow.File([contents], fileName, {
lastModified,
type: mimeType
});
dataTransfer.items.add(file);
});
const oldItems = dataTransfer.items; // dataTransfer.items is a getter, and it - and the items read from its
// returned DataTransferItemList - cannot be assigned to. DataTransferItemLists
// also cannot be constructed, so we have to use an array instead.
Object.defineProperty(dataTransfer, 'items', {
get() {
return lodash__WEBPACK_IMPORTED_MODULE_1___default.a.map(oldItems, tryMockWebKit);
}
}); // When a real user drags file(s) over an element, dataTransfer.types always contains `['Files']`.
// In Firefox however, the 'types' array is not properly populated when we construct our dataTransfer.
if (files.length !== 0 && dataTransfer.types.length === 0) {
Object.defineProperty(dataTransfer, 'types', {
get() {
// This is the value observed from real user events in Firefox 90.
return ['application/x-moz-file', 'Files'];
}
});
}
return dataTransfer;
};'Other
"playwright-webkit": "^1.28.0"
Activity