`Need help testing flow.js file uploads using Selenium?`

My AngularJS SPA allows users to upload files using the ng-flow wrapper for flow.js. I am currently in the process of setting up automated e2e tests with Selenium, but I am facing challenges when it comes to testing the file uploading mechanism triggered by clicking the flow-btn element or using drag and drop functionality.

After some research, I came across a page which mentioned that Selenium WebDriver might not be able to recognize the dialog box that appears when the flow-btn is clicked. The issue stems from the fact that the flow-btn is actually implemented as a span element, not an input element as suggested in the solution provided on the page.

Do you have any suggestions on how I can effectively test file uploading with flow.js using Selenium?

javascriptangularjsseleniumtestingflow-js

Answer №1

Utilizing nightwatch.js for testing our app, we encountered issues with a flowJS upload button designed for single files.

To solve this, I had to tweak the hidden file input by making it visible and enabled, enabling me to input the file location and proceed with submission.

Here's a snippet of the nightwatch.js code:


    // Re-enabling traditional file-input
    this.api.execute(function () {
        document.getElementById('proof-upload-fallback').className = '';
        document.getElementById('proof-upload-fallback').disabled = false;
    });

    this.api.setValue('//input[@id="proof-upload-fallback"]', require('path').resolve(filePath));

    // Initiating upload process
    this.api.clickModalButton('Upload');

Our HTML structure appears as follows:

<input id="proof-upload-fallback" type="file" flow-btn="" ng-show="false" ng-disabled="true" class="ng-hide" /> 

<button flow-btn="" focus-input="focusButton">Select PDF<input type="file" style="visibility: hidden; position: absolute; width: 1px; height: 1px;"></button>

Submit: <button ng-click="ok()">Upload</button>

The ng-click="ok" function manages flow.js operations, with the crucial part being the execute() method that passes JS commands to the web app via the selenium driver...

Answer №2

Check out this effective demonstration on how to upload the current script using the flowjs upload feature:

const remote = require('selenium-webdriver/remote');
const path = require('path');

browser.ignoreSynchronization = true;
browser.setFileDetector(new remote.FileDetector);

describe('testing suite', function() {

  it('successfully uploads a file remotely', function() {

    browser.get('http://flowjs.github.io/ng-flow/');

    element(by.xpath("//span[.='Upload File']/input"))
      .sendKeys(path.resolve(__dirname, __filename));

    browser.sleep(5000);

    expect(element.all(by.css("div[ng-repeat='file in $flow.files']")).count()).toEqual(1);
  });

});

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

During server and browser builds, NextJs encounters a 404 error when trying to access files named _ssgManifest.js and _buildManifest.js. Additionally, the file named _

I recently deployed a NextJs application on a digitalocean droplet running Ubuntu 22.04. "next": "12.2.3", "react": "18.2.0", Encountering a 404 error for the following files: _ssgManifest.js, _buildManifest.js, an ...

javascriptreactjsnext.jshttp-status-code-404

Get rid of the horizontal scroll bar and expand the width of the table

Normally, Tabulator limits the maximum width of the table and adds a horizontal scroll bar at the bottom. Is there a way to eliminate this scroll bar and make Tabulator expand the width of the table instead (resulting in the horizontal scrollbar appearin ...

javascriptnode.jsnpmtabulator

Achieving Center Alignment for Material-UI's <Table> within a <div> using ReactJS

Currently, I am working with a Material-UI's <Table> embedded within a <div>. My goal is to center the <Table> while maintaining a fixed width. I want the table to remain centered in the browser, but if the browser window is minimize ...

javascriptcssreactjsmaterial-ui

Using Angular's ng-include directive within a Jade template

I am attempting to insert a header using ng-include from Angular into my Jade template: doctype html html(lang="en") head meta(charset='UTF-8') meta(name='fragment', content='!') base(href='/& ...

angularjsexpresspugangularjs-ng-include

What is the best way to choose an item from the selection of options in the dropdown menu within

https://i.sstatic.net/dkKXn.png self.wait.until(EC.element_to_be_clickable((By.NAME, "job_sector"))).click() # job selector time.sleep(0.5) jobs = self.driver.find_elements_by_class_name("apz_typeahead__prediction_content&qu ...

pythonselenium

Retrieve values from an array of objects using their corresponding keys

I have an array populated with various objects containing different key-value pairs. I need to extract specific values from the array and determine if a certain value is present or not. function groupByName (contract) { const { age } = contract; const g ...

javascript

Efficiently scheduling file downloads using WebDriver automation

I am in the process of automating a website using WebDriver, but I have encountered unique file download requirements that differ from what is readily available online. My specific scenario involves a website where I create orders. Upon clicking the &apos ...

javascriptfileseleniumdownloadwebdriver

Is there a way to extract the HTML source code of a website using jQuery or JavaScript similar to PHP's file_get_contents function?

Can this be achieved without a server? $.get("http://xxxxx.com", function (data) { alert(data); }); I have tried the above code but it seems to not display any output. ...

javascriptjqueryweb

Creating a streamlined real-time application using the powerful combination of Django-swampdragon and AngularJS

Currently, I am using django-swampdragon along with angularjs to develop a simple Django application that displays website requests in real-time. While the Django part of the logic seems to be functioning correctly, I encounter issues when attempting to m ...

javascriptpythondjangoangularjssockets

Special characters like greater/less than signs have not been properly encoded

I am currently facing an issue in regards to escaping strings on the server side (using Node.js & Express.js) that contain greater/less than signs (<, >). Below is the code snippet I'm using on the server side: socket.on('message', fu ...

javascriptnode.jsexpress

Guide on importing a client-side script using browserify with module.exports exposed through jadeify

I've successfully created a JavaScript file using a Jade template with the help of browserify, browserify-middleware, and jadeify on the server side in Node. The only thing required to generate the JavaScript file is: app.use('/templates', ...

javascriptexpressrequirejspugbrowserify

Utilize AngularJS to interact with JSON data

Greetings, I trust you are doing well. I have successfully created an API using PHP to fetch data from SQL and convert it into JSON. However, I am facing a challenge in manipulating the PHP code to retrieve the JSON data as per my requirements. I believe ...

phpmysqlangularjsjsonapi

Guide to running code repeatedly in node.js

Is there a way to repeat the console.log function 5 times in Node.js using the 'repeating' npm package? I am working on a node application that needs to run a specific code multiple times, but I can't seem to figure out how to achieve this. ...

javascriptnode.jsnpm

Can you explain the significance of setting scope:true in an AngularJS directive?

When scope:false is used, it indicates that the directive will not have its own scope. If scope:{something}, an isolated scope will be created for the directive. But what does scope:true mean? And more importantly, why is it useful? Thank you! ...

angularjsangularjs-directiveangularjs-scope

Selenium WebDriver enabling simultaneous clicks on multiple buttons within the same page

I've encountered an issue while attempting to use selenium webdriver in Python to click on all the "thanks" buttons on a webpage. The problem is that my script seems to only click on the first button it encounters. Here's the snippet of code I&a ...

pythonpython-3.xseleniumselenium-webdriver

Modify one specific variable within my comprehensive collection on Firebase Firestore

After clicking the button, I need to update a variable. The variable in question is "bagAmount" and it is stored in my firestore collection. Here is a link to view the Firestore Collection: Firestore Collection Currently, I am able to update one of the va ...

javascriptangulartypescriptfirebasegoogle-cloud-firestore

Modify the color of the text input by the user in an AJAX-enhanced text box

After successfully implementing an autocomplete textbox using AJAX Autocomplete, I decided to enhance the feature with some Fuzzy logic. Now, as the user enters 3 characters, my database returns a list of records that match those characters. The search re ...

javascriptjquerycssajaxvb.net

Can a faulty image be cached?

Is there a way to ensure that the browser caches invalid or broken images so that when they are re-fetched, the loading time is immediate? I am particularly interested in two scenarios: 1) The first scenario involves trying to load an image from a URL co ...

javascripthtml

Guide on exporting information into CSV and PDF formats with AngularJS

When I click on a button for both CSV and PDF, I want the files to automatically download with correct formatting. The CSV code needs to include the PDF within the code. $scope.downloadData = function() { var datasets = $scope.datasets.revers ...

angularjscsvpdf

Eliminating an element from an array based on a single criterion

Here's a question that might seem simple to some: Let's say I have an array like this... var array = [ {id: 1, item: "something", description: "something something"}, {id: 2, item: "something else", description: "something different" ...

javascriptjqueryarraysoop