Component Testing with WebdriverIO

With more frontend frameworks on the rise web component testing becomes a crucial part of everyones testing stack. It allows to test various features of a single component of your UI and can help to reduce the amount of e2e around it that usually would run slower.

There are already many component testing tools available but almost all of them miss an important feature: running the test in an actual browser. While one might argue that running test in a virtual DOM is fine for testing why not just run them in the browser if you can. With WebdriverIO v8 and its new browser runner capabilities, you can now execute unit or component tests directly in the browser with no complicated set-up required and use the power of the WebDriver protocol to seamlessly interact with them, as a user would do.

In this session, Christian Bromann, Founding Engineer at Stateful, will tell you all about the new browser runner capabilities and will show case hands on live demos testing components in Vue, Svelte, React or Preact. Be amazed as component testing has never been so easy before!

Transcript

1. WebdriverIO
   Component Testing in the Browser
   

   View Slide

2. Holà 👋
   I am Christian!
   Lead maintainer of the WebdriverIO Project.
   Cross Council Project Member at OpenJS Foundation
   Open Source and Open Standard Advocate
   Working with the awesome folks over at
   @bromann
   |
   mastodon.social/@bromann
   

   View Slide

3. Contents
   01 What are Web Components? 🧱
   What are Web Components and why do they matter? How do
   they look like when using React, Svelte, Vue etc.?
   02 Testing Principles 📜
   How can we improve the stability of our tests and
   increase test coverage by shifting to smaller test units?
   03 Status Quo 📏
   What are people already using today and why the heck
   should I care?
   04 WebdriverIO Setup 🛠
   How to get started with WebdriverIO and component /
   unit testing in my project?
   05 Live Coding 󰳕
   Let’s see WebdriverIO component tests in action and check
   out features like mocking to test coverage reporting.
   06 What’s Next? 🚀
   An outlook into the WebdriverIO roadmap in regards to
   web-component testing
   @bromann
   |
   mastodon.social/@bromann
   

   View Slide

4. What are
   Web Components?
   🧱
   What are Web Components and why do they matter? How do they look like when using React, Svelte, Vue etc.?
   

   View Slide

5. 
   <br/>p { color: #00B56C }<br/>
   
   Hello !
   
   
   <br/>class HelloWorld extends HTMLElement {<br/>connectedCallback() {<br/>const shadow = this.attachShadow({ mode: 'closed' })<br/>const template = document.getElementById('hello-world')<br/>shadow.append(template.content.cloneNode(true));<br/>}<br/>}<br/>customElements.define('hello-world', HelloWorld);<br/>
   Hello World!
   Selenium Conf
   @bromann
   |
   mastodon.social/@bromann
   

   View Slide

6. <br/>import { LitElement, html, css } from "https://esm.sh/lit@2.6.1";<br/>class HelloWorld extends LitElement {<br/>static get styles() {<br/>return css`p { color: #00B56C }`;<br/>}<br/>render () {<br/>return html`<br/><p><br/>Hello <slot></slot>!<br/></p><br/>`<br/>}<br/>}<br/>customElements.define('hello-world', HelloWorld);<br/>
   Hello World!
   Selenium Conf
   @bromann
   |
   mastodon.social/@bromann
   

   View Slide

7. import React from 'react';
   import ReactDOM from 'react-dom/client';
   export function HelloWorld(props) {
   return (
   
   Hello {props.children}
   
   );
   }
   export function App(props) {
   return (Selenium Conf)
   }
   ReactDOM.createRoot(
   document.querySelector('#root')
   ).render()
   @bromann
   |
   mastodon.social/@bromann
   

   View Slide

8. Testing Principles 📜
   How can we improve the stability of our tests and increase test coverage by shifting to smaller test units?
   

   View Slide

9. The Testing Pyramid
   Picture from https://www.headspin.io/blog/the-testing-pyramid-simplified-for-one-and-all
   

   View Slide

10. The Testing Trophy
    Source: https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications
    End to End
    A helper robot that behaves like a user to click
    around the app and verify that it functions correctly.
    Integration
    Verify that several units work
    together in harmony.
    Unit
    Verify that individual, isolated
    parts work as expected.
    Static
    Catch typos and type errors as
    you write the code.
    High Confidence
    Low Confidence
    Slow Execution
    Fast Execution
    

    View Slide

11. UI Component Dependencies
    UI Component
    Backend Database
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

12. Status Quo 📏
    What are people already using today and why the heck should I care?
    

    View Slide

13. “Jest is a JavaScript test runner that lets you access the DOM
    via jsdom. While jsdom is only an approximation of how the
    browser works, it is often good enough for testing React
    components.”
    reactjs.org
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

14. View Slide

15. @bromann
    |
    mastodon.social/@bromann
    

    View Slide

16. @bromann
    |
    mastodon.social/@bromann
    

    View Slide

17. JSDOM
    Caveats
    ● Interactions with components can only be imitated via JavaScript
    ● Missing Web APIs
    ○ Module scripts (ESM)
    ○ Fetch API
    ○ CORS
    ○ …
    ● Canvas support requires additional dependencies and has limitations
    ● May behave different than Web APIs implemented in actual browsers
    ● No element pseudo states, e.g. :hover or :active
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

18. JSDOM
    Caveats
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

19. 🙈🙉
    🙊
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

20. 🙈🙉
    🙊
    .btn {
    visibility: hidden
    }
    
    ❌
    Button
    Click Fails
    Button
    Clicked
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

21. 🙈🙉
    🙊
    .btn {
    height: 0px
    }
    
    ❌
    Button
    Click Fails
    Button
    Clicked
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

22. 🙈🙉
    🙊
    .forgotEmailOrPassword {
    transform: translateY(-50px)
    }
    
    ❌
    Button
    Click Fails
    Button
    Clicked
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

23. 🙈🙉
    🙊
    .forgotEmailOrPassword {
    transform: translateX(10000px)
    }
    
    ❌
    Button
    Click Fails
    Button
    Clicked
    ⁉
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

24. 🙈🙉
    🙊
    ❌
    Scroll Action
    ❌
    User Pinch Zoom
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

25. import { render } from '@testing-library/react'
    import { mock, fn } from '@wdio/browser-runner'
    // or
    import { vi } from 'vitest'
    const mock = vi.mock
    const fn = vi.fn
    import { InstantSearchComponent } from './InstantSearch'
    mock('algoliasearch/lite', () => ({
    default: fn().mockReturnValue({
    search: fn().mockImplementation(async () => {
    const fixture = await import('./__fixtures__/algolia.json')
    return Promise.resolve(fixture)
    }),
    searchForFacetValues: fn(),
    addAlgoliaAgent: fn(),
    clearCache: fn()
    })
    }))
    mock('../constants', () => ({
    HEADING: 'mocked out'
    }))
    describe('InstantSearch Component', () => {
    before(() => {
    // render component
    render()
    })
    it('...', async () => {
    // ...
    })
    })
    Mocking
    ❌
    Dependencies
    Modules
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

26. ❌
    @bromann
    |
    mastodon.social/@bromann
    Hidden Element
    Zero Height
    Overlaying Element
    Out of Viewport
    Support Scroll Action
    Support Pinch Zoom
    Support Mocking
    ❌
    ❌
    ❌
    ❌
    ❌
    ❌
    ❌
    ❌
    ❌
    ❌
    ❌
    ❌
    ❌
    ❌ ❌
    ❌ ❌
    Overview
    

    View Slide

27. WebdriverIO Setup 🛠
    How to get started with WebdriverIO and component / unit testing in my project?
    

    View Slide

28. @bromann
    |
    mastodon.social/@bromann
    Component Testing
    with WebdriverIO
    

    View Slide

29. Component Testing
    with WebdriverIO
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

30. Component Testing
    with WebdriverIO
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

31. Live Coding 󰳕
    Let’s see WebdriverIO component tests in action and check out features like mocking to test coverage reporting.
    https://github.com/christian-bromann/seconf-2023-demo
    

    View Slide

32. React Preact Vue
    Pick Your Framework 🤔
    Svelte Lit Solid
    @bromann
    |
    mastodon.social/@bromann
    

    View Slide

33. What’s Next? 🚀
    An outlook into the WebdriverIO roadmap in regards to web-component testing
    

    View Slide

34. ● Improved mocking capabilities / fixing known issues
    ● Support for more testrunner, e.g. Jasmine or Cucumber
    ● Snapshot testing support for images and DOM nodes
    const component = render()
    await expect($(component)).toMatchSnapshot()
    ● Improve support for more frameworks, e.g. AngularJS
    ● What else?
    @bromann
    |
    mastodon.social/@bromann
    Component Testing
    with WebdriverIO
    

    View Slide

35. Thank You!
    @bromann
    mastodon.social/@bromann
    

    View Slide