Introducing DOM and Visual Snapshot Testing for Component, End-to-End and Mobile Testing
We're excited to announce support for DOM and Visual snapshot tests using a common set of primitives supporting all testing environments WebdriverIO offers. Our vision has always been to provide a comprehensive, versatile testing tool that simplifies your workflow. This update is a step towards creating a 'Swiss Army Knife' for unit and visual testing, catering to diverse requirements across platforms and extending our support to native mobile applications, making your testing process more efficient and seamless.
Both, DOM and Visual Snapshot primitives will be available for you when running component and unit tests, end-to-end tests as well as mobile web tests. In addition to that the same visual snapshot primitives will be also available for native mobile application tests.
If you are more of a visual learner, we've also released a WebdriverIO tutorial on our YouTube channel:
Let's dive into each of these powerful capabilities.
DOM or Object Snapshots
For evaluating the state of the DOM, a large object or the content of a UI element we often tend to copy the value into our test and manually update it if we change the behavior of our application or component.
With text-based snapshots, we can just have this handled by WebdriverIO. For example, let's say we want to verify the state of our React component in a browser, we can just do the following:
import { expect, $ } from '@wdio/globals'
import { render } from '@testing-library/react'
function App() {
const [theme, setTheme] = useState('light')
const toggleTheme = () => {
const nextTheme = theme === 'light' ? 'dark' : 'light'
setTheme(nextTheme)
}
return <button onClick={toggleTheme}>
Current theme: {theme}
</button>
}
describe('React Component Testing', () => {
it('supports snapshot tests', async () => {
const { container } = render(<App />)
await expect(container).toMatchSnapshot()
await $('button').click()
await expect(container).toMatchSnapshot()
})
})
WebdriverIO will automatically grab the DOM structure of the component and store a snapshot file called component.test.tsx.snap
in /src/__snapshots__
directory next to your test with the following content:
// Snapshot v1
exports[`React Component Testing > supports snapshot tests 1`] = `"<div><button>Current theme: light</button></div>"`;
exports[`React Component Testing > supports snapshot tests 2`] = `"<div><button>Current theme: dark</button></div>"`;
If you prefer to keep the snapshots as part of your tests you can use toMatchInlineSnapshot
instead:
await expect(container).toMatchInlineSnapshot()
After running the test for the first time, WebdriverIO will make a change to the test and fill in the snapshot inline:
await expect(container).toMatchInlineSnapshot(`"<div><button>Current theme: light</button></div>"`)
Now, if you make changes to your component that will impact all snapshots you can update them all in a single run by calling:
npx wdio run wdio.conf.ts --updateSnapshots
# or
npx wdio run wdio.conf.ts -s