Testing tools for the Frontend

• Not an area I know about particularly well for the frontend
• If you do, would love to hear you talk right after :)

Few tools

• Jasmine (used by Angular folks - we use it on our Cordova App)
• Mocha (used by ReactJS folks)

• Changes to JS that break things
• Performance Regressions
• CSS Changes that are unexpected

Virtualbox

• Test IE, Safari, Firefox, etc. from your machine
• Not really scriptable

Selenium

• Test IE, Safari, Firefox, etc.
• Requires setup
• Can be complex (esp with different OS)
• Scriptable
• Hosted Options (BrowserStack, SauceLabs, AppliTools)

PhantomJS

• Can be easy to install
• Scriptable

SlimerJS

• Not fully headless
• Scriptable
• Focus on PhantomJS for this talk

How did I end up on the admin panel when I clicked on search?

• AKA Acceptance Testing
• Scripts to test actions in browser
• Get away from sitting for hours testing every page

CasperJS

CasperJS

casper.test.begin('Site has 10 blog posts', 1, function suite(test) {
  casper.start("http://btmash.com", function() {
    test.assertTitle("BTMash | Blob of contradictions", "Correct title");
  });
  casper.then(function() {
    test.assertEval(function() {
      return __utils__.findAll("article.node-article").length >= 10;
    }, "Blog has 10 or more blog posts on home page");
  });

  casper.run(function() {
    test.done();
  });
});
            

Other

• Behat / Mink (PHP)
• Selenium Webdriver (Python)
• Capybara (Ruby/Rails)
• WebdriverIO (Javascript)

Why does the site feel so slow? We're only using jQuery, Angular, React, and Backbone

• Frontend can be 70% of user page load experience
• Mobile rulesets slightly different from desktop

By hand

• YSlow (Chrome Extension, CLI)
• Chrome Audit (Chrome)
• Web Page Test
• Page Speed Insights (Hosted Service from Google)

Page Speed Insights CLI

• PSI
• Run Page Speed from command line
• Also has a Grunt plugin

npm -g install psi
psi URL (--strategy=mobile) (--threshold=70)
            

Phantomas

• Phantomas provides extensive data about how your website is performing
• Uses PhantomJS
• Output is a bit...verbose

npm -g install phantomas
phantomas URL (--options)
              

Grunt-Phantomas

• Grunt-Phantomas makes it easier to work with Phantomas
• Provides ongoing reports

# default task
grunt

# Generate Report
grunt phantomas:default

# Generate Report + Screenshot
grunt phantomas:screenshot

# Assert tests
grunt phantomas:requests
              

• It is really easy to mess up CSS
• It is especially easy in certain CMSes (hi Color module!)
• We can try to prevent this

Wraith

• Takes screenshots of 2 environments
• Creates visual diffs of screenshots between environments
• Ruby wrapper to CasperJS, PhantomJS, imagemagick written by BBC
• REALLY easy to use (uses YAML for configuration)
• Can also check historical snapshots
• More info

# install wraith
gem install wraith

# Run wraith config
wraith capture configs/file.yaml

# View results in browser
open shots/gallery.html

# Use history (if set up that way)
wraith history configs/historical.yaml
            

Other

• WebdriverCSS
• Shoov

• Use a continuous integration tool
  • Jenkins
• Git hooks
• Workflow
  • Commit code to git
  • Execute the aforementioned CLI commands