Quantcast
Channel: Planet Plone - Where Developers And Integrators Write
Viewing all articles
Browse latest Browse all 3535

Asko Soukka: Generate annotated screenshots with plone.app.robotframework

$
0
0

Greetings from Sorrento, from Plone Open Garden 2013. The symposium/sprint was amazing, with the greatest possible venue, the nicest community out there and my most productive sprint days so far. Thanks a lot to Maurizio Delmonteand Abstract ITfolks for organizing the event. Also, thanks to my employer, University of Jyväskyläfor allowing and sponsoring me to participate the sprint. I believe, it was worth it...

plone.app.robotframework

During the sprint I released a package called plone.app.robotframeworkto ease writing of Robot Framework tests for Plone and add-ons. plone.actis dead, long live plone.app.robotframework. It contains everything in plone.act (the same code from the same authors), but also much much more:

  • Common variables and keywords to open Selenium test browsers so that the same tests can be run locally, on CI, with Selenium grid and even with Sauce Labs (with or without Travis-CI) without modifying the tests themselves.
  • Sauce Labs -integration keywords, which allow not only run tests on locally or at Travis-CI with Sauce Labs' browsers, but also send build-numbers, test names, test tags to Sauce Labs.
  • Helper library for logging users automatically into Plone so that we can skip login forms and save a lot of time in tests.
  • Helper library base for implementing database dependent test setup keywords in Python to save even more time in tests.
  • Keywords for annotating open pages and cropping captured images so that Robot Framework test can be used to both make screencasts and illustrate Sphinx documentation (and keep both of them up to date with the current code.

Read the new tutorial about writing Robot Framework tests with plone.app.robotframework at Plone Developer Documentation.

But there's one specific new feature, I'd like to rise above others:

Generating screenshots

We know that this would be possible, but we thought that it would be much harder. Read from Guido's PloneSocial PLOG2013 Sprint Report, how we implemented the base for functional testing with Robot Framework, Selenium, Travis-CI and Sauce Labs for PloneSocial-suite, and wondered about the possibility of creating screencasts with Robot Framework.

One thing led to another, and just a day later I had the initial implementations of screen annotation keywords and screenshot cropping keywords ready.

You can see everything in action with this minimal example:

bootstrap.py


$ curl -O http://downloads.buildout.org/2/bootstrap.py

buildout.cfg


[buildout]
extends=http://dist.plone.org/release/4.3-latest/versions.cfg
parts=pybot

[pybot]
recipe=zc.recipe.egg
eggs=
Pillow
plone.app.robotframework

scripts=pybot

docs.robot


*** Settings ***

Resourceplone/app/robotframework/server.robot
Resourceplone/app/robotframework/annotate.robot

Suite SetupSetup
Suite TeardownTeardown

*** Keywords ***

Setup
Setup Plone siteplone.app.robotframework.testing.AUTOLOGIN_ROBOT_TESTING
Import libraryRemote ${PLONE_URL}/RobotRemote

Teardown
Teardown Plone Site

*** Test Cases ***

Portal factory add menu

Enable autologin asContributor
Set autologin usernameJohn Doe
Go to ${PLONE_URL}

Click linkcss=#plone-contentmenu-factories dt a
Element should be visible
...
css=#plone-contentmenu-factories dd.actionMenuContent

${
dot1} = Add dot
...
css=#plone-contentmenu-factories dt a1

${
note1} = Add note
...
css=#plone-contentmenu-factories
...
At first, click Add new… to open the menu
...
width=180position=left

${
dot2} = Add dot
...
css=#plone-contentmenu-factories dd.actionMenuContent2
${
note2} = Add note
...
css=#plone-contentmenu-factories dd.actionMenuContent
...
Then click any option to add new content
...
width=180position=left

Align elements horizontally ${dot2} ${dot1}
Align elements horizontally ${note2} ${note1}

Capture and crop page screenshotadd-new-menu.png
...
contentActionMenus
...
css=#plone-contentmenu-factories dd.actionMenuContent
... ${
dot1} ${note1} ${dot2} ${note2}

Remove elements ${dot1} ${note1} ${dot2} ${note2}

Running


$ python bootstrap.py
$ bin/buildout
$ mkdir -p docs/source/images
$ bin/pybot -d docs/source/images -r NONE -l NONE -o NONE docs.robot

Results

This all should result the next nicely annotated and cropped screenshot as docs/source/images/add-new-menu.png:

How to add new content in Plone

Just think about having that bin/pybot-line in the next Sphinx-makefile...

... and, of course, those annotation keywords will work for creating screencasts too. Actually, those keywords are not even Plone specific, but they do rely on jQuery being found on the captured page.

PS. You may wonder, how pybot can start Plone for capturing screenshots. For that, I have to thank Godefroid Chapell for writing the original robot keywords in plone.app.robotframework for setting up and tearing down test layers without zope.testrunner (see the keywords Setup Plone site and Teardown Plone site).


Viewing all articles
Browse latest Browse all 3535

Trending Articles