Front-end Testing

Visual testing with Wraith

2.

About me

Mircea Fernea

Drupal Consultant at Amplexor Romania

mircea.fernea@amplexor.com

drupal.org/u/mfernea

3.

Front-end testing

Test pages the html structure & interactions

Checking PageSpeed Insights

Testing page load times & render speeds

Check visual changes

4.

CasperJS

Allows for scripted actions to be tested with PhantomJS.

It’s easy to setup for front-end developers.

Test complex features or components within the page.

Automate complex user actions.

Test workflows like content creation.

Check http responses on sensitive pages.

HTML structure & Interactions

5.

Behat & Mink & PhantomJS

Behat can be integrated with PhantomJS through Mink

and Selenium2

Storing credentials, creating scenarios that include

backend interaction are easier to setup in Behat.

You can even run tests for multiple screen sizes.

HTML structure & Interactions

6.

grunt-pagespeed

https://www.npmjs.com/package/grunt-pagespeed

You get all the information from

https://developers.google.com/speed/pagespeed/insights/

?url=http%3A%2F%2Fwww.smashingmagazine.com%2F

&tab=mobile

PageSpeed Insights

7.

grunt-phantomas

https://www.npmjs.com/package/grunt-phantomas

A PhantomJS-based web performance metrics tool

http://stefanjudis.github.io/grunt-phantomas/gruntjs/

Page load times & render speeds

8.

grunt-phantomas

Page load times & render speeds

9.

grunt-perfbudget

https://github.com/tkadlec/grunt-perfbudget

It’s based on WebPageTest API

http://www.webpagetest.org/

It can leverage multiple browsers, geographic locations

and network speeds.

You can have budget for number of requests, load time

etc. See the budget as threshold value.

Performance budgets

10.

Wraith

https://github.com/BBC-News/wraith

Developed by the guys at BBC News

Wraith uses either PhantomJS or SlimerJS to create

screen-shots of webpages on different environments and

then creates a diff of the two images.

Imagemagick and PhantomJS or SlimmerJS are required

to use Wraith. CasperJS can be used to target specific

selectors.

Visual testing

11.

Wraith - Install

$ brew install phantomjs

$ brew install imagemagick

$ gem install wraith

Visual testing

12.

Wraith modes

Standard: take screenshots of two environments,

producing a visual diff of the two screenshots

Casper: take screenshots of an element from two

environments using selectors, producing a visual diff of the

two screenshots

History: rather than capture two environments, capture the

same environment at two different moments in time to

compare them if anything changed

Visual testing

13.

Standard modeTake screenshots of two environments, producing a visual

diff of the two screenshots

$ wraith setup - creates configs/config.yaml and

javascript/snap.js

Adjust config.yaml to setup config and the two

environments (e.g. resolutions, pages)

$ wraith capture config

$ Open gallery.html from output dir to view results

$ wraith reset_shots config

Visual testing

14.

Visual testing

15.

Visual testing

16.

Casper modeCasper: take screenshots of an element from two

environments using selectors, producing a visual diff of the

two screenshots

$ wraith setup_casper - creates configs/component.yaml

and javascripts/casper.js

Adjust component.yaml

$ wraith capture component

If multiple matches found, only the first one is captured

Don’t start your selector with “#”. Add “div” in front

Open gallery.html to see results

Visual testing

17.

History modeRather than capture two environments, capture the same

environment at two different moments in time to compare

them if anything changed

$ wraith setup

Adjust config.yaml and rename it (e.g. local-history)

$ wraith history local-history

$ wraith latest local-history

Open gallery.html and see results

Don’t run history command twice

Visual testing

18.

Tweaks

Add cookies

Add HTTP Authentication

Get debug information

Adjust PhantomJS parameters

Visual testing

19.

“Don’t believe me on anything. Try this out for yourself.”

Visual testing

20.

Questions?

Q & A

21.

Other sources & references

http://fourword.fourkitchens.com/article/testing-drupal-

casperjs

http://danmatthews.me/2014/05/09/behat-phantomjs.html

http://jaffamonkey.com/using-phantomjs-with-behat/

http://mink.behat.org/en/latest/index.html

https://amsterdam2014.drupal.org/session/automated-

frontend-testing