Posted on Leave a comment

How to use Branching

If you need to create the same test for your product multiple times due to minor differences of different settings (e.g. language, browser, environment, etc.), you can use Branching. This function allows to record test steps for all settings under test in just one test case.

Create a first branch

First, you need to create a branch in your predecessor test.

  1. Create a test and record actions in one of your chosen browsers (e.g. Firefox, Chrome, etc).
  2. In the mode create a new variable by clicking .
  3. Name your variable BRANCH using upper case and insert the value according to the current browser (e.g. Firefox).
  4. Click .

Create a second branch

Then create a second branch in your successor test.

  1. Create a new test as a successor and choose in the test settings your previously created predecessor.
  2. In the mode click on the overwrite symbol to the right of your BRANCH variable and insert the new value for your second branch (i.e. Chrome).
  3. Play your test until the step where the branching should start.
  4. Go to mode and enter your variable for the first browser in the field “branch selector” (e.g. Firefox).
  5. Jump to the next step using in the menu of the following step.
  6. Click on “Insert action” and record the first action of your second branch (e.g. double click on Chrome browser). The step will be automatically marked with the name of your second branch.
  7. If the next action of your test is different in the second setting, repeat steps 4 – 6.
  8. If it is the same, simply play the following steps one by one until the action is different again and repeat steps 4 – 6.

In order to run both branches in one schedule, simply create a second successor test and name it according to your first branch.

Posted on Leave a comment

Editor Elements

The three parts of testup.io Editor are:

1. Test Device

The browser window of your website you like to test on the chosen device.

2. Action List

Actions (checks and inputs) are the steps of a test case. An action is either

  1. Check of anchor area and input an action with it or
  2. Keyboard inputs.

3. Editor menu

The interaction panel where you add, configure and run test case steps.

Display screen

Test Device

Test Device displays your website on a Device Screen chosen by you in test case settings. The actions you add during creating a test case are also displayed on a Device Screen. The visible actions are:

  • drawing an anchor area
  • performing a click
  • performing a swipe
  • selecting sections of you website

On the device screen you see the results of all checks and inputs.

Anchor Area (fail and pass)

The core of testing is the definition of anchor areas. If the reference image in the anchor area is not found on the Test device, the test status returns fail. If all anchor areas of a test were found during a run, the test status returns pass.

Marked left is a click input which follows after the anchor image “magnifying glass” has been found.

Action list

Action list provides you with detailed information before, during or after recording a test step.

  • Definition of the recorded action (check, swipe, press key etc.)
  • an image of anchor area
  • hint tabs for a new action
  • navigation inside the test (playing next, play to here, insert new action)
  • three dots menu

Three dots menu

It is a useful feature for all modes when you need to play or add a certain action. Use three dots menu to

  • jump to needed test step
  • split test
  • disable a test step
  • delete a test step

Editor menu

Editor menu consists of sections that are easy to navigate: , , , , modes, and buttons.

Play mode

Testup runs the steps of the test case on Test Device. Similar to a video player, you can control the execution using the , , and buttons.

Insert mode

Editor switches to mode when you need to add a new step.

Use the interaction panel of mode to add such actions as:

  • Enter text
  • Password
  • Keyboard (virtual keyboard with basic commands)
  • Scroll
  • Copy, Paste and more keys such as Select All, Cut, Copy, Paste
  • Wait
  • Open URL
  • Browser actions such as Refresh, Next Tab, Back, Forward
  • Tag
Insert mode to insert a test step

Edit mode

In mode you can edit and configure actions after the anchor area was successfully recorded.

  1. Clicks
  2. Swipes
  3. Hover
  4. OCR
  5. Find

If anchor area was not found and test step fails, use mode to fix test case and create such actions as:

  1. Play it
  2. Delete a test step
  3. Cut & Keep a test step
  4. Enable/ Disable a test step
  5. Timeout
  6. Retake Image

If anchor area can only be found in a specific setting (browser, language, environment, etc.), use branch selector in mode to assign it to a specific branch.

Posted on Leave a comment

Anchor Area

What is it?

An anchor area is an area of the website that you select to check.

To define an anchor area

  1. Click on left button of the mouse and draw a dashed rectangle.
    Now the selected area is scanned. This area is called an anchor area. It is the basic action in visual testing.
    Once an anchor area is defined, it is possible to perform different actions such as check, click and swipe.

What do you use it for?

Check for a Healthy Website

Healthy Website means that all elements of the page are correct and in the right place. Therefore good anchor areas are:

  • Page Titles,
  • Order Confirmations,
  • Static headlines,
  • Static images, and
  • all other static parts of the webpage.

Determine Anchor Areas to perform the next action

Anchor areas are also used to determine if the next action can be done, especially clicks and keyboard inputs. For clicks, drawing an anchor area is mandatory. This allows us to wait until the page is ready and not still loading. Good anchor areas to perform clicks (swipes, keys) are:

  • Button text
  • Links
  • Menu items
  • Search and input fields
  • and everything which can take a click.

Note, that you can click outside of anchor areas. They indicate when, not where the click appears.

Please notice

Do not record Areas which are changing

If you record an anchor area, which is planned to change, the test will break. Examples for changing content are:

  • Text with Date / Time
  • Comments
  • Number of likes
  • Video
  • Product of the day

Do not record areas which contain something from above.