How to modify/delete <div> section using Robot Framework

Question

I am trying to delete a <div> section using Robot Framework. How can I do that ? Also, Is there a way to modify the class within a <div> ?

e.g. <div name="test" class="..">. I'm trying to either delete the whole <div> section or clear the class elements.

Answer 1

Deleting an element

Neither robot nor SeleniumLibrary have any way to add or remove items from a page, but you can use the execute javascript keyword to run javascript to do that.

For example, to delete a div with the id of "page-footer" you could do something like this:

    execute javascript  
    ...  var element=document.querySelector('#page-footer');
    ...  element.parentNode.removeChild(element);

Here's a complete working example that removes the footer from a page:

*** Variables ***
${browser}  chrome

*** Settings ***
Library  Selenium2Library

Suite Setup     open browser  about:blank  ${browser}
Suite Teardown  close all browsers

*** Test cases ***
Example
    [Setup]  go to  https://the-internet.herokuapp.com/broken_images

    # verify the footer is there
    page should contain  Powered by Elemental Selenium    

    # remove it
    execute javascript  
    ...  var element=document.querySelector('#page-footer');
    ...  element.parentNode.removeChild(element);

    # verify it was removed    
    page should not contain  Powered by Elemental Selenium    

Changing the class

To change the class -- or any other attribute -- you can use the same technique to call the setAttribute method of the element.

For example, the following will set the class to "new_class" of the page footer:

execute javascript  
...  var element=document.querySelector('#page-footer');
...  element.setAttribute("class", "new_class");