useMango™ ships with an extensive framework of components which allows you to automate the common parts of an application but there comes a time when you have that special need. For this circumstance useMango™ allows you to extend the default components with your own scripted ones. This requires a little bit of technical know how but if you have that the possibilities are endless. You have the strength of a scripted testing solution whilst allowing reuse with parameters and componentization .

To exemplify this, we will in just a few simple steps create a custom component to hover a web element using Selenium.

1. Create the custom component

In useMango™ component library locate the Add custom button.

Add custom button

2. Edit component details

The new component will be opened in the right hand pane, go ahead and change its name and description to find it easier later on. Leave the parameters for now.

component settings

3. Set related resources and engine

By default the component will be set to run as a Ruby component and using the Ruby-WebDriver resource group. This means that the framework for Selenium will be loaded and that the component can be scripted like the other Web components in the Ruby language. We can leave these settings as is since the default is correct for our purposes.

4. Edit the script

We needn’t change much in the script as it already provides us with some logic to find an element with a given name. What we will do is to change this to an unspecified id so that the user of the component can input id=, name=, css= to what suits the purpose. When we change the name of the parameter and click outside the script window the parameter will automatically update in the parameter list.

updated component script

5. Change the script to hover the element

First up we will add a function call to the element to verify that it has been found, in the useMango™ Selenium function this is done using the assert_exists method. After that we need to retrieve the Selenium driver to build an action chain and perform it on the actual Selenium element. The final scripts looks like this:

Anyone in your team can now use this component in any test by supplying it with an identifier to any element to hover.

Time to pimp that component library!