Automated Front End Testing

[oliverbenns]

The requirement for automated testing has never been so clear. With requirements for this tag and that tag, ensuring that all the various assets are being loaded, being aware of performance hits upfront will result in less mistakes and better code. This will ultimately serve our users better.

By opening this issue I hope to spark a discussion. So please leave your comments or suggestions!

Requirements

• Needs to not effect workflow too much.
  • Needs to be headless (no browser required)
• Any test in www-foundation needs to be as generic as possible. If we want to introduce more tests into certain projects we can do so within that repo.
• We should develop it in a way so we don't have to maintain it much. It would be a shame for the project developer to keep having to update the tests.

  Quick Ideas

• Checking each meta title / description is required & unique to each page for SEO.
• Check that no 404 errors exist.
• Performance (limit number of requests, have a limit on css specificity)
• File sizes (have limits on image sizes)
• Opengraph / various other <meta>.

  Tools

• Casper JS - Runs off Phantom JS, a WebKit headless browser. This will allow us to run this in the background (Gulp) without firing up browser windows. Looks pretty extensive and something we can definitely make use of.
• Phantomas JS - Tests performance of page, giving some nice insights into requests / css rules / all sorts. Also runs off Phantom JS.

  Implementation

Off the bat ideas...

• gulp test would be a separate task, running as part of the default task.
• Probably wouldn't run on watch as it would be overkill, unless we can configure it later to only run on certain files/pages changed.
• Grab all html files in folders ('./dist/**/*.html', '!./dist/assets'), loop through and do various tests.
• Would have some form of configuration object, that could be handled easily. E.g.

{ 
    images: {
        maxSize : '100kb', 
    },
    meta: {
        openGraph: true,
        title: {
            required: true,
            unique: true
        }
    },
    accessibility: true
}

Resources

• Frontend Testing
• Functional Testing in CasperJs
• DrupalCon Amsterdam 2014: Automated Frontend Testing - need to watch this myself, but looks promising.

[jamesirving]

Obviously I'm all for more testing. A question though... Do you often find you have bugs associated with the sections you mentioned? (e.g. meta title, this and that tag, and various assets are being loaded, 404 errors... etc.)

[oliverbenns]

I think some of the page content that isn't visual can often get overlooked, and although this isn't always directly a requirement in the project, they are usually 5 minute fixes that can greatly help with page performance & SEO. By implementing tests into our Gulp stack, it will force us to do these small tasks (however tedious they may seem to some).

A couple of examples would be...

• Developer is notified the new XYZ images added are massive in file size. It will force him/her optimise them in Photoshop. Resulting in quicker loading for our users.
• Page title and description are the same for every page. Client hasn't requested anything otherwise, but by simply forcing the dev to make each one different, e.g. About | Www Foundation, Contact | Www Foundation we can ensure better Seo even if it hasn't been specifically requested.

So to answer your question. They aren't bugs as such, they don't break the website, but the value these small details can add are considerably high.