The scrolling of the Device Screen has to be scheduled as an action. For scrolling, you have two main options: use Editor menu or Keyboard input.
Optionally you can scroll by Mouse clicks.
Editor menu in Insert mode
The buttons on Editor Menu repeat keyboards commands.
Make sure the Editor is in mode.
Click on on Editor Menu.
Choose keys to scroll the page up and down, or choose more keys.
To scroll to a precise position on the device screen, click and enter number of pixels.
Keyboard
Make sure the Editor is in mode.
Editor menu in Insert mode
Press the following keys on your keyboard to scroll:
[UP] Scrolls the page a few pixels up. [DOWN] Scrolls the page a few pixels down. [PAGE UP] Scrolls a whole page up. [PAGE DOWN] or [SPACE] Scrolls a whole page down. [HOME] Scrolls to the top of the page. [END] Scrolls to the end of the page.
Mouse Swipe
To scroll the page down using mouse, schedule a swipe on the scroll bar.
Make sure the Editor is in mode.
Press left button of mouse on the Device screen and drag it down to a needed end point – the start and end of segment is marked with orange line
The key to working efficiently with the Testup editor is using short cuts.
Short cut to [Play it] for mouse clicks is [SPACE]
Short cut to [Play it] for text inputs is [ENTER]
Create a new Text input: Just type the Text
Create a new Key input: Just type the Key
Example: Testup Merchandise
After following the steps in Getting started, you can continue with purchase. You need to fill out the following form:
Bring the cursor to the first form field
The first thing you do is to bring the cursor to the “First name” field. Select “First name” as an anchor area and schedule a Click on the input field.
Press [SPACE] on your keyboard, which is the short cut for [Play it]:
Fill in Text Form Fields
Type the “First name” with your keyboard: Type “Barbara” and a new action is created.
Press [ENTER] to execute the action on the device and to perform [Play it].
First name “Barbara” has been inserted.
Press TAB to schedule a key press [TAB] on the system under test which will send the cursor to the next form field.
Type “Mustermann” on your keyboard.
Press [ENTER] to perform [Play it].
Check that Text action has been created and the correct text has been entered to the form field.
Press [TAB] to schedule a key press [TAB] on the Test device which will send the cursor to the next form field.
We do not want to enter a company name. So we send the cursor to the next input:
Press [TAB] to schedule a key press TAB on the Test device which will send the cursor to the next form field.
Fill in drop down menu
Now, we need to select the entry of the drop down menu. Note that drop down menus are different than other input fields and they need to be selected by keyboard entries, only. Use the arrow keys [Up] and [Down] to select the entry you need and confirm with scheduling [ENTER].
In our example, we can also use text to select the correct entry form the drop down menu. Thus,
Type with your keyboard “Switz”
Press [ENTER] to confirm the text.
Press [ENTER] to schedule an [ENTER] click on the system under test and perform [Play it].
Fill the remaining fields
Press [TAB] to schedule and action to send the cursor to the next input field.
Type with your keyboard “Fakestreet”
Press [ENTER] to perform [Play it].
Press [TAB]
Type with your keyboard “8000”
Press [ENTER] to perform [Play it].
Press [TAB]
Type with your keyboard “Faketown”
Press [ENTER] to perform [Play it].
Press [TAB]
Type with your keyboard “0041000000”
Press [ENTER] to perform [Play it].
Press [TAB]
Type with your keyboard “barbara.mustermann@example.com”
Press [ENTER] to perform [Play it].
Press [TAB]
Press [TAB]
Finally you reached the “Place order” button. From the red border you can tell that the cursor is right at the button. So we can click this button by pressing an [ENTER] key and executing it.
Press [ENTER] to schedule an [ENTER] click on Test device and perform [Play it].
Now, we perform the last check by selecting “Order received” as an anchor area.
Now, the Purchase test has been recorded.
Now, we should play the test to see if it works correctly. Press [Done] on the bottom right or top right of the editor to close it.
Run the test with the robot
Closing the editor brings us to the test detail page, were we can execute the test and change its settings.
Press Play to check if the test runs smoothly.
If the test status turn green, everything was fine. If it turns red, the test failed due to a failing anchor area check or a technical error. Then, edit the test and resolve the issue.
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
Check of anchor area and input an action with it or
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.
Clicks
Swipes
Hover
OCR
Find
If anchor area was not found and test step fails, use mode to fix test case and create such actions as:
Play it
Delete a test step
Cut & Keep a test step
Enable/ Disable a test step
Timeout
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.
The Editor supports mouse actions to perform and record Clicks on the Device screen. Once you click, a unique anchor area is automatically defined and the action can be recorded.
Left mouse Clicks
To record a left mouse Click:
Make sure the Editor is in mode.
Simply click on Device screen where you need. The action will be played automatically and recorded in Action List.
Right mouse Click
To record a right mouse Click:
Make sure the Editor is in mode.
Simply perform a right mouse Click on Device screen where you need. The action will be played automatically and recorded in Action List.
Double Click
To record a Double Click:
Make sure the Editor is in mode.
Simply perform a Double Click on Device screen where you need. The action will be played automatically and recorded in Action List.
Please notice
In case your website is dynamic, a selected anchor area must be fine-grained to reach a stability. Click can be performed as follows:
Make sure the Editor is in mode.
Draw an anchor area around a stable element of the website
An anchor area is an area of the website that you select to check.
To define an anchor area
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.
testup.io is a visual test automation app. You don’t need any coding skills. We want you to have an easy start with our app.
After registration/login:
Click on
Click on
Click on
In please type in input data for your test case: name of the test, url (address of the website under test) and dimentions. There is a variety of test devices of your choice. Press and start testing!
The Video gives you a short overview of how you can jump-start your website testing with testup.io.
The Three Parts of the Editor
On the left side of the editor, you see the browser window of your website you like to test.
On the right, there is the list of checks and inputs.
On the top, there is an editor menu.
Anchor Areas
You need to select an anchor area, which indicates that the website is correctly loaded and the next action can be performed.
Anchor areas are easyly recorded by selecting the desired area with the mouse.
Play
By clicking the play button you execute the action(s). Then you can select the next area for a check.
If the testup.io AI finds all recorded areas on the page, the page is good.
Clicking on a Button
A common command on webites is to perform a search on the site by clicking the search button.
The precondition for the search is that the search button is visible on the site. To check this you can mark the area with the search button and schedule a click.
Clicking the play button searches the magnifying glass icon and clicks on it. The search input field will then appeare on the left.
Enter Text
If you want to enter text to a input field, you have to check first, if that input field appeared. If so, you can send text keys to it.
That means your test checks the search input field by selecting it as an anchor area. Then, you schedule a click and play the action.
Then you can schedule text input simply by typing the text you want with your keyboard and press the play button. The text appears then in the input field.
Enter Special Keys
Entering special keys works in the same way as entering text. Just press the key and the command is recorded.
But it is also possible to press one of the special keys in the insert section in the control center.
Pressing the play button will perform the action.
In this test the search results appear.
Swiping
In order to see the picture of the first item in full, you need to scroll.
You can schedule a swipe in the test, just by swiping on the browser screen.
Then you can check that the item is visible in full.
