Posted on Leave a comment

How to work fast with form fields (Keyboard short cuts)

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.

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

Left Click, Right Click, Double Click

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.

  1. 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.

  1. 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.

  1. 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.

  1. Draw an anchor area around a stable element of the website
  2. Place a cursor where you want to click
  3. Perform a Click by pressing mouse buttons.
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.

Posted on Leave a comment

How to use WPStageCoach.com for WordPress

Introduction

WP Stagecoach, just from its name, offers WordPress users the ability to place their WordPress websites on wpstagecaoch.com to preview and fix all needed changes before importing it to their live sites. Therefore, in this piece, you will learn how to use the WP Stagecoach plugin for your WordPress website.

What does Staging mean in Web Development?

Staging is cloning a website that is independent of a live site that visitors can see. The staging website looks just like the live website but offers you safety as it is placed in a staging area while you are working on it.

Why use a Staging Environment?

  1. It allows you to modify your website without affecting your live site. So, no downtime and your audience can keep accessing your website while making those changes in maintenance mode.
  2. SEO ranking is not affected while trying new changes and settings to your site since search engines won’t be able to index your staging website.
  3. You are also able to run tests on your site before going live.
  4. You can redesign or revamp any website with a staging site easily.

Development and Maintenance

Whether the website is in the development phase or the Live phase, WP Stagecoach offers you limitless features to carry out any routine check you need to your website.

WP Stagecoach is a one-click WordPress staging solution known to work on every web host and doesn’t overwrite your database during import. You can troubleshoot for days during the maintenance while e-commerce and other plugins take orders or registrations. This unique WordPress staging plugin uses a ‘database merge’ feature—not an overwrite feature—to ‘push’ your updates live in one click, and you never lose your data or re-do your work again!

How to Create a Staging Site with WPStagecoach.com

Sign up for a WP Stagecoach account:

After completing your purchase, the next thing to do is download the WP Stagecoach plugin, either from your Account page or from the link sent to you in your purchase confirmation email.

Download the Plugin and Install:

Visit Plugins –> Add New, click on Upload Plugin. Locate your copy of WP Stagecoach, then click ‘Install Now.‘ After installing the plugin, click ‘Activate Plugin.

Enter your License Key: 

In your dashboard menu, click on WP Stagecoach in your dashboard menu. Fill your username (the one you chose when you signed up for WP Stagecoach) and API key. The API key can be found in your purchase confirmation email or on your Account page.

Creating the Staging Site:

To create a staging site, click on WP Stagecoachin your dashboard menu. Click Ride the Stagecoach! If you want, you can adjust some options before you create your staging site: After you click Ride the Stagecoach, the WP Stagecoach will go through a series of steps to develop it.

Editing the Staging Site: 

Once the staging site is done, a URL would be generated for you, where you can view your site. You can sign in to your staging site’s WordPress dashboard using the same username and password currently used on your live website. It is possible to also connect to your staging site via FTP or SFTP using the credentials displayed on the WP Stagecoach page.

Use this duplicate of your site for testing your changes: Install your plugin customization, theme changes, WordPress core update or plugin update on this site. Your live site stays unaffected. Visit all relevant pages and flows like user registration and check if everything is ok. We at Testup can help you doing this automatically. If yes, you can proceed. If no, you have plenty of time to solve the issue since your live site stays untouched.

Importing Changes Back to Live Website: 

Go to WP Stagecoach –> Import Changes. Click on Check for changes to see what changes have been made on your staging site. When completed, you can choose from three different kinds of import; One-click, Advanced, and Manual.

Cleaning Up and Deleting your Staging Site:

Once the import is finished, check your live site to make sure that the changes are imported. The moment that is confirmed, you have two options; Clean up and delete staging site OR Clean up options, which are quite straightforward.

Conclusion

WP Stagecoach offers you great user-friendly features to successfully stage any WordPress website, and more so, it is very compatible with all hosts.

Posted on Leave a comment

What IP Addresses Should I Allow Through my Firewall?

In case your device is Browser or Desktop->Linux

In case you like to test within a restricted environment, you need to allow access of our public IP address to your website.

Thus, you should allow the following IPs:

3.65.122.186

with https, i.e. TCP on port 443

with http, i.e. TCP on port 80

or what you specify in your url.

In case your device is Mobile or Desktop->Windows

We do not provide a static outgoing IP on default. In case you need a custom static outgoing IP, please contact us.