How can we improve the testability of applications?

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

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', 'takuya@autify.com')
    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