WebdriverIO Component Testing in the Browser 

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 

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 

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

p { color: #00B56C }

Hello !

class HelloWorld extends HTMLElement { connectedCallback() { const shadow = this.attachShadow({ mode: 'closed' }) const template = document.getElementById('hello-world') shadow.append(template.content.cloneNode(true)); } } customElements.define('hello-world', HelloWorld);

Hello World!

Selenium Conf @bromann | mastodon.social/@bromann 

import { LitElement, html, css } from "https://esm.sh/[email protected]"; class HelloWorld extends LitElement { static get styles() { return css`p { color: #00B56C }`; } render () { return html` <p> Hello <slot></slot>! </p> ` } } customElements.define('hello-world', HelloWorld);

Hello World!

Selenium Conf @bromann | mastodon.social/@bromann 

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 

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

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

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 

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

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

“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 

No content

@bromann | mastodon.social/@bromann 

@bromann | mastodon.social/@bromann 

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 

JSDOM Caveats @bromann | mastodon.social/@bromann 

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

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

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

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

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

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

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 

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

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

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

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

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

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 

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

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

● 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 

Thank You! @bromann mastodon.social/@bromann