QAutoflow userguide

1 Getting started with QAutoFlow

This is a simple userguide to QAutoflow tool

1.1 Intro

QAutoflow is a tool for designing automated tests and robotic process automation (RPA) in Web based platforms with browser extension. RPA systems develop the action list by watching the user perform the task in the application’s graphical user interface (GUI), and then perform the automation by repeating those tasks directly in the GUI.

chrome

1.2 Features

QAutoflow is a great and cost effective tool for generating test design and process automation.

Its main features are:

  1. Process or test flow design for web based applications

  2. Watching and collecting

    • Process or Test spefication

    • User inputs and actions

    • Verifications

  3. Creates

  4. Visualized flow specification with HTML document

  5. Link specification to test management tool or RPA process

  6. Simple install and usage with Chrome browser extension

1.3 Start QAutoflow & Pre-conditions

  1. Make sure that Windows zoom level is 100%.

    • Windows: Settings - System - Display - Scale and layout

    windows_scale

  2. Make sure that Chrome browser zoom level is 100%.
    • Windows: Chrome - Settings - Appearance - Page zoom (Can also be adjusted in browser with CTRL + Mouse wheel)

  3. Start QAutoflow from the folder where you unzipped QAutomate Tools and run QAutoFlow.exe

  4. Now you can open the main dialog by clicking QAutoFlow extension icon.

    icon

2. QAutoflow UI components

QAutoflow UI components introduction

2.1 Dialog windows

QAutoflow has the following three dialogs:

  1. Main dialog

    main_dialog

  2. Step input dialog

    step_input_dialog

  3. Verification dialog

    verification_dialog

2.2 Modes

QAutoflow has two modes;

  1. Idle mode

  2. Flow design mode

  • The tool starts in idle mode, waiting for user input

    • Select project working directory. Project Destination must be a folder with absolute path or select from dropdown history if it exists.

    • Give name to the use case or RPA process. Name has to be unique.

    • Set URL that acts as a starting point for the flow

    idle_mode

  • When the “Start design!” button is pressed, tool goes into flow design mode and you can

    • click or input user actions and name test steps and add comments to them and

    • perform series of actions ( drag-and-drop, hover menus,…) by right-clicking on it and choosing an action from the context menu.

      • Run robot keywords. Robot keywords and libraries must be in project folder.

      • Start action chain and add verification, explained in detail in section 2.7 Right-click menu actions

    flow_design_mode

  • When the “Stop design” button is pressed, tool goes back to idle mode. Created testcase is saved and the tool waits for a new case to be started.

    idle_mode

2.3 Main UI Flow settings

2.3.1 Flow settings

Flow user settings can be configured Settings tab

settings

Following settings are available:

  • Image type (png/jpeg)
    • png (default) option

    • jpeg lower quality and smaller image sizes. Use this in big image webpages.

  • Video recording
    • off (default): video recording screencast is off, screencast is not recorded during flow creation

    • on: video recording screencast is on, screencast is recorded during flow creation

  • Flow mode
    • Regression: Flow steps are added and named one at a time and confirmed manually

    • Exploratory: Flow steps are added automatically as you perform actions in the browser

  • Mobile
    • off (default): Normal flow creation

    • on: Necessary for creating mobile flow, sets starting URL automatically (See 6.1 Experimental Mobile flow)

2.4 Merging project history

In the case of multiple users you can merge flow history files. We propose that you keep master (test_flow_history.json) history in version control which will be updated by other slave history files.

Merge tool will merge slave history to master file appending new step and new data to existing steps.

mergetool_ui

1
c:\INSTALL_FOLDER\QAutomate\python qautoflow_mergetool.py

2.5 Main UI Advanced settings

2.5.1 Testability attributes

UI testability is an important factor in recognizing UI elements. QAutoflow is analyzing and collecting element locators in recording phase. You can guide the flow recorder to pick the best element locator with giving testability attributes if those exists in the web application.

Example: If project has elements with attribute data-name=”homePageButton” or data-id=”someButton”

Add testability attributes values data-name, data-id to QAutoFlow –>

advanced_settings

2.6 User toast messages

User toast messages appear at the right-lower corner of the screen and inform user about the action that just took place.

toast1

toast2

2.7 Right-click menu actions

Right-click menu items are dynamically built depending selected element properties and state. Following options available:

right_click_menu

  • Verify text (visible depending element properties)

  • Verify value (visible depending element properties)

  • Verify attribute (visible depending element properties)

  • Send click (visible if action chain is not started)

  • Send doubleclick (visible if action chain is not started)

  • Send hover (visible)

  • Start action chain (visible if action chain is not started)

  • Dynamic Variable (visible)

  • Javascript Runner (visible)

  • Run keyword (visible)

  • Add/edit comment to step (visible)

  • Add open URL step (visible)

  • Cancel (visible)

Verification dialog changes based on the element type to support different kind of validations. Below are mentioned a few of these.

2.7.1 Verify text

Verification of browser element’s text value

text_verification

You can also choose “Text contains” verification if test needs to be done partially in the text.

2.7.2 Verify value

Verification of browser element’s value

value_verification

You can also choose “Value contains” verification if test needs to be done partially in the value.

2.7.3 Verify attribute

Verification of browser element’s attribute value

attribute_verification

You can also choose “Attribute contains” verification if test needs to be done partially in the attribute.

2.7.4 Send click/double click

This enables user to set mouse click action to an element that needs trigger by clicking. This is useful when recording a step that requires e.g. popup windows to be open as a starting point or when dealing with an element that requires doubleclicking

send_click

2.7.5 Send hover

This enables user to set mouse hover action to an element that needs trigger by hovering. This is useful e.g. when validating a tooltip that requires mouse hover event to be displayed.

send_hover

2.7.6 Start/Stop action chain

Start action chain allows user to make more than one browser action that involves e.g drag and drop, dynamic input field or dynamic hover element.

User can begin the chain of actions by selecting Start action chain, make a series of browser actions and finally end it by selecting Stop action chain.

action_chain

2.7.7 Dynamic Variable

Dynamic variable allows you to save changing (dynamic) data as a variable.

You can store a dynamic variable by right clicking an element whose contents you would wish to store, e.g. the price of a product in a webstore.

dynamicvariable

2.7.8 Add/edit comment

Add / edit comment allow you to modify steps comments.

edit_comment

2.7.11 Cancel

Closes the context menu and another step can be created in design mode.

3. Flow creation

Description on how to make test or process design with QAutoflow extension.

3.1 Test or process design

Precondition: Special characters can not be used in

  • Flow name in main dialog

  • View name in step input dialog

  • Step name in step input dialog

but can be used in

  • Step comment in step input dialog

  • Input field in verification dialog

  1. Start recording by clicking the QAutoFlow icon in the upper right corner of the browser which will open the Main dialog, see 2.2 Modes.

    chrome

    • In Main dialog, select project folder, name the test flow and set URL for the page where you’d like to start your testing.

    • Click “Start design!” button to activate the flow design mode.

  2. Make a browser action on the current browser window.

    browser_action

    • Click (Left click on browser element)

      Note

      If browser scrollbar is needed before click action, wait 3 seconds between scrolling and clicking so that screenshot is taken.

    • Input, if element is e.g a textbox (Left click + Input with keyboard)

    • Verification (Right click + Select from menu)

    • Send click, Send hover (Right click + Select from menu)

  3. After creating the test step action as described in step 2, set test step details.

    step_desc

    • Give view a name ( e.g what you are doing in the step ) (mandatory)

      In the prompt you may enter view name (the view you make the step from). If the step is already in history - the tool will suggest the previously saved action.

    • Give step a description (mandatory)

      Step name (mandatory field where a meaningful step name should be inserted). If the step is already in history - the tool will suggest the previously saved action.

    • Give additional information (optional)

      Step comment (additional info). This comment is saved also to the test documentation.

    • Choose Dynamic data as True if browser element in question is a dynamic element, which means it changes every time the page changes. In the newly opened field, input the data which you would like to test as that dynamic element’s value.

    dynamic_data

    • Confirm the test step with confirm (tick) button or cancel step without adding the changes to the test flow.

    • Confirmed test step will be added to the test flow.

  4. Wait until toast message appears before continuing to next step.

    • Toast message is a confirmation of screenshot of the test step being saved with highlights to the visual html report.

  5. Repeat steps 2, 3 and 4 until you have added all test steps.

  6. Stop flow design from Main dialog

    flow_design_mode

  7. You may exit the QAutoflow application from the exit button.

    exit_qautoflow

3.2 Generation/Transforming

Completed flow can be generated straight from Flow UI if you have QAutoRobot transform license:

After stopping QAutoFlow design, select Transform mode: RPA and click Tranform in QAutoFlow’s advanced settings. AI based transform is optional.

advanced_tab

The path where local transform generates to can be configured in:

c:\INSTALL_FOLDER\QAutomate\config\project_config\local_transform.json

If path is empty, files go to Flow project folder (default)

3.3 Special conditions and hotkeys

3.3.1 Working with browser tabs

While working with QAutoflow tool, only one Chrome window should be open during the test. Additionally, before starting the test, in other words before pressing “Start design!” button, any extra tabs that were opened in that specific window should be closed.

If a new tab opens during the test creation as a result of a test step and

  • if a test step is added in the new tab, in order to proceed test creation with the main tab;
    1. the user should activate the main tab,

    2. create a new test step, and

    3. and only then close the previously opened new tab.

  • if a test step is NOT added in the new tab, user can simply close the new tab.

Note

Browser’s back button should not be used while navigating through tested pages.

3.3.2 Hotkeys

Hotkeys for special cases:
  • Recognize web iframe open
    • Ctrl + Shift + 1

  • Locators shortcut
    • Ctrl + Shift + 2

  • Comment shortcut
    • Ctrl + Shift + 3

4. Flow design results

  • Saved files are under project_folder

    • Flow directory contains:
      • Test flow history file

    • Usecase name e.g demo directory contains
      • flow.html visual HTML from use case

      • test.flow.json.enc script data encoded format

    result_folder

  • Visual html can be found under usecase folder with the name flow.html.

    visual_report

  • CSV test documentation

5. Tips and Tricks

  • Always wait until toast message appears before continuing to a new test step

  • If you click an input field, enter the input before adding the test step. See example below

    input_field

Test flow history merging

QAutoflow creates test_flow_history.json file which stores data from each test step. Test flow history merging functionality makes possible to merge two different test_flow_history.json files. E.g. if you have two QAutoflow projects which have different tests and steps and these project histories needs to be merged, it can be done by running merge_history_files.py.

How to use merge_history_files.py:

  • Let’s say we have two QAutoflow projects, QAutoflow_master and QAutoflow_slave which both are located under C: Drive

    1. In Command Prompt, navigate to QAutoflow_master folder

    1
    cd c:\QAutoflow_master\QAutoFlowDesigner
    
    1. Run command:

    1
    python merge_history_files.py -m test_flow_history.json -s c:\QAutoflow_slave\QAutoFlowDesigner\test_flow_history.json
    
  • Parameter -m represents master json file

  • Parameter -s represents slave json file

Only the data that slave json file has but master json file has not will be merged. If history files has the same data e.g. login steps data, it will not get overwritten from slave to master. Merged history file will be saved in current working directory as a result.json file.

6. Examples

6.1 Experimental Mobile flow

  1. Make sure that
    • mobile setting is on (default:off, change and restart flow if needed) and

    • android emulator is running.

    Starting URL should point to mobile_screen.html

    example_mobileflow1

  2. Start design

  3. To launch an app, enter APK name or package name and press launch

    example_mobileflow2

  4. Wait for toast messages to disappear and screen to refresh

    example_mobileflow3

  5. Click screen to send taps/navigate (here we are navigating to widgets)

Note

Remember to wait for the screen to refresh and toast messages to disappear before adding steps

  1. To send text, enter text in Input to Android Debugger field and check “Send text”-box

    example_mobileflow4

  2. Click the point on screen where you want to send the text

    example_mobileflow5

Note

You can use Refresh button if the html page and emulator aren’t synced