1 / 10

Narcissus Check how you look like!

Narcissus Check how you look like!. Jadoulle Jérôme RVP-ONP April 2011. Presentation goals. Why is it needed? What is Narcissus? In relation to Selenium; In relation to the web browser; In relation to Theseos; How are Narcissus tests written: The Unit test part; The « Selenium » part;

dessa
Download Presentation

Narcissus Check how you look like!

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Narcissus Check how you look like! Jadoulle Jérôme RVP-ONP April 2011

  2. Presentation goals • Why is it needed? • What is Narcissus? • In relation to Selenium; • In relation to the web browser; • In relation to Theseos; • How are Narcissus tests written: • The Unit test part; • The « Selenium » part; • Errors display with Narcissus-UI • State of advancement • Demo (Pension cadaster Narcissus tests by Ollie)

  3. Why is it needed? • Wanting to test Web applications user interfaces in an easy way. • No similar tool present of the market • Selenium allows UI interface testing through interactions but nothing testing the « face » of the application itself • It is possible to take a screenshot of the full pages but not of page elements themselves. It is also not possible to compare the screenshots with previous version • Initial requirement: « Take a screenshot of a table full of data and compare it with the same screenshots taken the day before ».

  4. What is Narcissus (1/2)? • A Web UI testing tool: • Takes screenshots of elements on any web page and compares them, pixel by pixel, to the originals Original Taken screenshot Result

  5. What is Narcissus (2/2)? • Deeply related to Selenium • Use selenium for usual Web GUI testing; • Resort to Narcissus when wanting to compare element’s UI • Can be used for any web application tested with Selenium • Internals have wider use: • Possible uses: • Use project’s core to compare PDF pages generated by multiple versions of a PDF generation application • actually already implemented in narcissus-tools sub-project. • Automatically take screenshots of elements in a web interface and integrate them in a report

  6. How does it work (1/2)? • As simple as a Selenium UnitTest Extend NarcissusTestCase Use Selenium for page navigation • Call Narcissus for screenshot comparison • Params: • Id of HTML element to take a screenshot of; • Name of the screenshot. From the outside world, Narcissus is just ONE line of code to add to your tests!

  7. How does it work (2/2)? • Use Narcissus-UI to see the differences

  8. State of advancement (1/3) • Core: • Already possible to take screenshots of elements: • Directly in page; • Bigger than the page : • With scrolling if necessary; • With multiple screenshots assembled if necessary; • Inside scrollable elements (scrolled and with multi-screenshot capture if necessary!) • Scrollable elements themselves are not yet working • Just a « time » issue => doable.

  9. State of advancement (2/3) • UI: • Already possible to display the differences in multiple modes (see demo); • Exclusion zones are displayed as well • Exclusion zone = expected difference we do not care about. • Not yet possible to • add / edit / remove exclusion zones; • Replace a reference by a screenshot (in case of application evolution); • Some more work on usability required.

  10. State of advancement (3/3) • Server/Client mode: • Narcissus can work in a server/client mode (the « build environment » case • Screenshots taken by remote server; • Serialization and send back on local; • Comparison as usual. • Open-source released: • http://code.google.com/p/narcissus-webtests/ • Initial commit performed. • Need to work on the documentation; • Should test NarcissususingNarcissusitself as well.

More Related