Exploring WebDriverIO Version 9 with Christian Bromann

[00:00:00] In a land of testers, far and wide they journeyed. Seeking answers, seeking skills, seeking a better way. Through the hills they wandered, through treacherous terrain. But then they heard a tale, a podcast they had to obey. Oh, the Test Guild Automation Testing podcast. Guiding testers with automation awesomeness. From ancient realms to modern days, they lead the way. Oh, the Test Guild Automation Testing podcast. With lutes and lyres, the bards began their song. A tune of knowledge, a melody of code. Through the air it spread, like wildfire through the land. Guiding testers, showing them the secrets to behold. Oh, the Test Guild Automation Testing podcast. Guiding testers with automation awesomeness. From ancient realms to modern days, they lead the way. Oh, the Test Guild Automation Testing podcast. Oh, the Test Guild Automation Testing podcast. With lutes and lyres, the bards began their song. A tune of knowledge, a melody of code. Through the air it spread, like wildfire through the land. Guiding testers, showing them the secrets to behold.

[00:00:34] Joe Colantonio Hey, what are some of the new features in WebDriver IO v9? That's all we're talking all about today with Christian Bromann. If you don't know, Christian is a full stack engineer who's passionate about open source and open standards. And he is the main person behind the Must know automation framework WebDriver IO, he’s an open source and open standards advocate and an automation expert. Really excited him back on the show. You don't want to miss it. Check it out.

[00:01:00] Joe Colantonio Hey, Christian, welcome back to The Guild.

[00:01:05] Christian Bromann Hey, Joe. Thanks for having me.

[00:01:07] Joe Colantonio All right, so last time we spoke was almost two years ago. I think it was in December of 2022. You just had come up with version 8. And so today we're gonna cover version 9. I guess before we get into all that, just in case, I think we've had some good discussions in the past. A lot of times people don't realize there's other frameworks like WebDriver IO available. So if someone's like that, how would you explain what is WebDriver IO before we actually dive into new features of it?

[00:01:34] Christian Bromann Yeah. I mean, WebDriverIO has been along for a long time, I think it's has been always 14 years now. And as opposed to other known frameworks like Playwright or Cypress, WebDriverIO was based on the web server standard. So it uses web standards for automating the browser, namely the web server protocol. And so this allows you to basically have all these features that WebDriver provides across all browsers without having patched the browser or running within the browser context. It's based on what standards? It's an open source and open governance project that means that basically everyone, no one owns the project. Everyone is welcome to join to contribute. And within actually, this year we started to actually give out money to everyone who every single contribution, someone will receive money for that. It's kind of like the Vue.js of all the frontend frameworks, which is open governance for everyone.

[00:02:32] Joe Colantonio That's not just glossed over giving money away. What does that mean? How does that work?

[00:02:36] Christian Bromann Yeah, thanks to our sponsors like SauceLabs, BrowserStacks, and others. We have now financial resources to essentially support the development of the project. And so some of these fund being distributed to the contributors to the project on that part of the team, but a lot of funds also contributed to or being dispersed to everyone who contribute to the project. Every single bug fix, any single contribution to any of the projects that are related to WebDriverIO will get, the person will get money back and we want to grow our community or development community around whatever to make this project stay around forever and be a solid project of choice.

[00:03:17] Joe Colantonio Awesome. Christian, you're the one that founded WebDriverIO, correct? The main creator, originally?

[00:03:22] Christian Bromann Well, the original person who started the project was Camilo Tapia, who comes from Sweden. But I took it over very early on, and since then, kind of like spearheading it. And it's kind of it started as a pet project, and now it's become a much greater thing. And I love to have this journey and share it with other people.

[00:03:41] Joe Colantonio Nice, I've spoken with Simon Stewart, who was the main person behind WebDriver 2.0, or Selenium 4 whatever. Quick question how much involvement you have in day to day. Has it gotten less with this version because it's almost been two years? How does that work? I'm just curious to know, like how it works as you go through you as the final say or is it more democratic?

[00:04:05] Christian Bromann We have a technical steering committee that has I think around 5 members who kind of like make the big decisions and who kind of like when we introduce new policies around the governance of the project, we kind of like talk with each other to make sure that we're all on the same board. And then there are project maintainers that contribute for bug fixes and features. So yeah, the technical steering committee team has been there. People that have been around much more intensively. Some people have been moving away, which is fine too. Not everyone has time to work on open source every day. But right now, there's a solid team of people that contribute to various phases of WebDriverIO. And I'm working on growing that team in bigger.

[00:04:52] Joe Colantonio Nice. I guess the first feature that caught my attention, and I guess I'll have to gauge your opinion what the biggest new feature is. There's WebDriver Bidi enhancement. Maybe a little bit about what this new opportunity does. Like this feature. What does it open up for developers?

[00:05:11] Christian Bromann Originally the WebDriverIO protocol, the browser automation, the standard for browser automation has been developed before tools like React or Vue and Stencil came around. It wasn't really designed for the developer needs to test their dynamic JavaScript based application. When I started actually, joining the W3C working group around browser, browser standards, they realized very early on while developing the WebDriver Protocol, and decided to work on the second version of that specific protocol to kind of like add these missing features that are people liked and Puppeteer that people liked in Cypress. And now people often Playwright as well that allows just a deeper interaction with the browser and deeper introspection to network events and all sorts of things that the browser is doing. And within this year and last year, this new standard has been adopted by the major browsers, namely Edge, Chrome, and Firefox. And so these features are now ready for Prime. And we are rolling this out in WebDriver 9 integrating them into new features around some existing commands, and also adding some new capabilities on top of the existing ones.

[00:06:25] Joe Colantonio Nice, if someone was looking at something like Playwright or newer tools, a lot of them were able to kind of interact with the network interaction. And I know Selenium 4 fixed this with Bidi by adding that by not building it in. But I guess plugging into the Bidi enhancement. I assume this is the same exact thing with WebDriver. Are there any other features that you get when you use WebDriverIO over just straight WebDriver or straight Selenium?

[00:06:52] Christian Bromann We adopted the WebDriverIO protocol already with version 8, but with version 9, what will change is that we make the usage of that protocol much easier. For instance, mocking network requests, we have a mock object that makes it very easy to just provide a glob pattern and then, play around with the response or add some headers if you like to the request. And this is now integrated or build with WebDriver Bidi another example of a new feature that we where we use Bidi now is the URL command to navigate to a certain website that's now an option parameters that allows you to pass in the headers. That allows you, for instance, to authenticate with a website when you open it and all that we are using Bidi in the background to to enable this feature. We don't want users to have to know a lot about the standard and the protocol. We just want them to use a simple interface on top of these protocols.

[00:07:49] Joe Colantonio All right. So it's a good point. It may just be a function in there that you're just using that happens to be using Bidi behind the scenes, but kind of like a wrapper on top of it. It just makes it a lot easier to use sounds like.

[00:07:59] Christian Bromann Exactly. Another example I can give us like the URL command now has an on before load function or that allows you to execute some JavaScript before the application is loaded. And so this allows you to, for instance, override some native web APIs. One example is for instance, the get battery function that allows your application to fetch the battery status of your laptop. You can override that function and then provide like a specific value in order to test whether your application like renders the battery status of your laptop, correctly. Things like that. There's like so much opportunity now with these capabilities overriding native web APIs that we didn't even touch on all the capabilities yet. Like over the course of version 9, we will add a lot of more features that will use Bidi where we do some tricks with the web APIs to make testing much, much easier.

[00:08:54] Joe Colantonio Nice. Once again that's the new URL command parameters? That feature?

[00:08:58] Christian Bromann Yeah.

[00:08:59] Joe Colantonio Awesome. How hard would this have been to do before this? Would you had to use like a different library or how much time with the save someone now with this? Or is this something like oh my gosh, you could do so many things that you can't even do before because it would've been nuts to to roll your own?

[00:09:14] Christian Bromann Yeah. Before Bidi, this wouldn't have been possible because Bidi, the way Bidi allows this script injection is at a time where you can actually override these native web APIs. If you try to override native APIs when the browser has been established it's context, you wouldn't be able to do so because those are read only properties and functions. Bidi actually enables that by running the script much before the browser kind of like freezes all these objects. That wouldn't be possible before Bidi even before version 8, you would have known how WebDriver Bidi works. You would need to know all these commands and primitives to get this running. This is now much more easier with a simple parameter that allows you to just pass in an object and WebDriverIO will take care to set these headers, for instance, properly to the request and clears everything up after you have access to the page.

[00:10:06] Joe Colantonio Nice. This might be a dumb question. With all this power, is there anything you could do that you shouldn't be doing using these techniques? Or is it so new that you don't know if people are going to start doing like, maybe a bad practice utilizing some of these methods or these new parameters?

[00:10:20] Christian Bromann Yeah. I mean, of course with great power comes great responsibility. So yeah, there will be capabilities where you injecting script to override web APIs can be dangerous because you modify the way the browser works and that can maybe fall on your feet in a test where you expect a different behavior of that web API. If you do things like overriding native web APIs, you should be careful to clear up these overrides in a consecutive test or like before you run the next test so that you actually you don't run into confusions when you use the same web API which behaves different now.

[00:11:01] Joe Colantonio Excellent. So I know WebDriverIO has always been strong with shadow dom, so I know a lot of people they brought that up as one of the things. I was looking through the features, new features. One of them is called automatic piercing of web components, iFrames and shadow Dom. What is that all about and how does improve maybe the accuracy and reliability of a test result?

[00:11:20] Christian Bromann Yeah, this is one of the most exciting one for me because there was a lot of like work going into that and like introspection of how the protocol works and how web components work of all. And as someone who was working on the stencil project, which is a web component library to build design systems like this has been really helpful in my company to test these web components. And what it is essentially is, WebDriver version 9 allows you to just query any element on the page, no matter if it's within the shadow root or not. That was very difficult before because an element within the shadow root is not accessible from the outside unless you know the element and you have to do like an extra query to look to do a lookup in the shadow root. And that can become more complicated as your shadow roots are more and more nested within each other. As we move forward to a world where we will use more and more web components, this will make your testing those application much, much difficult because you have a lot of more like nested lookup calls to look for swing from one shadow root into the another and WebDriverlO version 9. This will not be necessary anymore because WebDriver will kind of like in memory, render a tree of all shadow roots and will do an automatic parallel lookup into all of them. And then we'll filter out the ones that are actually were looking for. We list .... you will see like a calendar application that is using many nested shadow elements. And it is just a simple one single element lookup for you. And you get access to that element without problems. And that works with an open shadow root and with a closed shadow root, which is something that no other, I think no other tool right now is able to do.

[00:13:09] Joe Colantonio Nice. Does that a lot of a time to have to find it, like how fast is optimized is that particular method?

[00:13:15] Christian Bromann It optimizes a lot because we do all these lookups in parallel. And if you would do this manually, you would have to query an element, look into the shadow root, then go to the next element, look at that shadow root. And depends on how much nesting or how much nested the element that you want to lookup is. And it can take quite some consecutive calls to the protocol and whatever the would do this all in parallel and make test as well much faster.

[00:13:44] Joe Colantonio Nice. Next on the list I have is add init script or initialization script commands. Can you give some examples of what that could, how that could be beneficial maybe to automation or scripting with WebDriverIO?

[00:13:56] Christian Bromann Yeah. That is related to what we talked about before, where you can update the certain web API that you application is using in order to adhere to your test like the battery example is a good one where you use the web API to kind of like show something on your application or you want to install or set up a listener that you know will be invoked whenever an element shows up or whatever happen. If you want to observe whatever happens on the browser, you can now do this by injecting that script, which will be invoked when before the application is loaded. We just to all the listeners that you need and then call back to your test script whenever something interested on the website and what application is happening. Again, this allows a lot of opportunities and capabilities because you can override native web APIs, you can override native, use class methods to achieve and to hook into certain things. I believe there will be a lot of interesting applications for that in your tests.

[00:14:57] Joe Colantonio Absolutely. People definitely need to get their hands on this latest version. All right. Next on my list is object to serialization and viewport management, I think you've always had object serialization. I think you proved on it. But I think there's a new command to set viewports or something. What's this all about?

[00:15:13] Christian Bromann Yeah, the object serialization is all about allowing more native objects in JavaScript to be passed into the browser. If you think about object, maps, and sets, which are native to JavaScript, they haven't been able to be serialized before into the browser. Now, the WebDriver Bidi protocol allows that to also pass along an infinity value to the browser. Things like that. It just makes it easier. It makes it easier to apply scripts to the website, and the viewport command is in addition to what we had before with setting the window size. The problem of setting the window size is that some operating systems, like macOS, they only allow you to shrink it down to 500 pixel. And so emulating a mobile v4, for instance, is very difficult with that limitation. The WebDriver Bidi protocol provides a capability to set the viewport, including the device pixel ratio, which now allows you to emulate mobile keyports much easier. And so an enhancement to that, we also added the new scope to the emulate command that is using WebDriver Bidi where you can just provide a device name like iPhone 15 and WebDriverIO will scale the viewport down to that specific device viewport size. And we'll also adjust pixel resolution or the pixel ratio, which allows you to do some mobile test when it comes to around testing a mobile viewport which will not ultimately replace a mobile test ultimately, because, as we know, mobile browsers and mobile browser engines have much different than desktop browser engine. While it helps to kind of like test some mobile aspects, I think it's still valuable to run test a mobile test with WebDriverIO on an actual we a mobile web device.

[00:17:01] Joe Colantonio I guess almost like a sanity test for us. Make sure it's cool that way before you go to the main real device type testing?

[00:17:09] Christian Bromann Yeah, exactly. There are some teams that don't have the resources or access to mobile phones. And so this way kind of like it's an escape hatch or like a workaround for those kind of scenarios.

[00:17:19] Joe Colantonio Nice. So anything about like new support like TypeScript integration or Node.js, anything people do need to know about upgrading or anything in order to use this latest version?

[00:17:28] Christian Bromann Yeah, with v9 we will drop support for node version 16 as this version has been deprecated for long. I think WebDriverIO was one of the first project, we had native support for native TypeScript support for WebDriver Bidi primitives. These has been enhanced. And yeah those are like yeah those are more the notable changes on that side.

[00:17:51] Joe Colantonio This next feature I'm excited about because I actually have to update one of my blog posts because I have like the top open source visual validation testing tools. And I saw this on visual testing reporting capabilities. This to me is exciting. Could you talk a little bit about visual testing? How is it now baked into WebDriverIO? I guess I missed this somehow, I don't know how, but a little bit more about that.

[00:18:12] Christian Bromann Yeah, we could have been more vocal about this, but yeah, we have enhanced our visual capabilities and support. Visual snapshot testing for mobile and web with WebDriverIO natively. That includes also testing as storybook projects. And we have been also working on a Visual report for that, that WebDriverIO spits out like an HTML report for all your visual tasks. And we are working on DevTools application that essentially will allow you to approve and decline baselines, which is something that we're currently working on. We have released yet, but there are some exciting developments there. And yeah, for folks that haven't checked it out like I've seen like I've, I have not implemented that the visual features that has been done by them one of our steering themselves, one of our steering committee members and he has done tremendous work. And I've seen when I saw testing, we tested the BBC's storybooks that they had like 150 components and WebDriverIO we're testing those all components in parallel. And it was done within like 10s. It really amaze me, it was a tremendous job done. And I love all these visual features that WebDriverIO provides now.

[00:19:23] Joe Colantonio I mean that it sounds killer. So does it use Jest? Like how it is implemented?

[00:19:28] Christian Bromann We have a plugin, a service that brings these capabilities to your browser, browser instance. So if you want to run visual test, you can just hook up to the service and you have commands to like for instance to match screen snapshot or to match element snapshot and WebDriver will save the snapshot on your file system and allows you to easily through the CLI to kind of like update baselines and create new ones. It's similar to like snapshot testing with text of objects, but for visual essentially. And we're using our matcher, our like assertion library, which is called ...... which is also native. If you use WebDriver test runner and you get these matches for free, and which makes testing very, very easy. That's a lot of more information on our documentation around visual testing. Something that I haven't also mentioned is which is part of this is OCR testing. If you ever come to a place where you need to where you have, for instance, a canvas where you want to click on a certain element within the canvas, OCR testing will make this possible. OCR testing is essentially, it takes a screenshot of whatever you want to interact with and will identify text and elements within it. And so there's an OCR service that is within our visual project that allows you to do those kind of things. So pretty cool stuff that we have there.

[00:20:51] Joe Colantonio All right. Hold on, hold on. So say you're using a web browser and somehow it brings up like a message box. And it's not part of the browser. It's like a system message box. You can use the OCR to click on it like some simple like that, rather than have this some weird integration with Auto IT?

[00:21:06] Christian Bromann Unfortunately not because we get the image, the image information are still come from the browser, so we are not leaving the browser world. However, if you have a message box and you work with native system messages or just want to automate the operation system, WebDriverIO since it's based on the WebDriver protocol allows you to use Appium, for instance, to automate Mac OS applications or windows application as well. There are ways around it. But yeah, the OCR part mostly everything that is browser related that you cannot interact with because it's an image or like some sort of like canvas. That's possible of that.

[00:21:43] Joe Colantonio Nice. All right. Another thing that kind of caught my eye. I don't know why. I guess Puppeteer doesn't get a lot of love because Playwright overshadows it. But it looks like you're integrating with Puppeteer now. Why? I guess the first thing is why? What's that all about?

[00:21:55] Christian Bromann We have been integrating Puppeteer for a long time, but version 9, we kind of like did some cleanups. But essentially what we want to allow users is, WebDriver Bidi allows will allow you to do things that work across all browsers that the standards team at the W3C, all the browser vendors sit together and see what is possible, what we can embed in browsers, for automating browsers, that can be done across all of them. There are a lot of features like performance testing, tracing. Those are mostly like very browser native. And Chrome often leads in these areas, especially when it comes to like performance tracing things like that. And so all these features are behind the Chrome DevTools protocol and Puppeter has been always the amazing tool if you want to interact with Chrome DevTools. With WebDriverIO you have a get Puppeteer command that allows you to instead of using WebDriverIO for automating the browser, you can just use a Puppeteer instance to do the same and have access to all the additional Chrome DevTools commands that WebDriverIO and WebDriver Bidi doesn't, which is great if you do want to do a little bit more on chromium based browser only. And so we use Puppeteer for that. And recently also Puppeteer has just released that it has completely switched to WebDriver Bidi as well. For most of its automation interfaces and has now support for Firefox and Chrome or Chromium browsers so Edge as well. There's a lot of tools now switch to WebDriver Bidi and I believe we will see more adoption of the protocol as we in the future.

[00:23:32] Joe Colantonio Very very cool. All right. We touched on the community driven aspect, development of the WebDriverIO with the money. Someone heard the how did I get involved? How can they start contributing to future releases? How does that work with your particular project?

[00:23:47] Christian Bromann Yeah, we basically look for anyone who is interested in to contribute things to the project. It doesn't have to be code. It can be helping us, giving a hat on the website, frontend developer. And it can be just like translating the website. As you know, we have our website translated in about seven different languages, and all of these languages haven't been completed yet. There's always work to do to update the documentation around these other languages. We pay money out for that. Of course, if there's something a new feature that someone wants to contribute, we want to pay them for that as well. And so there's a lot of like things to do. And whenever there's something that interests you, you can join our discord channel. There's a contributor channel there that you can just join and reach out because every one of our contributor team will be there and we'll be able to help. We'll be able to find you work and interesting things to work on because that's important for me is that WebDriverIO has been always a tool that allowed me to learn new technologies and become better in certain programing aspects. I think that's a great chance for everyone to do the same. Thanks to our sponsors, we can even pay them out.

[00:25:03] Joe Colantonio We'll have a link for the discord channel down below and maybe right here in the video. All right. Future directions I know you just released version 9. Is there a big challenge you see on the horizon that you think maybe you could work towards or you have on your backlog with WebDriverIO? I know AI is all the rage. I don't know there's any open source AI, ML projects that could be integrated or that's something you're for or against anything like that.

[00:25:31] Christian Bromann There's a lot of things we, I look into it when it comes to AI, but for WebDriverIO particularly we want to improve just the experience using WebDriver. One of the leading features why people may choose Playwright or Cypress or WebDriverIO has been the UI mode or the like a certain application that helps to debug a certain tests. And we want to definitely get better at that. And especially with now WebDriver Bidi being core to the project, we have the ability to build something like the Playwright UI mode within WebDriverIO that works across all browsers. And so we started the development on that. And I think this will be my focus after the V9 release to kind of like bring out an application that will help developers to introspect the application while the test is running, to stop the tests at any given point in time to inspect the website. There will be some cool features coming up. And looking forward to that. And of course, everyone, who is interested in helping on that effort can join our channel and be part of this.

[00:26:39] Joe Colantonio Love it. Are there any other features I may have missed, those are the ones I have written down, but I may have missed something?

[00:26:44] Christian Bromann Oh yeah. I mean, there's some notable breaking changes and things we have changed internally. Like we are now using NPM within the project to set up all the sub packages. We have migrated to Esbuild to compile the whole project and we have updated our JavaScript runtime. So if you use TypeScript, you will probably see a little performance improvement, especially with the Esbuild migration, you will also see performance improvement and stability improvements around the component features of WebDriverIO. We did a lot of like internal cleanups and changes to make sure that we can continue working on WebDriverIO and don't bring on any legacy around.

[00:27:26] Joe Colantonio All right. Okay. Christian, before we go, is there one piece of actionable advice you can give to someone to help them with their WebDriverIO automation testing efforts, and what's the best way to find or contact you?

[00:27:37] Christian Bromann Yeah, I think I will give the same advice as I do every year talking to you about the release. Just if you're like automation practitioner or someone who has to do test browser automation or mobile automation, it's always recommended to get to know the tool that you're using well. It never hurts to contribute back to the project that you use. And this will allow you to not only understand the tool better, but understand where certain errors come from. And having WebDriverIO as a common project would be a good thing to learn about better automation practices as well. You can find me on Twitter, on LinkedIn, @Bromann, on GitHub, or join me on WebDriverIO discord channel. We are there almost every day to hang out and have fun working on the project that belongs to us.

[00:28:29] Thanks again for your automation awesomeness. The links of everything we value we covered in this episode. Head in over to testguild.com/a510. And if the show has helped you in any way, why not rate it and review it in iTunes? Reviews really help in the rankings of the show and I read each and every one of them. So that's it for this episode of the Test Guild Automation Podcast. I'm Joe, my mission is to help you succeed with creating end-to-end, full-stack automation awesomeness. As always, test everything and keep the good. Cheers.

[00:29:02] Hey, thank you for tuning in. It's incredible to connect with close to 400,000 followers across all our platforms and over 40,000 email subscribers who are at the forefront of automation, testing, and DevOps. If you haven't yet, join our vibrant community at TestGuild.com where you become part of our elite circle driving innovation, software testing, and automation. And if you're a tool provider or have a service looking to empower our guild with solutions that elevate skills and tackle real world challenges, we're excited to collaborate. Visit TestGuild.info to explore how we can create transformative experiences together. Let's push the boundaries of what we can achieve.

[00:29:47] Oh, the Test Guild Automation Testing podcast. With lutes and lyres, the bards began their song. A tune of knowledge, a melody of code. Through the air it spread, like wildfire through the land. Guiding testers, showing them the secrets to behold.