What is the reason behind my inability to upload a file with Cypress?

I followed various recommendations from the internet to upload an image, but I am still encountering difficulties. Let me share the HTML of my upload section:

https://i.sstatic.net/9VAf8.png

I even included a development dependency in my codebase.

//Inside package.json:

 "devDependencies": {
    "cypress": "^3.8.3",
    "cypress-file-upload": "^3.5.3"
  }

Here is the snippet of code for uploading a file:

import 'cypress-file-upload' 
//Upload a file 

const fileName = 'abc.txt'

cy.fixture(fileName).then((fileContent) => {
  cy.get('#root > div > div.root-container.showNotificationsBanner > div.app.modalOpened > div.modal-window.small.msg_composer > div > div:nth-child(1) > div > div > div.composerBlock.attachFiles > div > div.btn-addnew')
    .wait(3000)
    .upload({
      fileContent, fileName, mimeType: 'input[type=text]',
    },
    {
      subjectType: 'drag-n-drop',
    },
    )
  cy.wait(3000)
})

No errors are being displayed, but unfortunately, the upload process doesn't seem to work as expected.

javascriptcypress

Answer №1

Using Cypress, we can retrieve the content of a file specified by fileName and then attach it to an input element of type "file". This will upload the file with the specified mimeType as 'text/plain'.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamically add the <script> tag to the HTML document

Is there a way to dynamically append the <script></script> tag, using jQuery or pure JavaScript, along with a callback function? There are two crucial things to consider: 1) The <script> tag may contain more attributes than just 's ...

javascriptjquerydom

Validation scheme for the <speak> element

When using validators in an angular formarray for input fields, I encountered a challenge with the regex to check the <speak> tag. https://i.sstatic.net/ogFA3.png The content provided was considered valid. https://i.sstatic.net/ar5FJ.png An error ...

javascriptangularregex

Issue with transferring JQuery variable to JavaScript

Using JQuery, I am attempting to retrieve a variable from PHP located at a specific URL and then utilize that variable in JavaScript to modify the content on the webpage. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">& ...

javascriptphpjqueryhtmlajax

Ways to inform an observer of an Object's change?

Is there a way to ensure that an observer receives notification of a change, regardless of Ember's assessment of property changes? While the ember observer pattern typically works well for me, I've encountered a specific issue where I'm unc ...

javascriptember.js

The quickest method to modify the anchor element's class depending on the query string

Requirement - I aim to accomplish this task using only pure JavaScript without any additional libraries, although I am open to using one if necessary. I need to assign an extra class to anchor elements that contain a query string of 'xyz=negate' ...

javascriptjqueryhtml

an occurrence of an element being rendered invisible, within an instance of an element being rendered as flexible,

I am trying to create a button that will show a list of elements. Within this list, there is another button that can be used to either close the list or hide it entirely. However, for some reason, my code is not functioning properly. let btn1 = documen ...

javascripthtmlcss

Tips for preserving historical messages

Hey there, I'm a newcomer to the world of Discord API and I'm working on developing a simple bot for Discord. My current project involves archiving all messages sent in a specific channel, including edited and deleted messages. Do you have any s ...

javascriptnode.jsdiscord

Managing promise errors by verifying the response

I am currently facing an issue where I need to handle inappropriate responses in the 'then' block of the code snippet below. getData().then(response => transformData(response)); I believe I need to implement something like this, but I am uns ...

javascriptreactjspromiseresponse

Smooth-scrolling feature with touch interaction available in the scrollbar extension

Anyone here aware of a high-quality jQuery or CSS plugin for scrollbars that supports touch functionality and smooth easing? I've been on the lookout for one, but haven't had any luck so far. Even if it comes with a price tag, I'm interested ...

javascriptjquerycss

What is the best way to obtain SAPUI5 Explored designs?

I am working on implementing a sap.ui.Table in my project, similar to the one showcased in the SAPUI5 Explored app. The table I am trying to create should allow for multi-selection of items using checkboxes on the left side. However, after downloading th ...

javascriptcsssapui5

The window:beforeunload event in IE 11 always triggers the unsaved changes dialogue box

When it comes to adding a listener for the beforeunload event on the global window object, IE 11 behaves differently compared to Chrome and Firefox. This is particularly noticeable when using Angular's "ngForm" module. If a form is dirty and has not ...

javascriptangularformscross-browserinternet-explorer-11

Using JavaScript to determine the time it will take to download something

Hi everyone, I'm a beginner in javascript and I am currently working on finding the download time of a file. I have calculated the size of the file and divided it by the current time, but unfortunately, I am not getting the correct result. This is th ...

javascriptajax

Error occurred when trying to import an external module using an invalid hook call

I am creating a package named "Formcomponent" using React and React Bootstrap. This code is from index.tsx /** * Renders a component for a form. */ import React from "react"; import Form from "react-bootstrap/Form"; /** * List of props * @returns */ ...

javascriptreactjstypescriptreact-native

Fontawesome is unable to update the class due to the presence of invalid characters in the string

const toggleDarkOrLight = document.getElementsByTagName('i')[0]; var toggled = false; const toggleFunction = () => { if (toggled === false) { toggleDarkOrLight.classList.remove('fa fa-toggle-off'); toggleDarkOrLight.classLi ...

javascripthtmlcssfont-awesome

React Alert: "Unable to modify while in the middle of a state transition"

Currently, I am working on developing an application that involves utilizing a toastr component. However, I am encountering an error when attempting to dispatch a redux action within this particular component. The error message displayed in the console is ...

javascriptreactjsredux

Utilize different JSON files to load numerous JSON objects

I'm currently working on developing a quiz website where the quiz content is stored in JSON files. While the functionality works fine, I'm looking to enhance it by adding a unique image to each question stored in the JSON file. To achieve this, I ...

javascriptarraysangularjsjsonobject

Show/Hide a row in a table with a text input based on the selected dropdown choice using Javascript

Can someone please assist me with this issue? When I choose Business/Corporate from the dropdown menu, the table row becomes visible as expected. However, when I switch back to Residential/Consumer, the row does not hide. My goal is to only display the row ...

javascript

Sometimes, the `undefined` TypeError can unexpectedly pop up while making Ajax calls

Here is my issue with AJAX request and response: I have around 85 HTML pages that all use the same AJAX request. However, when working with these files, I sometimes encounter the following error. AJAX $(document).ready(function(){ localStorage.setIte ...

javascriptjqueryhtmlajax

Conundrum encountered: SIGTRAP causing Electron failure to initialize

Exploring Electron for creating desktop applications has been my recent endeavor. However, I encountered this pesky error: /home/me/dev/my-electron-app-2/node_modules/electron/dist/electron exited with signal SIGTRAP Since the path leads to a binary file, ...

javascriptnpmelectronwindows-subsystem-for-linuxdesktop-application

Continue perusing the Angular JS HTTP request

I'm currently delving into the world of web systems, still a bit green when it comes to Angular JS. The feature I'm tackling now requires a POST call using Angular. Implementing the POST call itself isn't too tricky in Angular. However, my ...

javascriptangularjswebsocket