$30 off During Our Annual Pro Sale. View Details »

How can we improve the testability of applications?

How can we improve the testability of applications?

OnlineTestConf 2020 Spring
https://www.onlinetestconf.com/

tsuemura

May 21, 2020
Tweet

More Decks by tsuemura

Other Decks in Technology

Transcript

  1. View Slide

  2. Self Introduction
    Takuya Suemura
    Software Developer / Tester
    Test Automation Specialist @
    Autify, Inc.
    Committer of CodeceptJS

    View Slide

  3. View Slide

  4. Features
    Record & Playback
    Self Healing
    Parallel Execution
    Cross-Browser Compatibility Test

    View Slide

  5. Agenda
    About Testability and why we need it
    Adding new small test into the low testability code
    Building a stable product with high testability
    How to make more testable an app on the E2E level

    View Slide

  6. Developing vs Testing
    There is a tendency to focus on small details during development:
    Incomplete logic
    Effect on other components
    DB becomes locked for a long period
    Cannot think about what will bring great value to the user
    Testing is an effective approach for various concerns, big and small

    View Slide

  7. Testing Small Concern
    Using Complex UI

    View Slide

  8. TESTABILITY

    View Slide

  9. Testing Small Concern
    Using Complex UI
    ...it means the system has low testability

    View Slide

  10. What's the testability?
    A part of software quality
    Leverage for quality
    improvement
    A basis for various tests

    View Slide

  11. Difficulity of E2E Automation

    View Slide

  12. Difficulity of E2E Automation
    Limited operating point – everything needs to be operated through UI
    Functions cannot be split – cannot split functions which is not useful for the user

    View Slide

  13. Ice Cream Cone

    View Slide

  14. Test Pyramid
    And
    Ice Cream Cone

    View Slide

  15. Why does this icecream occur?
    Lack of understanding of testing
    Doesn’t know testing other than acceptance testing
    “Unit test? What is that? Can you eat it?”
    Misunderstanding of refactoring
    Starts off prioritizing implementation without any automated testing
    “We can just refactor it later, right? :D”

    View Slide

  16. Icecream = Value of product

    View Slide

  17. Functional
    Integration
    Unit
    Integration
    Unit
    Use Case
    External
    Integration
    Performance
    / Security
    Use Case
    External
    Integration
    Performance
    / Security
    UI Integration /
    Backend API
    Big Cone

    View Slide

  18. Example:
    A simple new user registration form
    1. Display an error if a required field is empty
    2. Display an error if the email address does not
    contain “@”
    3. [Submit] button cannot be clicked if there is an error
    4. Email addresses that are already registered cannot
    be registered
    5. Registration is complete when the user clicks the link
    in the new registration email

    View Slide

  19. Separating
    the client
    and the
    server-
    side

    View Slide

  20. Does UI testing always
    need a real backend?
    https://unsplash.com/photos/xGtHjC_QNJM

    View Slide

  21. UI Integration Test
    Use lightweight & flexible browser automation tool
    Puppeteer(https://pptr.dev/)
    Cypress(https://www.cypress.io/)
    Use mock instead of the real backend
    MockServer(https://www.mock-server.com/)
    PollyJS(https://netflix.github.io/pollyjs/#/)

    View Slide

  22. Feature('mock');
    Scenario('Interrupt suggestion', (I) => {
    I.amOnPage('https://www.google.com/')
    I.mockRequest('GET', 'https://www.google.com/complete/search?*', 404)
    I.fillField('.gLFyf.gsfi', 'OnlineTestConf')
    });

    View Slide

  23. Testing backend APIs
    public function testBasicExample()
    {
    $response = $this->withHeaders([
    'X-Header' => 'Value',
    ])->json('POST', '/user', ['name' => 'Sally']);
    $response
    ->assertStatus(201)
    ->assertJson([
    'created' => true,
    ]);
    }
    https://laravel.com/docs/7.x/http-tests

    View Slide

  24. Other tools for testing backend APIs
    Karate(https://github.com/intuit/karate)
    Tavern(https://github.com/taverntesting/tavern)
    Postman(https://www.postman.com/)

    View Slide

  25. Cone To Cup
    Integration
    Unit
    Use Case
    External
    Integration
    Performance
    / Security
    UI Component /
    Backend API
    Integration
    Unit
    Use Case
    External
    Integration
    Performance
    / Security
    UI Integration /
    Backend API

    View Slide

  26. Use
    Architectures
    https://en.wikipedia.org/wiki/Model–view–
    viewmodel

    View Slide

  27. Testing UI Component

    View Slide

  28. Get More Icecream
    https://unsplash.com/photos/Wpg3Qm0zaGk

    View Slide

  29. Efficiently create test
    data from UI
    Using Record & Playback Tool
    WildFire
    iMacros

    View Slide

  30. Reuse your automation code during a manual test
    $ npx codeceptjs shell
    I.loginAs('admin')
    I.addAllItemToCart()
    I.proceedOrder()

    View Slide

  31. Automate test
    preparation
    Add APIs for preparing test data
    & preconditions
    Combinate those APIs with a
    process automation tool
    n8n(nodemation)
    (https://n8n.io/)

    View Slide

  32. Testing EMail & SMS
    Mail
    MailCatcher(https://mailcatcher.me/)
    MailHog(https://github.com/mailhog/MailHog)
    MailTrap(https://mailtrap.io/)
    Mail & SMS
    Mailosaur(https://mailosaur.com/)

    View Slide

  33. Automatability for E2E Testing
    https://unsplash.com/photos/FTfjMijq-Ws

    View Slide

  34. Semantic Locator
    I.FillField('Username', 'takuyasuemura')
    I.FillField('Email', '[email protected]')
    I.FillField('Password', 'P@ssword')
    I.click('Sign up for GitHub')
    https://github.com/

    View Slide

  35. Utilize the meaning
    within a structure
    const modal = label =>
    locate('.modal').withText(label)
    within(modal('Modal title'), () => {
    I.see('Modal body text goes here.')
    I.click('Save changes')
    })
    https://getbootstrap.com/docs/4.0/components/modal/

    View Slide

  36. Using Multiple
    Locators
    Selenium IDE's fallback locator

    View Slide

  37. ID: not matched
    class: matched
    alter text: matched
    coodinate: not matched
    image source: matched
    .... Confidence: 80%
    AI for
    Automatability

    View Slide

  38. Why we need to improve the testability?

    View Slide

  39. To assure the value for customers
    https://unsplash.com/photos/oqStl2L5oxI

    View Slide

  40. Conclusion: Larger cup, more icecream
    Have more tests focusing on targeted concern by effectively using the existing
    interface and mock.
    Remake applications protected by the test so that they are even easier to test.
    Maximize the product’s appeal by testing products high in internal quality.

    View Slide

  41. Enjoy Testing!

    View Slide