Streamline uploading files with AngularJS using Selenium

I am utilizing Powershell to operate .NET Selenium with a FirefoxDriver in order to automate certain tasks. One of these tasks involves file uploads, and the website I am working with appears to have been built using AngularJS.

After some experimentation, I managed to automate file uploads using a standard input element by sending the file path through SendKeys.

However, I am stuck when it comes to this specific scenario. The HTML code for the file drop area, which includes an optional manual file selector, is as follows:

<div class="overflowHidden video-drop-zone file-drop-zone zone appversionicon rounded"
ng-file-drop="onFileSelect($files);" ng-file-drop-available="dropSupported=true">               
    <div class="simpleDropZoneFileSelect">
        <span class="selectFileText">
            <span class="ng-binding ng-hide" ng-show="dropLabel !== undefined &amp;&amp; dropLabel !== ''"><br></span>
            <a class="ng-binding" href="" ng-show="true">Select file</a>
            <input class="" ng-show="true" ng-file-select="onFileSelect($files)" type="file">
        </span>
    </div>
</div>

This explanation might be oversimplified. There are likely additional components to consider within the AngularJS framework. Nevertheless, I am hopeful that this information will help guide me towards a solution. If more details are needed, please let me know and I can provide them.

While researching, I came across Protractor as a popular choice for AngularJS testing. However, implementing Protractor would significantly change my current setup (including incorporating a NodeJS server), whereas all I require at the moment is assistance with the file upload functionality.

Thank you!

Sandro

javascriptangularjsseleniumselenium-webdriver

Answer №1

If you're unsure about the layout of your setup, using selenium for file uploads can simplify the process.

Driver.FindElements(By.CssSelector("input[type='files']")).SendKeys("YourFilePath")

This should get the job done.

Answer №2

<button class="btn btn-primary ng-scope" ng-click="vm.importAccountsClicked()" translate="import-accounts">Import Accounts</button>
<input class="hide" type="file" id="fileItem" accept=".csv" onchange="angular.element(this).scope().import()">

Dealing with a similar situation using Webdriver and Java, I was faced with an issue while trying to manipulate the Import Accounts button on a webpage (as shown in the HTML snippet above). Selenium+Java was unable to send keys to it. The mistake I made was not recognizing the element using the type=file attribute, and instead focusing on the text of the button:

@FindBy (xpath="(//button[.='Import Accounts'])")
private WebElement importbutton;

Upon correcting the variable declaration for the import button to:

@FindBy (id = "fileItem")
private WebElement importbutton;

The problem was resolved by utilizing the sendKeys() method.

importbutton.sendKeys(filepath);

I hope this explanation proves helpful.

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

When the nesting in AngularJS ui-router becomes overwhelming

I've been in the process of refactoring a large application at work, and I've noticed significant similarities between different parts of the app that make me think nesting routes could be beneficial. However, as I continue to nest more and more, ...

javascriptangularjsperformanceangular-ui-router

Encountering undefined JavaScript functions when called from HTML

I had most of these functions working perfectly, but after restarting my program, I'm now encountering issues with undefined functions in Chrome. I can't pinpoint the exact problem, and even though I've checked through Eclipse, I still can&a ...

javascripthtml

The website functions properly in Chrome, but encounters issues in IE

Currently working on validating some JavaScript code. Chrome seems to be handling it well, but as expected, IE is causing some issues. Take a look at the code below: function validateData(a,id){ var inputs = document.getElementsByName('attname[] ...

javascriptinternet-explorer

Converting user IDs to usernames in discord.js

I'm currently developing a bot and I want to implement a feature where every time a command is used, it logs the action in the console. Here's the code snippet I've been working on: console.log(message.author ++ ,`used the comman ...

javascriptnode.jsdiscorddiscord.js

What is the reason for Cypress choosing to omit specific commands?

The test below aims to scan and authenticate a QR code, then utilize the received authentication token. However, for some reason, the last two commands (.type) are not being executed. I've been stuck at this point for quite some time now. Any insights ...

javascriptcypressqr-codetotp

What is the best way to save the data received from createApi into the Redux store?

Currently, I am faced with the challenge of storing user data (such as name, email, etc.) obtained through the createApi function into Redux store. However, I'm unsure of the best practice to achieve this. In my userApi.js file: export const userApi ...

javascriptreactjsreduxredux-toolkitrtk-query

Having Trouble Logging into Instagram Using C# Selenium

Hey everyone, I recently helped my mom set up an Instagram account for her work. I wanted to create an auto follower bot for her using Selenium, but every time I try to test it, Instagram locks me out and asks me to try again in a few minutes. The proble ...

c#seleniumselenium-webdriverselenium-chromedriverinstagram

Identifying the specific button within an Angular table that is part of a collection of buttons all sharing the same ID

I am currently working on writing a Selenium test using C# for the specific scenario outlined below. The task at hand involves clicking the undo button on selected records within the table based on their transfer type. https://i.stack.imgur.com/CwNMb.jpg ...

seleniumselenium-webdriverxpathwebdriver

What is the solution for halting code execution in a foreach loop with nested callbacks?

Currently, I am in the process of setting up a nodejs database where I need to retrieve user information if the user exists. The issue I'm facing is that when I return callback(null) or callback(userdata), it does not stop the code execution and resul ...

javascriptnode.jsdatabaseauthenticationfs

The base64 conversion for the image is overflowing from the upload image field in react-draft-wysiwyg

I have a functional react-draft-wysiwyg editor application that allows me to add images. However, I am currently encountering an issue which is detailed below: https://i.stack.imgur.com/HTjAc.png This is the code snippet of what I have attempted so far. ...

javascriptreactjsdraftjsreact-draft-wysiwyg

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java

I'm attempting to determine the number of columns in a specific table, but some are disabled - I'd like to know if it's possible to get the count without including the disabled ones (only counting the visible columns). As you can see in the ...

javahtmlcssseleniumxpath

Discover the power of automating desktop applications with Selenium

How can desktop applications be automated using Selenium? In an attempt to automate a Java application called 360tc with Leanft, we encountered issues where some objects were not being identified correctly. As a result, we have chosen to explore automatio ...

selenium-webdriverdesktop

Updating the value of a MongoDB item two days after its creation

I've been working on a NodeJS application that stores form data in a MongoDB database collection. My goal is to implement a function that can modify certain values of the object in the database collection 48 hours after the form data is initially save ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to delay entering data manually into a text box using Selenium WebDriver?

Is there a way to manually enter the captcha text? How should I write the code for this? Below is the code snippet I have: driver.findElement(By.name("/atg/commerce/order/purchase/CommitOrderFormHandler.userCaptcha")).sendKeys(captcha); However, I am en ...

seleniumselenium-webdriverwebdriver

Utilizing fluent-ffmpeg in nodejs and express to effortlessly download a video

I've been recently tackling a side project that involves downloading videos from Reddit. The tricky part is that the video and audio are stored in separate files, requiring me to merge them before being able to download them onto the client's dev ...

javascriptnode.jsexpressffmpegvideo-streaming

Issue with React-Axios: File data being sent to Node server is undefined

My current challenge involves uploading a single file and saving it in a specific folder within my app directory. While I can successfully choose a file on the frontend and update the state of the Uploader component, I encounter an issue when sending a POS ...

javascriptnode.jsreactjsmulter

Is there a way for blueimp to establish communication with a Java REST service?

$scope.$on('fileuploadadd', function(event, data) { $http({ method: 'POST', url: 'http://example.com/upload', data: data }).then(function successCallback(response){ console.log('File successfull ...

angularjsjquery-file-uploadblueimp

The exportAs attribute is not specified as "ngForm" for any directive

Encountered an error while attempting to test the LoginComponent PhantomJS 2.1.1 (Linux 0.0.0): Executed 3 of 55 (1 FAILED) (0 secs / 0.307 secs) PhantomJS 2.1.1 (Linux 0.0.0) LoginComponent should create FAILED Failed: Uncaught (in promise): Error: Templ ...

javascriptunit-testingangulartypescriptjasmine

Utilizing CSS classes based on subelements

I need to assign css classes to items in a list based on certain criteria. Here is an example of the structure I am working with: <ul ng-controller="Navigation"> <li><a href="#">Category A</a> <ul> < ...

javascriptjqueryangularjs

Is it possible that .focus() does not function on a duplicated object?

Greetings to all! I have created a form with rows of input text fields. Users can add as many rows as needed by clicking the 'add row' button. The functionality to clone() for adding rows is working perfectly. In each row, an input field can o ...

javascriptjquery