Leverage the power of Fluentlenium to effortlessly upload a file using dropzone.js

Currently, I am trying to create a test for file uploading using Fluentlenium and DropZone.js (). Dropzone.js operates within a modal where users can drag and drop files or upload them traditionally.

However, the test crashes as soon as the upload button is clicked because it navigates away from the browser environment.

While there are resources online explaining how to accomplish this with Selenium by targeting an input type="file" element with sendKeys, DropZone.js does not provide such element explicitly.

All the input elements visible in the DOM seem to be of type hidden:

<input type="hidden" name="key" value="temp/${filename}">
<input type="hidden" name="AWSAccessKeyId" value="secret">
<input type="hidden" name="acl" value="private">
<input type="hidden" name="success_action_redirect" value="">
<input type="hidden" name="policy" value="secret=">
<input type="hidden" name="signature" value="secret">
<input type="hidden" name="Content-Type" value="application">

In addition, our file uploads are facilitated through Amazon Web Server via the following script:

<script id="hiddenKeyPairs" type="text/javascript">
  var hiddenKeyPairs = {
    key:  'temp/${filename}',
    AWSAccessKeyId: 'secret',
    acl: 'private',
    "success_action_redirect": '',
    policy: 'secret',
    signature: 'secret/secret',
    "Content-Type": 'application'
  };

  var formAction = 'https://secret.com/';

</script>

I have been unable to find any information relevant to this issue on https://github.com/FluentLenium/FluentLenium#driver.

Is there a way to pass the file to the key hash mentioned in the script above? Any insights would be greatly appreciated.

Answer №1

While I'm uncertain about the AWS aspect, I do have a related question concerning file uploads (Automating file upload via Dropzone using Selenium) along with potential solutions that I've come across. My impression is that these solutions may not be very reliable, but they involve:

Method 1: Utilizing Java Robot to mimic GUI interactions -

// This command triggers the file browser window
driver.findElement(By.id("uploadDropzone")).click();

// Copy the file path to clipboard, paste (CTRL-V) into the window, then hit enter
StringSelection ss = new StringSelection("some file path");
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(ss, null);
Robot robot = new Robot();
Thread.sleep(2000);
robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_V);
robot.keyRelease(KeyEvent.VK_V);
robot.keyRelease(KeyEvent.VK_CONTROL);
Thread.sleep(5000);    // A pause is needed for GUI actions to take effect...
robot.keyPress(KeyEvent.VK_ENTER);
robot.keyRelease(KeyEvent.VK_ENTER)

Method 2: Handling everything within the code itself (somewhat of a hack...) - There is indeed a file input element available, but it's only defined within Dropzone.js, which can be accessed with $(".dz-hidden-input"). However, you must also make it visible (as Selenium can solely interact with visible elements), then utilize sendKeys on it. Next, in JavaScript, extract the File object from that element and pass it to addFile(file) on the Dropzone object.

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

Code running successfully in Chrome's console, but encountering issues when executed on the webpage

Having some trouble assigning a function to a button in JavaScript. This is the button I'm working with, and my main goal right now is to make it responsive. <button id="artbtn" class="artbtn btn">Art</button> I experimented with this in ...

What could be the reason for the appearance of Next.js compile indicator in my final production build?

Upon completing the development and deployment of a Next.js website, I observed that the black compile indicator continued to appear in the bottom-right corner of my browser, similar to its presence during local development. The indicator can be viewed he ...

Utilizing jQuery.ajax() to retrieve the child div from a separate page

Can anyone help me figure out how to use jQuery ajax() to load two children contents from an external page? I want a pre-loader to display before the main content loads. Below is the code snippet that I have tried. $.ajax({ url: 'notification.htm ...

Python script utilizing Selenium is returning an empty string when trying to extract data from

When I try to retrieve the value from a dynamically loading table by clicking on the TD element, it works fine. However, when I attempt to fetch the text from the same TD element, it returns an empty string despite trying XPATH and CSS Selector methods. H ...

Unlocking Google contact pictures using Google contacts API - A step-by-step guide

Exploring the Google contacts API with Node.js I've successfully retrieved all the contacts via the Google feed API, but without images https://www.google.com/m8/feeds/photos/media/faizy04%40gmail.com/ya29.ZAFTNcQ6sEue40gFqH5h8h91k8LO8Bwvf50NUgQKKms ...

How can you determine if a page has loaded successfully with Selenium?

As an illustration: import selenium driver = webdriver.Chrome() driver.get("http://example.com/") In a similar manner to requests, the status_code returned by requests.get. How to ascertain if a page loaded successfully with selenium? ...

Is there a way to execute a tanstack react query externally, as I am unable to utilize useQuery within the component?

const fetchSurveyData = useQuery(["survey"], () => getSurveyData({ page: 1, userLangCode: langCode, sortColumnName: "Date", sortColumnOrder: "DESC", country, ip, }) ); After tr ...

Tips for activating a click event on a changing element within a Vue.js application

I am working on creating dynamically generated tabs with a specific range of time (from 8am to 9am). My goal is to automatically trigger a click event when the current time falls within this range. However, I am facing an issue where the ref is being ident ...

Issue with the Bootstrap navbar dropdown menu functionality not functioning as expected

<head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464110a150a17">[email protected]</a>/dist/css/bootstrap.min.css" rel=&q ...

The issue arises when attempting to call a method from the same service within jsPDF in an Angular environment

Below you will find my Angular project's pdfService. I am facing an issue where calling the this.formatter() method inside myPDF is not functioning properly. export class pdfService { formatter(value: number): string { return new Intl.N ...

Question about React.js: What is the best way to add multiple classes to a component by using a ternary operator?

I am looking to apply multiple classes to a component by utilizing a ternary operator. In our shared ts theme file, we have the general button styles defined, but for this specific component, I want to adjust the sizes based on screen width. To achieve thi ...

Display a div element using AngularJS

Looking for a way to display a div using AngularJS, I came across some solutions on StackOverflow. However, implementing them did not work in my case. Here is my HTML code: <div id="myPanel" ng-controller="controllerDependance" ng-show="myvalue" clas ...

An error occurs due to attempting to parse the data using JSON.parse

Trying to troubleshoot a seemingly simple issue: The callback function of an AJAX post request is receiving a JSON string in the 'data' parameter. {"result":"Torte"} Manually parsing it yields the expected result: var response = JSON.parse(&ap ...

Updating Angular.js scope after a variable has been modified

On my website, I have implemented a search bar that communicates with a controller receiving JSON responses from the server. The response is stored in a global variable called assetResult. It works as expected initially; however, subsequent searches do no ...

Issue with error handling not being triggered when calling SAPUI5 function()

IBAN validation within a SAPUI5 Wizard is causing some issues for me. I am utilizing a functionImport on a V2 ODataModel (sap.ui.model.odata.v2.ODataModel) to perform this validation. Despite receiving a 202 status code, the request actually failed. Here ...

Is there a way to make all Bootstrap column heights equal using only jQuery?

I am currently working on matching the heights of two columns without using an existing library like match-height.js. In this specific case, I have a row with 2 columns where the first column contains a centered black square and the second column contains ...

What are some ways to implement smooth scrolling when a navigation link is clicked?

I have a total of 3 links in my navigation bar and every time they are clicked, I want the page to smoothly scroll down to their designated section on the webpage. Although I have already set up the anchors, I lack experience in scripting to create the smo ...

Having trouble getting the Socket.io package to install on Node.js in Windows 7?

Hey there! I'm having trouble installing the socket.io module using npm install socket.io. Unfortunately, I encountered the following error: npm WARN package.json <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8f80c3869 ...

A guide on efficiently mapping all items from an object containing an unspecified number of items or item names within a reusable component

I am currently exploring the concept of building reusable components. In a personal project, I am in the process of mapping items retrieved from a database. My goal is to create a component that can dynamically map any number of unspecified types as table ...

Is there a method to stop react-select (Select.Async) from erasing the search input value when it loses focus?

Situation: In my setup, I have a standard select element (categories), which dictates the options displayed in a Select.Async component from react-select. Problem: Consider this scenario: a user is searching for an option within Select.Async whil ...