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

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

Introducing a fresh input field that includes a dropdown selection feature

When a user clicks on the "+" button, a new row should be added with a dropdown and input field. I want the input field name to be the dropdown value for each row. If "Facebook" is selected in the first dropdown, it should not appear in the second dropdo ...

Switching Out Bootstrap Dropdown with Dropup (Varying functionality on two almost identical implementations)

In the midst of my project on Github Pages, I encountered an interesting issue involving replacing a bootstrap .dropdown with .dropup when the div's overflow-y: scroll causes the dropdown menu to be cut off or overflow. The functionality can be viewed ...

How can you obtain the console output when executing builds using Selenium on the grid?

After running Selenium tests locally using RC for several years, we are now transitioning to the grid. We have been directing the server's console output to our own test logs, which has proven to be a valuable tool for debugging purposes. The format o ...

Easily integrating a JavaScript file into an HTML document when utilizing a NodeJS Express server

Currently in the process of developing a chat application, utilizing the Express server with NodeJS and AngularJS for client-side management. Encountering an issue when attempting to include /js/code.js in my html, as it cannot be found due to not being p ...

Validating Text on a Webpage using C# Selenium

I have been using the following function to check for text on web pages, but it seems to fail when trying to find text under a 'br' tag. Can you provide any advice or suggestions? C#: public static IWebElement CheckTextOnPage(IWebDriver driver ...

Using PHP to upload images through AJAX increases efficiency

Worked tirelessly on this script all night still unable to fix the bug. The issue is that when I select an image and click upload, it uploads the current image file. Then, if I select another image and click upload, it uploads two new files along with the ...

What is the best starting dataset to use from a large pool of data points when creating a stock line chart in High

I am working on creating a line stock highchart similar to the example shown here: In the provided example, the initial load fetches data from https://demo-live-data.highcharts.com/aapl-historical.json, specifically 0-165 records when the All option is se ...

Updating the active color for Material UI Input elements

I'm having trouble changing the color of an active input field. I want to customize it with my theme's primary color, but I can't figure out how to do it. I've tried adjusting the color attribute in various components like FormControl, ...

An error has occurred in the Next.js App: createContext function is not defined

While developing a Next.js application, I keep encountering the same error message TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function every time I try to run my app using npm run dev. This issue arises when attempting to co ...

Vue.js does not support animation for the Lodash shuffle function

I'm having trouble getting the lodash's shuffle method to animate properly in Vue.js. I followed the code from the documentation, but for some reason, the shuffle occurs instantly instead of smoothly. When I tested the animation with actual item ...

Adding specific props, such as fullWidth, at a certain width, like 'sm', in Material UI React

My goal is to include the fullWidth prop when the screen reaches a size of 600px or greater, which is equivalent to the breakpoint sm. I attempted to implement the following code, but unfortunately, it does not seem to be functioning as intended. [theme ...

Retrieve the child element that is being clicked

Alright, I'm facing a little issue here (it seems simple, but I just can't seem to crack it)... Let me paint the picture with a snippet of HTML code below: <!-- New Website #1 --> <!DOCTYPE html> <html style='min-height:0px; ...

The random quote generator or current tweet quote feature is malfunctioning

I am having trouble with a jQuery on click function that is not working to tweet the current quote. I am working on building a random quote machine and tweeting the current quote is essential. Despite successfully implementing the JSON API, I cannot seem t ...

Converting a string array to an array object in JavaScript: A step-by-step guide

My task involves extracting an array from a string and manipulating its objects. var arrayString = "[{'name': 'Ruwaida Abdo'}, {'name': 'Najlaa Saadi'}]"; This scenario arises when working with a JSON file where ce ...

Enable users to provide ratings ranging from 0.5 up to 5

I recently created a rating component that allows users to rate on a scale from 0 to 4.5, with increments of 0.5, which is causing unexpected behavior. I actually want users to be able to rate from 0.5 to 5 instead. How can I achieve this adjustment? Below ...

The setTimeout functionality is executing faster than expected

In my selenium test, I've noticed that the setTimeout function consistently finishes about 25% faster than it should. For example, when waiting for 20 seconds, the function completes after only 15 seconds. test.describe('basic login test',f ...

Issue with Angular JS orderBy when sorting by numerical fields is not functioning as expected

Within my controller, I implemented code to convert the rank into a Float data type. details.rank = ''; $scope.order = function (predicate) { $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; if (predicate == & ...

Automating web scraping with Python and Selenium: choosing and interacting with a specific table element

Struggling to understand why this isn't working. The ID is clearly "ReservedDateTime_2022-08-29 14:10:00" Your assistance would be greatly appreciated Index.html <div data-function="timeTableCell" data-sectionid="40" data-serv ...

There was an error in reading the 'nativeElement' property in Angular's waveform library, resulting in a TypeError

This is the code I wrote, but it is showing an error: The waveform should be created, but the function to create the waveform is not working. startRecording() { this.mediaSectionVisible = false; if (!this.isRecording) { this.isRecording = t ...

Identify Unintended Javascript Modifications in Ajax Request

We have developed a unique Javascript file for our clients to utilize. This innovative snippet captures a screenshot of the website it is executed on and then securely transmits it back to our server using jQuery.post() Given the sensitive nature of our i ...