🇺🇦 We stand with the people of Ukraine. We encourage compassion, and hope for peace. 🇺🇦 Please support humanitarian efforts for the Ukraine crisis through the International Committee of the Red Cross! #StandWithUkraine
We are thrilled to announce the latest update to the WebdriverIO Visual Testing module. This release brings two significant enhancements: making the Visual Testing Module a pure JS module and the introduction of a new CLI argument for automatic baseline updates.
Making The Visual Testing Module a Pure JS module
One of the major changes in this update is the replacement of the Canvas library with Jimp. This shift eliminates the need for system dependencies, which often cause issues on local machines due to missing dependencies and complicate CI/CD pipelines. By using Jimp, we have streamlined the installation and setup process, making it more straightforward, less prone to errors and more important, a pure JS module.
In response to user feedback, we've introduced a new command-line argument that allows you to automatically update your baseline images. This feature simplifies the process of maintaining and updating your baseline images, ensuring your visual regression tests remain accurate and up-to-date with minimal manual intervention. By adding the argument --update-visual-baseline to your command your tests will be executed again and failed tests will automatically be updated.
Learn everything about WebdriverIO's visual testing capabilities in our Visual docs and join our 👁️-visual-testing channel on Discord.
Thank you for your continued support, and we look forward to your feedback on these new features.
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.
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:
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:
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
This makes maintaining your tests so much easier. The same works for all other types of objects, e.g. CSS Properties, or the text content of an element. They all can be converted into a snapshot to simplify the assertion and keep your tests lean. This can also speed up your tests by merging many single assertions into one, e.g.:
const elem =$('#alertBar') awaitexpect(elem).toHaveAttribute('data-alert') awaitexpect(elem).toHaveClassName('success') awaitexpect(elem).toHaveText('You logged into a secure area!')
now becomes a single:
awaitexpect($('#alertBar')).toMatchSnapshot() /** * stores the following into a snapshot file: * * <div data-alert="" id="flash" class="flash success"> * You logged into a secure area! * <a href="#" class="close">×</a> * </div> */
While taking a snapshot of the DOM might be the most prominent use case, you can take snapshots of all types of serializable data structures, e.g.:
// the visible content of an element awaitexpect($('elem').getText()).toMatchSnapshot() // or of an serializable object awaitexpect($('elem').getCSSProperty('color')).toMatchSnapshot()
You can find more information about DOM and object-based snapshots in our Snapshot guide.
While taking snapshots of an element structure and its attributes might be great and powerful, it comes with an important caveat: even though we are testing that the element has a class name called success, this doesn't guarantee that the alert is green!
For these reasons, visual testing has become a very popular tool as it includes how elements are rendered, in which color and can ensure that e.g. it is not overlaid by any other element. Taking visual snapshots works very similarly, as you can:
The module now supports the toMatchElementSnapshot and toMatchScreenSnapshot matchers for Mobile native apps. It automatically detects the testing context (web, webview, or native_app) to streamline your workflow.
We owe a big thank you to our core maintainer Wim Selles for his work in wdio-native-app-compare, which inspired this enhancement. His contribution has been vital in advancing our module's capabilities.
Thank you for your continued support, and we look forward to your feedback on these new features.
The WebdriverIO community is on the verge of an exciting new era, supported by strategic partnerships with BrowserStack and Sauce Labs, along with continuous support from other sponsors like LambdaTest. This collective endeavor signifies a crucial milestone for the WebdriverIO project, as we utilize these additional resources to foster the growth and enrichment of our ecosystem.
WebdriverIO's story began with its inception into the JS Foundation in 2017, which later evolved into the OpenJS Foundation. Since then, it has thrived as an open-governed, community-driven endeavor, witnessing continuous growth in NPM downloads, the introduction of innovative plugins and reporters, and the rollout of new functionalities. This expansion is a testament to the hard work and dedication of the global testing community, including project users and contributors from leading testing cloud providers.
WebdriverIO's core principle is its dedication to open governance, an aspect that has attracted the trust and confidence of its users, especially those in the enterprise world. The project's growth has been organic, independent of Venture Capital, corporate objectives and sales requirements, guaranteeing that its development aligns with the true needs of our user community and all features remain free of charge.
With the project's continuous expansion, marked by increasing NPM downloads, new functionalities, plugins, and reporters, the importance of nurturing a healthy and sustainable growth path has never been more critical. Our recent alliances with top cloud services for automated testing demonstrate our dedication to responsibly managing these resources, with the aim to widen our network of contributors and enrich the entire ecosystem.
Central to our ethos is the belief that financial support of the WebdriverIO ecosystem is a worthy endeavor. Whether it's the occasional contributions from casual participants or the continuous dedication of our core team members, every contribution is a building block of our project's success. Currently, the project benefits from a monthly donation inflow of $3,879, sourced through various channels like Tidelift, Thanks.dev, GitHub Sponsors, and our Open Collective. These funds have empowered the Technical Steering Committee to finalize new governance policies, outlining our strategic approach to fund allocation.
Our monthly budget is allocated across four key areas:
Project Development receives the largest share, with 60% of the funds dedicated to fostering growth and innovation.
Travel and Event Expenses account for 20%, supporting our participation in and hosting of industry events and meetups.
Support Systems are allocated 10% of the budget, ensuring our infrastructure and community support mechanisms remain robust.
Lastly, Dependencies, crucial external projects and tools we rely on, also receive 10% of our financial resources.
Our financial strategy gives top priority to project development, dedicating 60% of our resources to it. This funding aims to draw contributions from a wide range of people, increasing our base of dedicated contributors. By dividing the funds, allocating 35% to individuals not directly involved with the project and 65% to our project contributors and the Technical Steering Committee (TSC) members, we seek to foster a strong sense of community and shared ownership. This approach is vital for ensuring the long-term prosperity and stability of our project.
As part of this strategy, we have developed an automated expense process using a GitHub Action to help run this program. You can read more about how this process works on my personal blog.
Recognizing the importance of community engagement, especially in the aftermath of Covid-19, we are allocating funds towards travel and event expenses. This decision emphasizes our commitment to creating user meetups and supporting the broader community in hosting WebdriverIO-related events. It reflects our desire to not only maintain but also to strengthen the community ties that form the backbone of our project.
A small fraction of our monthly budget is allocated to various essentials that support our project's community growth and upkeep. Our intention is to invest in translating our documentation and financially support those who contribute to this effort. Additionally, we aim to cover ongoing costs for infrastructure needed to host project-related materials, as well as provide our maintainers with the software tools necessary to enhance their contributions to the project.
Finally, we're committed to giving back to the projects and communities that are crucial to WebdriverIO's success. We believe it's vital for open-source projects benefiting from generous donations to support their key dependencies. Thanks to Thanks.dev, we can identify and financially support our most critical dependencies based on their significance to our project and the funds we allocate monthly for this purpose. Noteworthy dependencies include:
Individual open-source champions like Sindre Sorhus and isaacs, whose contributions to various dependencies are invaluable.
The Vite ecosystem: we use Vitest across almost all our projects, and we couldn't provide such powerful component testing capabilities without Vite under the hood
The Eslint project and its related ecosystem projects are fundamental to maintaining a high code quality of our projects and have significantly inspired our contributor stipend program.
As we embrace this new chapter, we're excited about the prospects of accelerating growth through strategic investments in our community and project. The early feedback from our initiatives has been overwhelmingly positive, and we are committed to refining our processes for even greater efficiency and transparency.
We extend our heartfelt gratitude to our sponsors for their invaluable support, and we warmly welcome further sponsorship to join us in this journey. Together, we are setting the stage for an even brighter future for WebdriverIO and its thriving ecosystem.