Question

Selenium was apparently not designed to allow you modify the DOM of the browser pages, but I occasionally need to insert HTML elements dynamically.

In this instance: I am using Firefox with the Selenium IDE to record listing of auctions on eBay, but I noticed it cannot cope with the heavily JScripted auction content control and records nothing for those elements.

If I turn off JavaScript for the ebay site the much simpler version of the first auction entry page is broken (it is missing a hidden input element required to confirm PayPal as a payment option).

So, my options at the moment are… A) figure out how to interact with the fancy JScript HTML editor control from Selenium, or b) insert new elements into the DOM.

Does anyone have any suggestions, preferably in C# as I am automating this under a Windows console Application? A Selenium User-Extensions would also be acceptable if anyone has the code.

Answer 1

I have found one solution so far so I thought it best to share it for review/improvement.

Selenium allows you to extend its behavior with a user-extensions.js file.

For example this creates a new insertHtml command within Selenium:

Selenium.prototype.doInsertHtml = function(locator, text){
    var element = this.page().findElement(locator);
    var innerHTML = text + element.innerHTML;
    element.innerHTML = innerHTML;
}

For Selenium IDE usage you simply include the extensions file via the options menu of the IDE itself. Next time you start the IDE it automatically has any new commands available (from the user extensions file).

As the Documentation page address changed, and may again, I have copied the relevant part below:

Extending Selenium

It can be quite simple to extend Selenium, adding your own actions, assertions and locator-strategies. This is done with javascript by adding methods to the Selenium object prototype, and the PageBot object prototype. On startup, Selenium will automatically look through methods on these prototypes, using name patterns to recognise which ones are actions, assertions and locators.

The following examples try to give an indication of how Selenium can be extended with javascript.

Actions

All doFoo methods on the Selenium prototype are added as actions. For each action foo there is also an action fooAndWait registered. An action method can take up to 2 parameters, which will be passed the second and third column values in the test.

Example: Add a “typeRepeated” action to Selenium, which types the text twice into a text box.

Selenium.prototype.doTypeRepeated = function(locator, text) {
    // All locator-strategies are automatically handled by "findElement"
    var element = this.page().findElement(locator);

    // Create the text to type
    var valueToType = text + text;

    // Replace the element text with the new text
    this.page().replaceText(element, valueToType);
};