WWW.OCTO.COM

State of the Art of Front-End Testing

State of the Art of Front-End Testing Mastering code and ensuring its reliability have become high priorities for every developer faced with ever richer and more complex architectures.

Certain tools are now able to help us test front-end Web applications to meet our expectations in terms of quality development.

Consider this an invitation to learn more about the actual ecosystem of front-end Web application testing. Whether you are already convinced by testing or simply curious, this document will guide you through setting up your tests within your projects.

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

Integrating testing in agile environments

Agile development

02

03

0405 06

07

08

09

NEXT ITERATION

10

01USER STORY 1

USER STORY 2

Unit/functional testing

USER STORY N

DEMO

Customer feedback

Taking feedback into account

Executing and updating tests (application, UI, load…)

Unit/functional testing

Unit/functional testing

BACKLOG PRODUCT

ITERATION BACKLOG

PRODUCT

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

Unit Testing

KARMA + MOCHA

Functional Testing

SELENIUM + CAPYBARA

Code Quality

ESLINT

Code Coverage

ISTANBUL

Quality Metrics

Load Testing

Performance Testing

WEBPAGETEST

Stress testing

GREMLINSJS

Memory Testing

CHROME DEV TOOLS

Performance + Robustness

UI Testing

UI Non-regression Testing

PHANTOMCSS

Accessibility Testing

OPQUAST DESKTOP

Usability + Visibility

SEO Testing

WOORANK

Security Testing

OWASP ZED ATTACK PROXY / SKIPFISH

Multi-browser Testing

SAUCELABS / BROWSERSTACK

SELENIUM / WEBDRIVER

Application TestingSecurity + Compatibility

Unit Testing Ensures code stability by testing each part (each feature) individually. Regressions are therefore quickly identified, which allows us to add new functionalities without being afraid of breaking something.

EXAMPLE

var should = require(‘chai’).should; var sinon = require(‘sinon’);suite(‘get_my_friends’, function() {test(‘should return 2 friends of mine’,function() {var user = {facebook_id : ‘my_facebook-id’, name : ‘my_name’};var friends = [{ name : ‘friend 1’},{ name : ‘friend 2’} ];var stub = sinon.stub(fb, ‘getFriends’).returns(friends);var result = get_my_friends(user);stub.should.be.calledWith(user.facebook_id); });});

WITH SINON.JS AND CHAI.JS

get_my_friends ✔ should return 2 friends of mine (50ms)

✔ 1 test complete (50ms)

Testing the retrieval of a Facebook user’s friends before rendering them:

Displayed result:

On existing projects without any test, it is more complex to set up unit testing. Reverse engineering and code refactoring must be undertaken before being able to unit test.

RISQUES

OUTILS Structuring code: Mocha (our favourite) or Jasmine (IE compatible)

Writing easy-to-read assertions: Chai.js Creating mocks, stubs and spies: Sinon.js Executing tests through Karma and PhantomJS

Setting up unit testing costs virtually nothing in terms of development (test writing, tool set-up) and execution time (mere seconds)

COST

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

Functional Testing Ensures application stability by mimicking the user path in the browser. Allows to check whether the application is running smoothly and can alert to possible regressions.

From experience, UI functional tests are not always stable and can generate false positives. It is therefore important to run these tests periodically to make sure the error is an actual error.

Testing framework for Angular: Protractor Testing framework for general Web applications: Capybara

Automating UI tests: Selenium

EXAMPLE

<form name=”inscription”> <textarea name=”comment”></textarea> <button type=”submit”>Valider</button><form><div class=”list-comments”></div>

WITH CAPYBARA

describe ‘Comment’’ doit ‘should add comment’ dovisit(inscription_page)fill_in comment, :with => “j’ajoute un commentaire’”click_on ‘Valider’expect(find(:css, ‘.list-comments).text).to eql(‘j’ajoute un commentaire’)endend

Testing a feature: Add a comment1. Implementing the feature

COST

Setting up UI functional testing can be expensive in terms of development (a variety of tools to set up), of execution time (several minutes) and more importantly in terms of maintenance (sensitive to HTML/JS/CSS changes).

2. Write a functional test that checks for the comment creation

3. Result of the test execution if no error is detectedRunning E2E tests using environment settig for environment dev...............................................

TOOLS

RISKS

OPERATING MODE

Start Selenium server > Tests execution (Protractor or Capybara) > Communication with Selenium through a WebDriverJS > Tests execution within the browser.

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

To ensure cross-browser compatibility of your application, it is necessary to run functional tests on multiple browsers and platforms.

Multi-browser Testing

Such tests can be expensive, both in terms of setting up the needed infrastructure to execute these tests (browsers/OS) and in terms of maintaining them, especially on mobile devices. SaaS solutions are here to help.

COST & RISKS TOOLS

SaaS Solutions: SauceLabs, BrowserStack Infrastructure: Selenium, WebDriverJS Browsers: Chrome, Internet Explorer OS: Windows

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

UI Regression Testing These tests allow for a stable UI and prevent visual regressions. They target websites with a complex interface or with a very large number of users.

They are quite simple to set up since only a few tools are required. Writing these tests is simple if only full or partial pages are under testing.

COST

Results may include false positives caused by an intolerance to design changes. To minimize these risks, avoid reproducing users clickstream and prefer accessing web pages through their URL.

RISKS

UI testing frameworks: PhantomCSS Web pages navigation: CasperJS Web pages rendering: PhantomJS Screenshots: CasperJS Web pages comparison: Resemble.js

EXAMPLEWITH PHANTOMCSS

TOOLS & PROCESSES These tests should

not be set up before all other developments have been made.

What do you like ?What do you like ?

Capuccino ExpressoCapuccino Expresso

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

Security Testing

The browser is the main source of security vulnerability on the Web. Knowing the risks and how to address them is important in order to protect both your users and your application.

One has to know the most critical breaches and understand their concepts. The top 10 security flaws can be found on the OWASP website.

COST TOOLS

Automated tests: OWASP Zed Attack Proxy / Skipfish HTML5 Security Cheatsheet: http://html5sec.org/

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

Endurance/Memory Testing

Web applications (SPA, RIA) can block the browser because of memory leaks. These leaks lead to a constant increase of the memory used and are hard to detect.

TOOLS

Memory usage profiling: Chrome Dev Tools

DETECTING LEAKS The idea is to launch the memory profiler, use the application, and check if the memory consumption increases abnormally.

HOW DOES A MEMORY TEST WORK?

1

2

INVESTIGATEWe start by looking for a user scenario that reproduces the memory leak systematically. Once done, one approach consists in taking memory stack snapshots, both at the beginning and at the end of the scenario, and comparing their contents: we would normally identify the objects that are never deleted.

5500 ms 6000 ms 6500 ms 7000 ms 7500 ms 8000 ms 8500 ms 9000 ms

5000 ms 5500 ms 6000 ms 6500 ms 7000 ms 7500 ms 8000 ms

Elements Network Sources Timeline Profiles Resources Audits Console

Comparison Snapshot 1Class filter

Alloc. Size#Deleted#New

(array)(closure)Object(system)Arraysystem / Context(string)uaHTMLOptionElementNodeList(compiled code)gaNamedNodeMapCommentTextHTMLDivElementDocumentFragment(concatenated string)(sliced string)Detached DOM tree / 3 entr...HTMLParagraphElementHTMLLabelElementHTMLInputElementfbgDetached DOM tree / 1 entr...h

14 8867 7324 6437 6043 2242 8102 1351 9211 194

7303 318

483403278250181140209112

98113

806555855332

0

10 3997 5104 4083 1953 0272 6311 8601 8591 194

699689483403247219181140139111

988280655554503229

Constructor #Delta

+4 487+222+235

+4 409+197+179+275

+620

+31+2629

00

+31+31

00

+70+1

0+31

000

+31+3

0-29

1 878 616556 704249 528258 024103 168263 552

85 12061 47247 76029 200

1 391 47227 04816 12011 12010 000

7 2405 6008 3604 480

04 5203 2002 6002 200

12 8722 496

00

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

Accessibility Testing

These tests aim to check that specifications (AccessiWeb, WCAG, RGAA) are properly implemented, or check that the user experience is not compromised by a glitch reducing the browsing process.

TOOLSIMPROVEBROWSER ACCESSIBILITY

Screen reader simulator: Fangs Screen Reader Simulator Contrast colors: high contraste Audio player for video: HTML5 Audio Description

Audit of code: Accessibility Developer Tools / Opquast Desktop Online validation: http://validator.w3.org Automated testing plugin: capybaraaccessible (Capybara), accessibility plugin (Protractor)

SaaS tools for testing automated scenarios: Tanaguru

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

SEOTesting

Being well referenced is based on website content and structure; it is the key to increasing internet visibility.

There are some efficient tools to improve indexation. Suggested solutions could be tough to set up.

COST & RISKS TOOLS

Audit of code: Google tools for webmasters Ranking evolution: https://www.woorank.com/fr Chrome extension: SEOquake A guide for structured data on the Internet: schema.org

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

Web application performance is not only a server-side matter anymore. Optimization work is also required client-side.

Performance Testing

TOOLS

SaaS solutions: Google Page Speed Insight, WebPageTest, AgileLoad

EXAMPLEWITH WEBPAGETEST

https://google.fr 1. google.fr - / 2. www.google.fr - / 3. www.google.fr...color_272x92dp.png 4. www.google.fr...nav_logo231.png 5. ssl.gstatic.com - i1_1967ca6a.png 6. www.google.fr...vvDKunayNbav0cnV1w 7. www.gstatic.com...j_B28_if02IKAozw 8. www.google.fr...bf56be55ea651do.js 9. www.google.fr...-Kq-S4bYgd16V7K41g 10. www.google.com - gen_204 11. www.google.com - tia.png 12. apis.google.com - cb=gapi.loaded_0 13. www.google.fr - gen_204 14. www.google.fr - google_lodp.ico

CPU Utilization

BandwidthIn (0 - 5,000 Kbps)

0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 2.0 2.2 2.4

456 ms

246 ms

163 ms203ms

420 ms

278 ms (301)330 ms

204 ms

236 ms185 ms

355 ms

283 ms48 ms

49 ms0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 2.0 2.2 2.4

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

Testing an application’s robustness by randomly executing a large number of UI interactions, then detecting critical weaknesses and memory and performance problems.

Stress Testing

Easy to set up, these tests are mainly useful for SPA web applications. However, it can be difficult to highlight the root cause problem.

COST & RISKS TOOLSThere exists only one: Gremlins.js

EXAMPLEWITH GREMLINS.JS

✔

✔

✔

u0vkzi

wash the dishesdl

Call Marnie

1 item left All Active Completed Clear completed (2)

Change calendarz32ra

Double-click to edit a todo

todosTE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

IT Consulting There is a better way

WE BELIEVE THAT information technologyTRANSFORMS COMPANIES

WE KNOW THAT THE greatest archievementsARE THE RESULT OF shared KNOWLEDGE

AND THE JOY OF WORKING +OGETHER

WE ARE ALWAYS on the look out FOR BETTER ways OF WORKING

KEY FIGURES

17 years of profitable, continuous growth

Listed on the Paris Stock Exchange since 2006

38 M€ in Sales

245 consultants, architects, experts and methodology coaches Strategic independence and financial strength

Who we are ?

WE WORK WITH OUR CLIEN+S IN THEIR GOALS TOWARDS digital transformation.WE TRULY BELIEVE +ECHNOLOGY IS the engine DRIVING THE CHANGE.

TE

STS

ON

ALL

FR

ON

TS

TRIB

U W

EB

PE

RFF

O

CTO

tribu.webf@octo.com

WWW.OCTO.COM

WE supportCOMPANIES IN SETTING UP

frameworks & architectures TAILORED TO THEIR SPECIFIC NEEDS

in rich CROSS-PLA+FORM

web applications.

© O

CTO

Tec

hnol

ogy

2015

- A

ll rig

hts

rese

rved