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.
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.
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.
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:
# Retrieve the parameter value of element_id as supplied from useMango test designer
id = framework.data.get_parameter(“element_id”)
# Empty properties just for reference
element_type = “” # Can be used to limit which kind of web elements to look for
index = “” # 0-based index that can be used to specify which element to pick from a list of matches
container = “” # Not currently supported
element = TypeHelper.create(element_type, id, index, container, framework.log)
# Fails the component if the element couldn’t be found
# Retrieves the current selenium driver
driver = SeleniumDriverFactory.get
# Creates an action chain on the driver and move’s the cursor to the actual Selenium
# element that the ‘element’ variable points to and finally invokes the action
# Signals the framework that the component was successful and writes a message to be shown in the report/UI
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!