Over a million developers have joined DZone.

Create a Custom Selenium IDE Export Format to WebDriver

How to extend the Selenium IDE and add your custom Selenium IDE Export format template.

· DevOps Zone

The DevOps zone is brought to you in partnership with Sonatype Nexus. The Nexus suite helps scale your DevOps delivery with continuous component intelligence integrated into development tools, including Eclipse, IntelliJ, Jenkins, Bamboo, SonarQube and more. Schedule a demo today

If you are in the “test automation business”, most probably you are familiar with the Selenium IDE. Selenium provides a record/playback tool for authoring tests without learning a test scripting language (Selenium IDE). It gives you the ability to export your tests to number of popular programming languages, including Java, C#, Groovy, Perl, PHP, Python and Ruby. However, the built-in formatters cannot be customized and usually are generating not very useful code (not following your framework design). In this article, I am going to share with you how you can extend the Selenium IDE and add your custom Selenium IDE Export format template

Use Firefox Extensions

There are tons of already created Selenium IDE export plug-ins you can always see if some of them are working for you.

Selenium IDE Export Firefox Extension

This allows users to take advantage of WebDriver without having to modify their tests. You can download it from its official add-on page.

Create Custom Selenium IDE Export to WebDriver

You can add any format you like by writing JavaScript code. Follow the steps below:

  • Open Firefox and Selenium IDE

  • Open Options dialog

  • Click Formats tab

  • Create a new format by clicking “Add” button

Selenium IDE Formats Tab

Selenium IDE Formats Tab

There are three empty functions- parse, format, formatCommands.

Parse Function

The parse function is almost opposite of format. This function parses the String and updates test case.

function parse(testCase, source) {
  var doc = source;
  var commands = [];
  while (doc.length > 0) {
    var line = /(.*)(\r\n|[\r\n])?/.exec(doc);
    var array = line[1].split(/,/);
    if (array.length >= 3) {
      var command = new Command();
      command.command = array[0]; command.target = array[1];
      command.value = array[2]; commands.push(command);
    }
    doc = doc.substr(line[0].length);
  }
  testCase.setCommands(commands);
}

FormatCommands Function

The formatCommands function is similar to format function. You can add additional logic to it. In my code format will call formatCommands.

Format Function

The “format” function creates an array of commands contains command object (Command, Target, Value).

function format(testCase, name) {
  var result = '';
  var commands = testCase.commands;
  for (var i = 0; i < commands.length; i++) {
    var command = commands[i];
    if (command.type == 'command') {
      	result += command.command + ',' + command.target + ',' + 	command.value + "\n";
    }
  }
  return result;    
}

Create Complete Selenium IDE Format to WebDriver C# Framework

If we have the following sample base test class. Our goal might be to export our Selenium IDE tests to C# code that uses the methods provided by this base test class.

public class BaseWebDriverTest
{
    private static readonly ILog log = LogManager.GetLogger(MethodBase.GetCurrentMethod().DeclaringType);

    public void TestInit(IWebDriver driver, string baseUrl, int timeOut)
    {
        this.Driver = driver;
        this.BaseUrl = baseUrl;
        this.Wait = new WebDriverWait(driver, TimeSpan.FromSeconds(timeOut));
        this.TimeOut = timeOut;
    }

    public IWebDriver Driver { get; set; }

    public string BaseUrl { get; set; }

    public WebDriverWait Wait { get; set; }

    public int TimeOut { get; set; }

    public IWebElement GetElement(By by)
    {
        IWebElement result = null;
        try
        {
            result = this.Wait.Until(x => x.FindElement(by));
        }
        catch (TimeoutException ex)
        {
            log.Error(ex.Message);
            throw new NoSuchElementException(by, this, ex);
        }

        return result;
    }

    public bool IsElementPresent(By by)
    {
        try
        {
            this.Driver.FindElement(by);
            return true;
        }
        catch (NoSuchElementException ex)
        {
            log.Error(ex.Message);
            return false;
        }
    }

    public void WaitForElementPresent(By by)
    {
        this.GetElement(by);
    }
}

Here you can find the full source code of the new Selenium IDE Export format.

There are a couple of interesting parts of the presented code. Most of the magic happens inside the setCommand function. There, through a switch statement the function generates a string for the corresponding C# code for the used Selenium IDE command. The locator expressions are made in the searchContext.

One more thing, you can use XUL XML (XML User Interface Language) to describe how the format settings form will look like.

this.configForm = '<description>Variable for Selenium instance</description>' +
                  '<textbox id="options_receiver" value="this.Browser"/>' +
                  '<description>MethodName</description>' +
                  '<textbox id="options_methodName" value="TESTMETHODNAME" />' +
                  '<description>Base URL</description>' +
                  '<textbox id="options_baseUrl" value="http://home.telerik.com"/>';

After you add different text boxes and other controls, you can later use the default values set in them in your Selenium IDE Export format.

XUL XML Selenium IDE Export Format

XUL XML Selenium IDE Export Format

Create Selenium IDE Export for Page Object Map Generation

As you, probably know I am a big fan of the Page Object Design Pattern. Until now I have introduced to you a couple of different ways to use the design pattern. Usually, the most tedious part of it is the creation of the element map classes. We can ease the process with the help of Selenium IDE and a new Selenium IDE Export format. This format is going to export to a new file only the elements in the below format.

public partial class BingMainPage : BasePage
{
    public IWebElement SearchBox
    {
        get
        {
            return this.driver.FindElement(By.Id("sb_form_q"));
        }
    }

    public IWebElement GoButton
    {
        get
        {
            return this.driver.FindElement(By.Id("sb_form_go"));
        }
    }

    public IWebElement ResultsCountDiv
    {
        get
        {
            return this.driver.FindElement(By.Id("b_tween"));
        }
    }
}

I haven’t figured a smart way to name the generated elements because of that the first version is producing them with an increasing index suffix added to the element’s name.

Here is the full source code.

The DevOps zone is brought to you in partnership with Sonatype Nexus. Use the Nexus Suite to automate your software supply chain and ensure you're using the highest quality open source components at every step of the development lifecycle. Get Nexus today

Topics:
webdriver ,selenium ,testing ,automated testing ,devops

Published at DZone with permission of Anton Angelov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}