Monday, April 8, 2013

Testing CSS in Plone with Robot Framework

[update 09-04: Modified as per Asko's comment]

You can use RF to make sure your CSS rules work as you want them to. This will give you confidence to move around large parts of you CSS codebase and be certain that everything still works. To do so, you must define your own library. 

Defining a custom library

In your robot test file, link the library like so:
Library  der.freitag.tests.robot.libraries.FreitagRobotSelenium2Keywords
The class FreitagRobotSelenium2Keywords in tests/robot/ holds the relevant methods to use Selenium: 
# -*- coding: utf-8 -*-
from robot.libraries.BuiltIn import BuiltIn

from import Color

class FreitagRobotSelenium2Keywords(object):

    def s2l(self):
        return BuiltIn().get_library_instance('Selenium2Library')

    def value_of_css_property(self, property_name, locator):
        """Returns value of property found by locator
        s2l = self.s2l
        element = s2l._element_find(locator, True, True)
        prop_value = element.value_of_css_property(property_name)
        s2l._info('value of css property {0} : {1}'.format(property_name,
        return prop_value

    def _color_checker(self, color_value, locator, property):
        color_value = color_value.lower().replace('hex', '', 3)
        color_expected = Color.from_string(color_value).rgba
        color_found = self.value_of_css_property(property, locator)
        if color_expected != color_found:
            error_msg = 'Expected color {0}, found {1} instead.'
            raise AssertionError(error_msg.format(color_expected, color_found))

    def check_color(self, color_value, locator, property='color'):
        """Checks if element found by locator has correct value
        self._color_checker(color_value, locator, property)

The methods to get and check the color were taken from

Using the library

The rest of our robot_colors.txt looks like this:
*** Variables ***

${X_AUTHOR_NAMES} =  //article//span[@class]

*** Test cases ***

Scenario: Author names are pink by default, no hover needed
  Given i am on the homepage
   Then author names are shown in pink

*** Keywords ***

Suite Setup
    Open browser  ${PLONE_URL}  browser=${BROWSER}  remote_url=${REMOTE_URL}  desired_capabilities=${DESIRED_CAPABILITIES}

Suite Teardown
    Close all browsers

Given i am on the homepage
    Location should be  ${PLONE_URL}

Then author names are shown in pink
    Check color  \#bd014d  ${X_AUTHOR_NAMES}

More info

Check out