Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 d...
Integrating testing
in agile environments 
Agile
development
02
03
04
05 06
07
08
09
NEXT ITERATION
10
01
USER STORY 1
USE...
TESTSONALLFRONTSTRIBUWEBPERFFOCTO
Unit Testing
KARMA + MOCHA
Functional
Testing
SELENIUM + CAPYBARA
Code Quality
ESLINT...
Unit Testing 
Ensures code stability by testing each part (each feature) individually. Regressions are therefore quickly
i...
Functional Testing 
Ensures application stability by mimicking the user path in the browser. Allows to check whether the
a...
To ensure cross-browser compatibility of your application, it is necessary
to run functional tests on multiple browsers an...
UI Regression Testing 
These tests allow for a stable UI and prevent visual regressions. They target websites with a compl...
Security
Testing 
The browser is the main source of security vulnerability on the Web. Knowing the
risks and how to addres...
Endurance/Memory
Testing 
Web applications (SPA, RIA) can block the browser because of memory leaks. These leaks lead to a...
Accessibility
Testing 
These tests aim to check that specifications (AccessiWeb, WCAG, RGAA)
are properly implemented, or ...
SEO
Testing 
Being well referenced is based on website content and structure;
it is the key to increasing internet visibil...
Web application performance is not only a server-side matter anymore. Optimization work is also
required client-side.
Perf...
Testing an application’s robustness by randomly executing a large number of UI interactions,
then detecting critical weakn...
IT Consulting There is a better way
WE BELIEVE THAT information technology
TRANSFORMS COMPANIES
WE KNOW THAT THE greatest ...
tribu.webf@octo.com
WWW.OCTO.COM
WE support
COMPANIES IN SETTING UP
frameworks
 architectures
TAILORED TO THEIR
SPECIFIC N...
Upcoming SlideShare
Loading in …5
×

Tests on all fronts

8,977 views

Published on

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.

Published in: Technology
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ♥♥♥ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★★ How Long Does She Want You to Last? ★★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ♣♣♣ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @Stefan Lecho Thank you so much for bringing it to our attention. The slides are now all in English ! We hope you'll find our refcard useful.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Slide 11 has not yet been translated
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Tests on all fronts

  1. 1. WWW.OCTO.COM State of the Art of Front-End Testing
  2. 2. State of the Art of Front-End Testing  Mastering code and ensuring its reliability have become high priorities for every developerfaced 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. TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  3. 3. Integrating testing in agile environments  Agile development 02 03 04 05 06 07 08 09 NEXT ITERATION 10 01 USER 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 TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  4. 4. TESTSONALLFRONTSTRIBUWEBPERFFOCTO 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 Testing Security + Compatibility
  5. 5. 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 TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  6. 6. 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’’ do it ‘should add comment’ do visit(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’) end end Testing a feature: Add a comment 1. 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 detected Running 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. TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  7. 7. 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 TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  8. 8. 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 EXAMPLE WITH 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 Expresso Capuccino Expresso TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  9. 9. 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/ TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  10. 10. 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 INVESTIGATE We 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) Array system / Context (string) ua HTMLOptionElement NodeList (compiled code) ga NamedNodeMap Comment Text HTMLDivElement DocumentFragment (concatenated string) (sliced string) Detached DOM tree / 3 entr... HTMLParagraphElement HTMLLabelElement 14 886 7 732 4 643 7 604 3 224 2 810 2 135 1 921 1 194 730 3 318 483 403 278 250 181 140 209 112 98 113 80 10 399 7 510 4 408 3 195 3 027 2 631 1 860 1 859 1 194 699 689 483 403 247 219 181 140 139 111 98 82 80 Constructor #Delta +4 487 +222 +235 +4 409 +197 +179 +275 +62 0 +31 +2629 0 0 +31 +31 0 0 +70 +1 0 +31 0 1 878 616 556 704 249 528 258 024 103 168 263 552 85 120 61 472 47 760 29 200 1 391 472 27 048 16 120 11 120 10 000 7 240 5 600 8 360 4 480 0 4 520 3 200 TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  11. 11. 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. TOOLS IMPROVE BROWSER 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 TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  12. 12. SEO Testing  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 TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  13. 13. 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 EXAMPLE WITH 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 ms 203ms 420 ms 278 ms (301) 330 ms 204 ms 236 ms 185 ms 355 ms 283 ms 48 ms 49 ms 0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 2.0 2.2 2.4 TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  14. 14. 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 TOOLS There exists only one: Gremlins.js EXAMPLE WITH 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 todos TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  15. 15. IT Consulting There is a better way WE BELIEVE THAT information technology TRANSFORMS COMPANIES WE KNOW THAT THE greatest archievements ARE 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 245consultants, 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. TESTSONALLFRONTSTRIBUWEBPERFFOCTO
  16. 16. tribu.webf@octo.com WWW.OCTO.COM WE support COMPANIES IN SETTING UP frameworks architectures TAILORED TO THEIR SPECIFIC NEEDS in rich CROSS-PLA+FORM web applications. ©OCTOTechnology2015-Allrightsreserved

×