Controlling the file selection window of a browser with protractor/jasmine

The tools I am currently using are Protractor 3.3.0, Jasmine 2.4.1, and Selenium Standalone Server.

My main objective is to create a test scenario where the test navigates to a specific page and then clicks on an 'upload file' button. This action triggers the File Upload Window similar to Windows Explorer. The challenge lies in determining if it's possible to interact with this window using JavaScript within the context of Protractor and Jasmine.

In a past project, I was able to achieve a similar task using Java. In that case, I found all windows, selected the top one from the stack, used keyboard inputs to navigate to the input field, pasted the file path from the clipboard, and finally submitted the form by pressing enter.

However, I am facing some difficulties with this approach as the find all windows method only detects the current browser window and not the upload file window itself.

I am aware that there is a java import option for utilizing JavaScript through npm, but I encountered some challenges in implementing it immediately. Ideally, I would prefer to work directly within the Protractor/Jasmine environment without having to rely heavily on additional libraries. Nevertheless, if that turns out to be my only feasible solution, I am willing to explore further options.

There is also the possibility of injecting the file path via HTML:

$('input[type="file"]'.sendKeys(filePath);
. However, since I aim to simulate user actions accurately, I believe accessing the Upload Window and interacting with it directly would provide a more comprehensive testing scenario.

I welcome any thoughts or suggestions you might have on this matter. Your insights would be highly valuable at this stage of development.

Answer №1

Here's a simpler way to achieve file upload without using AutoIt. You can utilize the FileDetector feature of selenium. I have provided an example below on how I implement it (please note that this requires node 5.X). This method has worked flawlessly for me with selenium grid, local runs, and Saucelabs.

var FileDetector = require('selenium-webdriver/remote/index.js').FileDetector;
browser.setFileDetector(new FileDetector());

$('css hidden upload input field').sendKeys(filePath).then(function () {
     console.log('Uploading file:', filePath);
});
// Uploading a file may take some time. It is recommended to use a small file whenever possible.
// Don't forget to add browser.wait() with your condition to ensure the upload is complete before continuing with the test flow.

For more information, you can also refer to this related question - Remote File Upload Protractor test

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

Troubleshooting my HTML5 local storage issues for optimal functionality

I've been working on using HTML5's localstorage to save two variables and load them upon page refresh, but I seem to be encountering some issues when trying to load the saved items: Variables in question: var cookies = 0; var cursors = 0; Savi ...

Receiving an error of "undefined" when trying to capture the selected

One issue I am facing is capturing the selected user option and sending that value in a post request. Let's put aside the post part since it's not directly related to the main question at hand. Currently, the value is showing up as undefined. ...

Parsley JS - Personalized Validation for Ensuring selected Items meet Minimum Value Requirements

Is it possible to validate a form so that at least 5 select boxes are set to Yes? If there are fewer than 5, the form should not submit and display an error message. I believe a custom validator is needed for this task. To see a complete example, check ou ...

It's not possible to add additional options to the select input in a react

Hi there! I'm currently facing an issue while trying to retrieve a list of options from the backend, map them to another list of options, and add them to a main list. Unfortunately, my attempts have not been successful. Could anyone offer some advice ...

Developing a Prototype for an Angular Directive

After following instructions from a question on Stack Overflow, I have updated my application configuration with the code snippet below: $provide.decorator('formDirective', function($delegate) { var directive = $delegate[0]; directive.contro ...

Obtain a transformed mesh that has been displaced using a displacementMap within three.js

Seeking to extract and export the mesh affected by a displacementMap. The displacement of vertexes is determined by this line in the shader (taken from three.js/src/renderers/shaders/ShaderChunk/displacementmap_vertex.glsl): transformed += normalize(obje ...

substitute bullet point list item with new element

Assuming I have a list: <ul class="ul-1"> <li class="li-1">xx -1</li> <li class="li-2">xx -2</li> <li class="li-3">xx -3</li> </ul> Then I store it as: var list = $('.ul-1').html(); In ...

What could be causing my sticky positioning to not function properly when I scroll outside of the designated

My website is organized into sections, with each section corresponding to a hyperlink in the navigation menu. I've applied the CSS property position: sticky to my navbar, which works as expected within the section bounds. However, I want my red navbar ...

JavaScript is able to access the HTML content of the previously opened tab when saving the window

Seeking advice from the knowledgeable community at Stack Overflow! I have a project that I'm unsure how to start, and I could use some fresh ideas. My goal is to access the HTML source code of a previously opened tab or one that is still loading on m ...

Struggling to extract text from within a <p> tag on an Ionic 1 app page on iOS

After developing an ionic-1 application for iOS and Android devices, I encountered an issue with displaying mobile numbers in one of the views. The numbers are contained within <p> tags. While users can click and hold on a number to copy it on Andr ...

Retrieve information in JSON format using AngularJS by fetching data from SQL through PHP

My objective is to retrieve data from a mySql database using PHP, convert it to JSON, and then display it through AngularJS. Although I have successfully completed the steps leading up to this point, I am facing issues with the final step. Below are the de ...

Transforming Sphere into Flat Surface

How can I convert the SphereGeometry() object into a flat plane on the screen? I want it to function in the same way as demonstrated on this website, where the view changes when clicking on the bottom right buttons. Below is the code for creating the sph ...

Retrieve information from an XML document

I have some XML content that looks like this: <Artificial name="Artifical name"> <Machine> <MachineEnvironment uri="environment" /> </Machine> <Mobile>taken phone, test when r1 100m ...

Changing the input to uppercase within Vue.js

I am looking to capitalize the input data from the user's full name model and would prefer if it is in Latin letters only. Utilizing Vue.js for Uppercase Conversion <p-input :value="value" @input="$emit('input', $event)&qu ...

The Angular controller fails to execute upon startup in the Ionic app

As a newbie to the Ionic Mobile Framework and Angular JS, I'm working on a login page for the first time. My goal is to navigate to the homepage only if the session has not expired when the login page launches. If the session has expired, then it shou ...

I'm struggling with finding an answer to this question: "What is the most effective way to conduct a

I'm experimenting with a file upload. I decided to encapsulate the FileReader() inside an observable based on information I found in this discussion thread: onFileSelected(event: any) { this.importJsonFileToString(event.target.files[0]) .p ...

Trouble with escape sequences in regular expressions within jQuery Terminal for JavaScript

I'm experimenting with special character functionality in jQuery terminal. While I was successful in implementing the backspace functionality, I encountered an issue when trying to execute the escape functionality. Below is the code snippet I used: ...

Efficient AJAX validation using PHP and JavaScript

I am currently working on a small website project that requires User registration functionality. One key aspect is ensuring that the system prevents users from registering with usernames that are already in use. Most modern websites employ AJAX to verify ...

Steps for importing a React component as an embedded SVG image

I have developed a SVG component in React by converting an SVG file to a React component using the svg-to-react cli tool. In order to load and display additional svg files within this component, I am utilizing the SVG image tag as demonstrated below. This ...

The system encountered an error: Module could not be located - Unable to resolve '@material-ui/icons/VideoCall'

Having trouble installing even with --force option, looking for a solution import { Container, MenuItem, Select, InputLabel } from '@material-ui/core'; In need of assistance to resolve these installation errors Error: Module not found - Can&ap ...