UI Smart

Easily write pass/fail tests based on the DOM elements in your single page application. Mimic user interactions in each test step using javascript events and watch them play out live when they run.

Drop-In-Ready

FlyThru JS is a drop in directory containing all the necessary files to start writing tests and witnessing results immediately. Works nicely with AngularJS and components like DHTMLX!

Simple Syntax

Functional testing should not be difficult. Create a test, add steps, wait for elements to appear and simply pass or fail them. Easy as that!

Watch it fly!

Below is an example of a basic single page AngularJS application.

Switch to a wider screen to see the demo in action!

Demo
Full Test Script

Press the "Take Off" button

Full example


        // configuration (set viewport size, pace)
        // optional
        flythru.config({
           viewport:{
               w: 320, h: 568
           }
        });
        // set your website page
        // mandatory prior to adding tests!
        flythru.destination("../index.html");

        // First test aka Flight!
        // each Flight has stops and layovers
        // inside stops and layovers are pass, fail and cargo
        // 'pass' is a function to call to continue to next stop
        // 'fail' throws error and grounds flight
        // 'cargo' is a cached object that shares data between stops,flights, layovers
        //  and gives you access to your websites window object. There is also
        //  a toolbox which has helper functions. seen below.
        //  You are free to use 'cargo' to pass data between your flights,
        //  stops or layovers :)
        flythru.addFlight("Login")
        .addStop("Enter Credentials - admin/pass123", function(pass,fail,cargo){
           var uInput = $(cargo.win.document).find('[name="username"]');
           var pInput = $(cargo.win.document).find('[name="password"]');
           if(uInput.length > 0 && pInput.length > 0){
                   cargo.toolbox.angular.applyValue(uInput[0],"admin");
                   cargo.toolbox.angular.applyValue(pInput[0],"pass123");
                   pass();
           }else{
               fail('Unable to fill in credentials');
           }
        })
        .addStop("Click login",function(pass,fail,cargo){
            var found = $(cargo.win.document).find('button:contains("Login")');
            if(found.length) { found.click(); pass(); }
            else { fail("No login button found"); }
        }).
        layover("Records ready?",function(pass,fail,cargo){
            var found = $(cargo.win.document).find('.contacts-table');
            if(found.length && found.is(":visible")){
                pass();
            }
        });

        // edit
        flythru.addFlight("Find and Edit Ted")
        .addStop("Search for Ted",function(pass,fail,cargo){
            cargo.passenger = {
                fname: "Ted", lname: "Schmity"
            }
            var found = $(cargo.win.document).find("[ng-model='searchParam']");
            if(found.length){
                cargo.toolbox.angular.applyValue(found[0],
                                                  cargo.passenger.fname);
                pass();
            }else{
                fail("Could not find search box!");
            }
        })
        .layover("Is Ted there?",function(pass,fail,cargo){
            var found = $(cargo.win.document)
                        .find('.contacts-table td:contains("'+cargo.passenger.fname+'")');
            if(found.length){
                cargo.ele = found; pass();
            }
        },5000)
        .addStop("Click the Ted row", function(pass,fail,cargo){
            cargo.ele.click(); pass();
        })
        .layover("Wait for Ted's details", function(pass,fail,cargo){
            var foundLabel = $(cargo.win.document).find('.detail-pane label:contains("Name:")');
            if(foundLabel.length){
                var match = foundLabel
                      .parent()
                      .text()
                      .indexOf(cargo.passenger.fname+" "+cargo.passenger.lname) > 0;
               if(match) pass();
            }
        },5000)
        .layover(2000) // wait so you can read the details, for effect only
        .addStop("Close the details", function(pass,fail,cargo){
            var found = $(cargo.win.document)
                          .find('.detail-pane footer button');
            if(found.length){
                found.click();
                (!found.is(":visible"))?pass():fail('Details did not close!');
            }
        });

        // logout
        flythru.addFlight("Logout")
        .layover(1000)
        .addStop("Click the logout button",function(pass,fail,cargo){
            var found = $(cargo.win.document).find("[ng-click='logout()']");
            if(found.length){
                found.click(); pass();
            }else{
                fail("No logout button found!");
            }
        })
        .layover("Are we at login screen?",function(pass,fail,cargo){
            var found = $(cargo.win.document).find('[name="username"]');
            if(found.length && found.is(":visible")) pass();
        },4000)

Getting Started

Download and unzip the flythru.js kit.
Place the /flythru folder into the root directory of your dev or test environment of the website you are going to test.
Set the path to your app's home page in the flythru index.html but using flythru.destination("../your-index.html").
Then browse to /flythru/index.html and the Flight Panel will load your application into the viewport.
Start writing Flights!

Kit Directory Structure

    /flythru
      index.html
      /assets
        flythru.min.css
        flythru.min.js

API

Here you will find the references for the latest version of flythru.js.

flythru.config

Sets configuration for flythru prior to running any flights or destinations.

flythru.config(obj);

Usage and default values

Param	Type	Description
viewport	object	The "h" is an int that sets the height in pixels of the viewport. The "w" is the width in pixels of the viewport.
zoom	int/float	Sets the zoom of the viewport using the css attribute scale. Numbers from 0 to 1
pace	int	The time between each flight in milliseconds.


    flythru.config({
       viewport: {
            h: 800, w: 900
        },
        zoom: 1,
        pace: 1000
    });

returns flythru for chaining

flythru.destination

Sets target url for viewport and flights to be run against.
Note: At this time all destinations must be same domain where flythru was extracted to, aka your website.

flythru.destination(string);

Usage, no default value

Param	Type	Description
target page	string	Required: A resolvable web page running a single page JavaScript application that all flights will be on.


  flythru.destination("../index.html");

returns flythru for chaining

flythru.addFlight

Creates a new flight that contains stops and layovers.

flythru.addFlight(string);

Usage, no default value

Param	Type	Description
name	string	Required: The flight name, it will display as a flight header grouping the stops and layovers in the flight control panel.


  flythru.addFlight("My Grouping");

returns flight for chaining

Flight.addStop

Creates a new stop in a flight where a check can be made to pass to go to the next stop, or fail and ground the flight.

Flight.addStop(stopName, flightCallback);

Usage, no default value

Param	Type	Description
name	string	Required: The stop name, it will display as the stop below the flight header in order of addition.
flightCallback	function	Required: A callback function that controls your logic whether to pass or fail this stop.


  /*Flight*/.addStop("My Stop",function(pass,fail,cargo)
  {
    // (true)?pass():fail();
  });


    /*Flight*/.addStop("My Stop",
      function(pass,fail,cargo){
        // (true)?pass():fail();
    });

returns flight for chaining

Flight.addLayover overload 1

Creates a new layover which halts the flight for a specified time and continues by automatically calling pass after time elapses.

Flight.addLayover(ms);

Usage, no default value

Param	Type	Description
ms	int	Required: Time in milliseconds for flight to be halted, then pass is called.


  /*Flight*/.addLayover(1000);

returns flight for chaining

Flight.addLayover overload 2

Creates a new stop but is also a layover! This halts the flight and will call the flightCallback every 1 second until pass() or fail() is called. If neither pass or fail is called prior to the ms time specified, then fail is automatically called and the flight fails and is halted.

Flight.addLayover(layoverName,flightCallback,ms);

Usage, no default value

Param	Type	Description
name	string	Required: The stop name, it will display as the stop below the flight header in order of addition.
flightCallback	function	Required: A callback function that controls your logic whether to pass or fail this stop.
ms	int	Required: Time in milliseconds for flight to be halted.


  /*Flight*/.addLayover(":)", function(pass,fail,cargo)
  {
    // (true)?pass():fail();
  },8000);


    /*Flight*/.addLayover(":)",
      function(pass,fail,cargo){
        // (true)?pass():fail();
    },8000);

returns flight for chaining

FlightCallback(pass,fail,cargo)

This callback controls the progress of the flight and where all your logic should take place.

function(pass,fail,cargo){ /* your code */ }

Usage, no default value

Param	Type	Description
pass	function	When called continues the flight path to next stop to layover.
fail	function	When called it halts the flight and shows red indicator. If a message is passed it will be alerted.
cargo	object	This is a flythru global object shared between flights, stops and layovers. By default it is preloaded with the window object of your site and a toolbox with helper functions. This is here for you to pass data between flights and stops.


  /*Flight.addStop(":)",*/
  function(pass,fail,cargo)
  {
    // (true)?pass():fail();
  }/*);*/


  pass();


  fail(); // optional message
  fail('Alert this message');


  cargo.win; // window object from target
  cargo.toolbox; // set of tools