Code Export in Selenium IDE
Tags: testing, java, github, opensource
Published: 2020-01-08 18:21:15

[Selenium IDE](https://selenium.dev/selenium-ide/) is not sitting still. Since its relaunch last year, [Selenium IDE developers have been busy](https://applitools.com/blog/why-selenium-ide-2019?utm_term=cat&utm_source=syndication&utm_medium&utm_content=blog&utm_campaign&utm_subgroup=devto) responding to user enhancement requests.  One highly-requested has just been released – the ability to export code from Selenium IDE for use in [Selenium WebDriver](https://www.seleniumhq.org/projects/webdriver/). Code export from Selenium IDE today works with [Java JUnit](https://junit.org/junit5/). The development team is looking for community members like you to add to the capabilities of Selenium IDE.

The code is being hosted and is available on Github. You can see examples as well as develop your own export capabilities.

But, first, here is what’s new.

#Getting Started#
You can export either a test or suite of tests to WebDriver code by right-clicking on a
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cvqhsb7pheu6mksb60ox.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kezrlpyu4r43afab2wv3.png)

test or a suite, selecting **Export**,   choosing your target language, and clicking **Export**.

This will save a file containing the exported code for your target language to your browser’s download directory.

##Origin Tracing Code Comments##
When exporting there is an optional toggle to enable origin tracing code comments.

This will place inline code comments in the exported file with details about the test step in Selenium IDE that generated it.

##Supported Exports##
Currently, Selenium IDE export to Java. Specifically, Java for JUnit.

The Selenium IDE team intends to support all of the officially supported programming language bindings for Selenium (e.g., Java, JavaScript, C#, Python, and Ruby) in at least one testing framework for each language.

Contributions are welcome to help add new languages and test frameworks for a given language. See [**How To Contribute**](https://selenium.dev/selenium-ide/docs/en/introduction/code-export#how-to-contribute) for details on how.

##Java JUnit##
The exported code for Java JUnit is built to work with Java 8, JUnit 4.12, and the latest version of Selenium 3.

You should be able to take the exported Java file and place it into a standard Maven directory structure with a pom.xml file listing these dependencies and run it.

##Contributing to Code Export for Selenium IDE##
Code export was built in a modular way to help enable contributions.

Each language and test framework will have its own package containing the code to be exported. Each snippet of code maps to a command in Selenium IDE and each of these packages rely on an underlying “core” package which does all of the heavy lifting.

Here are the steps to create a package for a new language or for a new test framework within an already established language.

###1. Create a new package###
First, copy an existing language package (e.g., packages/code-export-java-junit) and rename it (e.g., the folder and the details in the package.json file) to the target language and framework you’d like to contribute (e.g., packages/code-export-ruby-rspec, etc.).

Next, add the new package as a dependency to [**the package.json in code-export**](https://github.com/SeleniumHQ/selenium-ide/blob/c55c556ffc947fd3f6ee8ab317915c6f879a88dc/packages/code-export/package.json#L22).

Lastly, run yarn from the root of the project.

###2. Update the locators and commands###
The core function of code export is generating the language specific strings. The most prominent of these are the commands and locator strategies (e.g., the syntax for the “by” lookups).

For a given language, there is a file for each, along with accompanying test files.

You can see an example of that in github: packages/code-export-java-junit.

 - [Commands](https://github.com/SeleniumHQ/selenium-ide/blob/v3/packages/code-export-java-junit/src/command.js)
 - [Command Tests](https://github.com/SeleniumHQ/selenium-ide/blob/v3/packages/code-export-java-junit/__test__/src/command.spec.js)
 - [Locator Strategies](https://github.com/SeleniumHQ/selenium-ide/blob/v3/packages/code-export-java-junit/src/location.js)
 - [Locator Strategies Tests](https://github.com/SeleniumHQ/selenium-ide/blob/v3/packages/code-export-java-junit/__test__/src/location.spec.js)

When declaring new commands you can either specify its output [**as a string**](https://github.com/SeleniumHQ/selenium-ide/blob/v3/packages/code-export-java-junit/src/command.js#L192), or as an [**object which specifies indentation levels**](https://github.com/SeleniumHQ/selenium-ide/blob/v3/packages/code-export-java-junit/src/command.js#L242-L249)).

Built into code-export is a prettifier which controls the indentation of the outputted code. This structure is useful if a command’s output is verbose and you want to be explicit. Or if the command changes the indentation level of the commands that come after it.

###3. Create the hooks###
Hooks make up a majority of the structure of the code to be exported (e.g., a suite, a test, and all of the things that go into it like setup, teardown, etc.). They are also what enables plugins to export code to different parts of a test or a suite.

There are 9 different hooks:

 - afterAll (after all tests have completed)
 - afterEach (after each test has been completed – before afterAll)
 - beforeAll (before all tests have been run)
 - beforeEach (before each test has been run – after beforeAll)
 - command (emit code for a new command added by a plugin)
 - dependency (add an addittional language dependency)
 - inEachBegin (in each test, at the beginning of it)
 - inEachEnd (in each test, at the end of it)
 - variable (declare a new variable to be used throughout the suite)

See an example of hooks being implemented in packages/code-export-java-junit here: [**Hooks**](https://github.com/SeleniumHQ/selenium-ide/blob/v3/packages/code-export-java-junit/src/hook.js)

###4. Update the language specific attributes###
In each language you need to specify some low-level details. Things like how many spaces to indent, how to declare a method, a test, a suite, etc.

Find an example of this being implemented in packages/code-export-java-junit here: [**Language specific options**](https://github.com/SeleniumHQ/selenium-ide/blob/v3/packages/code-export-java-junit/src/index.js)

###5. Add it to the mix###
Once you’ve got everything else in place, wire it up for use in the UI.

This is possible in [**packages/code-export/src/index.js**](https://github.com/SeleniumHQ/selenium-ide/blob/v3/packages/code-export/src/index.js).

You will need to:

 - Import your new code-export package
 - Update availableLanguages with details about your code-export language
 - Update exporter to reference your code-export name and import

###6. Test and tune###
The best end-to-end test for code export applies a series of tests and verify that they run as you would expect.

From a development build, access the seed tests and verify that all of the standard library commands work for your new language.

Test, fix, and test again until you have confidence with the end result.

###7. Submit a PR###
You’ve done the hard part. Now simply submit a PR. Please do so against the [**v3branch**](https://github.com/SeleniumHQ/selenium-ide/tree/v3).

#For More Information on Selenium IDE:#
The [original version of this article](https://www.seleniumhq.org/selenium-ide/docs/en/introduction/code-export/) appears in the Selenium IDE documentation site.

###Selenium IDE pages###
 - [Selenium IDE documentation](https://www.seleniumhq.org/selenium-ide/)
 - [Selenium IDE tutorial](https://applitools.com/tutorials/selenium-ide.html#selenium-ide-videos)
 - [Selenium IDE on Google Chrome Store](https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd)
 - [Selenium IDE on Firefox Store](https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/)
 - [Selenium IDE GitHub page](https://github.com/SeleniumHQ/selenium-ide)
 - [Selenium IDE (SIDE Runner) npm page](https://www.npmjs.com/package/selenium-side-runner)
 - [Selenium IDE on Stackoverflow](https://stackoverflow.com/questions/tagged/selenium-ide)
 - [Selenium IDE on Quora](https://www.quora.com/topic/Selenium-IDE)
 - [Selenium IDE on Reddit](https://www.reddit.com/search?q=selenium+ide)
 - [Selenium IDE on Hackernews](https://www.google.com/search?q=site%3Anews.ycombinator.com+selenium+ide)

###Applitools for Selenium IDE pages###
 - [Applitools for Selenium IDE product page](https://applitools.com/selenium-ide?utm_term=cat&utm_source=syndication&utm_medium=&utm_content=free-account&utm_campaign=&utm_subgroup=devto)
 - [Applitools for Selenium IDE documentation](https://applitools.com/docs/api/selenium-ide/side-introduction.html?utm_term=cat&utm_source=syndication&utm_medium=&utm_content=documentation-page&utm_campaign=&utm_subgroup=devto)
 - [Applitools for Selenium IDE on Google Chrome Store](https://chrome.google.com/webstore/detail/applitools-for-selenium-i/fbnkflkahhlmhdgkddaafgnnokifobik)
 - [Applitools for Selenium IDE on Firefox Store](https://addons.mozilla.org/en-US/firefox/addon/applitools-for-selenium-ide/?src=search)

###Selenium IDE videos###
 - [Selenium IDE tutorial video playlist](https://www.youtube.com/playlist?list=PLkqF-NUszJY64CJ-ahQPwHciDw7nMLW04)
 - Dave Haeffner presenting [Selenium IDE at Selenium Camp](https://www.youtube.com/watch?v=P52XAyPzJa0)
 - Dave Haeffner presenting the [new Selenium IDE launch webinar](https://www.youtube.com/watch?v=4783frggc-E)
 - Tomer Steinfeld on [how he built the new Selenium IDE](https://www.youtube.com/watch?v=aBod5TJJuOU)
 - Joe Colantonio presentation on [Selenum IDE, part one](https://www.youtube.com/watch?v=_4PJwmRzYXg) and [part two](https://www.youtube.com/watch?v=sgKytj6cJRU)
 - Simon Stewart: [Selenium IDE – the next generation](https://www.youtube.com/watch?v=vlI3AX-wNqw)
 - [Other Selenium IDE videos](https://www.youtube.com/results?search_query=selenium+ide)