Selenium Core Extensions

Here, we are going to discuss Selenium Core Extensions and user-defined extensions. First, let us understand the three pillars of selenium IDE.

1) Action: It commands Selenium IDE to act, i.e., accessing an UI (User Interface) on the web page. E.g. DoubleClick, ClickAndWait, dragAndDropAndWait, etc.

2) Assessors/Assertion: It defines the verifications needs to be done on the data received from UI after running the commands such as verifyElementPresent, verifyExpression, verifyHTMLSource, verifyMouseSpeed, etc.

3) Locator Strategy: It defines a strategy for locating a web element on the Web Page. It could be by name, ID, tag, CSS, XPath, etc.

There are lot more stuffs that could be done using Selenium IDE, but still, it is required to add some more functionalities on the testing need basis for our project. In those scenarios, we can add our custom extensions on the top of the library, also known as ‘User Extensions.’

E.g., If we need to act while testing on a web element to convert the text to a lower case before filling up the details into it. There is no such action that exists in the Action library for Selenium IDE. Therefore, we can create our own user extension to convert text to lower case.

User Extension Creation:

Before started working on user extension for Selenium IDE, we should be well versed with JavaScript, and its prototype object concepts, as shown below:

Selenium.prototype.doTextLowerCase = function(locator, text)

For creating a customized ‘User Extension’ in IDE, we first need to create a JavaScript method. Later, we have to add this method to the Selenium object prototype and PageBot object prototype. Once it is added, we can restart Selenium IDE, and we can see Selenium IDE recognizes all these extensions added in the JavaScript prototype with their name (here doTextLowerCase, etc.).

Given are the ways by which we could define User Extensions in the Selenium IDE.

1) Action:

All actions, i.e, if the action to create an extension for the Lower case text, then its name will convert it to TextLowerCase. After adding this function in Selenium IDE, it will automatically create a wait function for the above action. Therefore, in this case, we will now have two methods known as doTextLowerCase and doTextLowerCaseAndWait.

Selenium.prototype.doTextLowerCase = function(locator, text) {
 //Here findElement method is handling all type of locators i.e. by CSS, XPAth, NAME, ID, etc.
 var element = this.page().findElement(locator);
 // Create the text in to Lower Case
 text = text.toLowerCase();
 // Replace the web element text with the Lower case text.
 this.page().replaceText(element, text);
 };

Explanation of JavaScript code:

• Here, we call the Selenium prototype object to create a new action, doTextLowerCase, which is a method which will accept two parameters, namely, locator and text.
• The locator object might contain the web element’s name, ID, XPath, CSS, tag, etc., for locating the web element using the JavaScript page object’s findElement method.
• Text will act as an argument, we are converting to lower case using the JavaScript method.
• Finally, we are using ‘replaceText’ method of the page object to replace the page text of the selected web elements into lower case.

2) Assessors/Assertion:

We can create our customized function for accessors in Selenium IDE. All Selenium IDE accessors are registered with a selenium object prototype that will always be prefixed by “get” or “is,” e.g., isValueFromCompoundTable, getValueFromCompoundTable, etc. It can accept two parameters where the first parameter is the target and second parameter is the value field in the test case. Let us under this with the help of the following JavaScript code.

Selenium.prototype.assertTextLowerCase = function(locator, text) {
//findElement method is used to locate element.
 var element = this.page().findElement(locator); 
// To verify that the text is converted to Lower case
 text = text.toLowerCase(); 
// To get the value of actual element
 var actualValue = element.value; 
// Make sure that the actual value matches the expected value
 Assert.matches(expectedValue, actualValue);
 };
 Selenium.prototype.isTextASEqual = function(locator, text) {
 return this.getText(locator).value===text;
 };
 Selenium.prototype.getTexAstValue = function(locator, text) {
 return this.getText(locator).value;
 };

Explanation of JavaScript code:

• Here, we call the Selenium prototype object to create a new accessor, ‘assertTextLowerCase,’ which is a method that will accept two parameters, namely, locator and text.
• The locator object will contain the web element’s name, ID, XPath, tag, CSS, etc., for locating the web element using the JavaScript page object’s findElement method.
• Text will act as an argument, we are converting to lower case using the JavaScript method.
• Next, we will store the actual value of the web element into ‘actualValue’ field.
• Using the Selenium prototype object ‘isTextAsEqual,’ we compare the actual value of web element selector by a locator with the value of lower text. If both the values are equal, the method will return true else false.
• Using the Selenium prototype object ‘getTextAsValue,’ we are returning the text value of the web element located by the page object’s findElement method.

3) Locator Strategy:

We can create our customized function to locate an element by extending the PageBot prototype with a prefixed function as “locateElementBy.” This function will accept two parameters. The first parameter is the locator string ‘text .’ The second parameter is the document ‘inDocument,’ where it will search for this locator string as shown below. Below is the example for Lower Case Text Locator.

// The "inDocument" is a document that you are searching for.
 PageBot.prototype.locateElementByLowerCase = function(text, inDocument) {
// It will create the text to search for
 var expectedValue = text.toLowerCase();
 // It will loop through all the elements, looking for the ones that have a value that matches our expected value
 var allElements = inDocument.getElementsByTagName("*");

// The star ‘*’ is a kind of regular expression which will go through every element. Here our aim is to find an element which matches with the Upper Case text that we have passed so that we will search it with all elements and then when we get the match, we will have the correct web element.

for (var i = 0; i < allElements.length; i++) {
 var testElement = allElements[i];
 if (testElement.innerHTML === expectedValue) {
 return testElement;
 }
 }
 return null;
 };

We have saved the above JavaScript code in a file ‘CustomUserExtension.js’ at location ‘C:\\selenium_demo\\’ on the local machine. We will add the mentioned file to Selenium IDE as a User Extension by following steps.

Steps to Add Extension to Selenium IDE:

Step 1: Open the Firefox browser where the Selenium IDE add-on is already installed. Open the Selenium IDE as a pop-up window.

Step 2: Then navigate to the top Menu of Selenium IDE as Options.

Step 3: This will open a dialogue box asking to provide the local path of the Selenium Core Extensions file. Provide the path as mentioned location ‘C:\\selenium_demo\\CustomUserExtension.js’  and click on the OK button.

Step 4: Selenium User extension has now been added successfully. We can observe that both the new methods we created as user extensions are present in Selenium IDE.