Issue with Protractor: Image failed to upload on the dialog box

My attempt to test the image upload feature with Protractor failed, as my script did not work properly. Here is the image dialog box that I am trying to interact with. When clicking on the dialog box, it opens a window to select an image. After selecting an image, the box behaves like this image. My goal is to create a script that uploads an image and then clicks on the "Save" button. Here is the CSS of the dialog box: CSS of dialogue box. The following is the script that I attempted but unfortunately, it did not work. The encountered error message can be found here.

   var path = require('path');
   var fileToUpload = '../new image.jpeg';
    var absolutePath = path.resolve('__dirname', fileToUpload);
    console.log(absolutePath);
 var fileElem=element(by.css('label[for="cropper-file-input"]'));
 browser.wait(EC.presenceOf(fileElem), 2000,);
 fileElem.sendKeys(absolutePath);

Answer №1

Give this method a try and see if it helps you out.

 uploadFileToServer(element: ElementFinder, fileElem: ElementFinder, filePath: string): promise.Promise<void> {
        //In order to successfully upload files from a local directory to a remote server, we use the setFileDetector method to inform WebDriver.
        //This configuration is essential for avoiding the "Failed: invalid argument: File not found" error that may occur otherwise.
        browser.driver.setFileDetector(new utils.remote.FileDetector);

        return browser.executeScript(`arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px';  arguments[0].style.opacity = 1`, element)
            .then(() => fileElem.sendKeys(filePath));
    }

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

The HTML modal closing button is unresponsive and the contents inside are misaligned, causing functionality issues

I've searched through similar questions, but none of the suggested solutions seem to work for my issue. The problem I'm facing is that the closing button on my modal isn't functioning properly and the content inside it is not aligning corre ...

The Precision of Nesting CSS Selectors

I'm really puzzled about why "Item One" is not displaying as orange below. By specificity rules, the selector .one.two should have a score of 20 (two classes), while .one li should have 11 (one class, one element). So logically, it seems like it shoul ...

Leverage a current Firefox session with Selenium and Perl for enhanced efficiency

After logging into a site using Firefox, I have a session with all the necessary login data. The task now is to integrate this session with Selenium and Perl for automation purposes. Below is the code snippet I am currently using: my $driver = Selenium::R ...

Utilizing Observable in Angular Functions

I have a unique service that retrieves data through a SQL query request; getList(model:sqlModel):Observable<apiResultModel<sqlResultModel>>{ return this.http.post<apiResultModel<sqlResultModel>>(this.apiUrl,JSON.stringify(mode ...

Tips for resolving the ElementNotVisibleException error specifically in Edge browser when utilizing Selenium

I'm currently troubleshooting a GWT web application that resembles MS Paint. The issue I'm encountering is that my test case passes on Chrome, Firefox, and IE, but unfortunately fails on Microsoft Edge. Despite extensive research on Stack Overflo ...

What is the ideal framerate for smooth animation?

I'm looking to add a snow animation using JavaScript. I currently have it running at 200ms which is decent but not smooth enough. Would changing the interval to 20ms make it more fluid, or would it be inefficient and strain the CPU? window.setInterva ...

Develop an interface in TypeScript for intricate data structures

Displayed below is a variable that contains a collection of objects: scenes = { sky: { image: 'assets/1.jpg', points: { blue_area: { x: 1, y: 2 }, } }, blue_area: { image: & ...

Tips for automatically scrolling to the bottom of a div when new data is added

I'm working on a project with a table nested inside a div, and it has some unique styling: #data { overflow-x:hidden; overflow-y:visible; height:500px; } Currently, as the table fills up with data, a vertical scroll bar appears. But I wa ...

Displaying consistent headers on all printed pages in Chrome browser using Vue.js

Hey there, I'm currently working on code to print the page in my Vue web application. I want to have a static header appear on every page, either by using CSS or JavaScript. I've created a header div component and set its position as fixed. It&ap ...

How to position button components at the center in a NextJS application?

Incorporating a button within my nextjs page has been a challenge as I am striving to position it in the center of the page for optimal viewing on both PCs and mobile devices. Despite various attempts, the button remains fixed on the far left side of the p ...

Getting the value of the chosen option from one component and passing it to another component in Angular 8

How can I pass the selected option value from the login component to the home component without using local storage? When an option is selected in the login component, I want that value to be displayed in the home component. Below is the code snippet: Lo ...

Having difficulty adjusting the size of open-iconic icons in Bootstrap

I recently added the open iconic plugin to my project and I'm trying to adjust the size of the icon. While the original library has a property to change the size, it doesn't seem to work with the Bootstrap version. Is there an alternative way to ...

NodeJS is facing a severe challenge in properly rendering HTML and its accompanying CSS code, causing a major

Once upon a time, I built a beautiful website while practicing HTML, CSS, and JS. It had multiple web pages and used Express for the backend. Unfortunately, I lost all the files associated with it and took a break from web programming for some time. Now, w ...

Exploring ways to iterate through div elements using Selenium in Python

Looking to customize the contents of this html div <div class="ag-center-cols-container" ref="eCenterContainer" role="rowgroup" unselectable="on" style="width: 1550px; height: 118.4px;"><div role=& ...

What can I do in Ruby to overcome the object text error produced by xpath in a website that is designed to conceal everything?

My organization employs tactics to conceal most of the data on our website, and I am attempting to develop a script that can scan closed jobs to extract information in order to generate new jobs without requiring user input or database access. After condu ...

What is the best way to retrieve values from a multi-dimensional array?

I am working with Angular and have an array named testUsers that contains sample data as shown below: this.testUsers = [ {email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94a5d4f2f5fff1baf7fbf9">[email pr ...

Guide on customizing VS Code's Explorer to display angular js icons

How can you customize the icons displayed in Explorer within VS Code by adding a specific addon procedure? https://i.sstatic.net/KSMwC.png https://i.sstatic.net/2mFMq.png ...

Automatically determine the text direction and alignment according to the language being used, whether it is right-to-left (

Setting the direction property for the body tag can determine whether the text should flow from left to right (ltr) or right to left (rtl). Similarly, individual elements can have their own text-align properties set. Is there a way to streamline coding ef ...

Unable to change background-image as intended

Here is an example of my HTML code with an initial background image: <div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div> Everything seems to b ...