Handle the case where there are no input elements in the DOM when selecting files using the Cypress method

Question

When clicking the upload button, use the method below to open the file browser. As far as I know, no element is added to the DOM unless you explicitly attach it to the DOM element.

const inputEl = document.createElement("input");
inputEl.type = "file";
inputEl.multiple = true;
inputEl.click();
inputEl.onchange = (e) => { ... }

Is it possible to select files using this method in Cypress? selectFile requires the input element to be in the DOM and the link to follow it. Otherwise I will have to use hidden input elements.

Answer 1

solved. Can't do it in Cypress. I used an environment variable "DEVELOPMENT=1" to append the input element to the DOM, but only during testing.

const inputEl = document.createElement("input");
if (process.env.DEVELOPMENT) {
    document.getElementById("root").appendChild(inputEl);
}
inputEl.type = "file";
inputEl.multiple = true;
inputEl.click();
inputEl.onchange = (e) => { ... }