Exploring WebDriverIO Version 9 with Christian Bromann

In a land of testers far and widely journey seeking answers, seeking skills, seeking a better way. O the test Illumination Testing Podcast Guiding testers with automation awesomeness from ancient realms to modern days they lead the way. Oh, the test is Automation Testing Podcast.

Hey, what are some of the new features in WebDriver IE version 9. That's what we'll be talking all about today with Christian Broman. If you don't know, Christian is a full stack engineer who's passionate about open source and open standards and 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 exciting man back on the show. You don't want to miss it. Check it out. Hey Christian, welcome back to the Guild.

Hey Joe, thanks for having me.

All right, so last time we spoke was almost two years ago. I think it was in December of 2022. You just had come out with version eight. And so today we're going to be coming to version 9. But I guess before we get into all that, just in case, I think we've had some 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?

Yeah, I mean WebDriver has been along for a long time. I think it has been always 14 years now. And as opposed to other known frameworks like priorite or Cypress, WebDavo is based on the WebDriver standard. So it uses web standards for automating the browser, namely the WebDriver 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. So it's based on web standards, it's an open source and open governed project. That means that basically no one owns the project. Everyone is welcome to join, to contribute and you know, within actually this year we started to actually give out money to everyone who every single contribution, someone will receive money for that. So it's kind of like the Vue JS of all the front end frameworks, which is, you know, open governed and for everyone.

So let's not just gloss it over. Giving money away. What does that mean? How does that work?

Yeah, thanks to our sponsors like Source Labs, Brothersex and others, we have now financial resources to essentially support the development of the project. And so some of these funds are being distributed to the contributors to the project and they're part of the team. But a lot of funds are also contributed to or being disposed to everyone who contributed to the project. Every single bug fix, any single contribution to any of the projects that are related to Rep Devo will get. The person will get money back. And we want to grow our community or development community around web, develop IO to make this project stay around forever and be a solid project of choice.

Awesome. So, Christian, you're the one that founded Webdriver IO, correct? The main creator originally?

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.

Nice. Now, I've spoken with Simon Stewart, who was the main person behind webdriver tuo or just selenium 4 or whatever. So quick question. How much involvement do 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 how it works. Does it go through you as the final say, or is it more democratic?

So we have a technical steering committee that has, I think around five members who kind of like make the big decisions and you know, 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 with bug fixes and features. So yeah, the technical student community team has been. There are people that have been around much, you know, much more intensively. Some people have been moving away, which is fine too. You know, not everyone has time to work on open source every day. But right now, you know, there's a solid team of people that contribute to various places of rep devil and I'm working on growing that team even bigger.

Nice. So 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, is WebDriver bid I enhancement. So maybe a little bit about, you know, what's. What this new opportunity does, like, this feature, what does it open up for developers?

Yeah, so originally the Webdara protocol, the browser automation, the standard for browser automation has been developed before tools like React or VUE and Stenciler came around. So it Wasn't really designed for the developer needs to test their dynamic JavaScript based application. And so when I started actually joining the W3C working group around browser standards, they realized that very early on while developing the reptara 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 in 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 v9, integrating them into new features around some existing commands and also adding some new capabilities on top of the existing ones.

Nice. So you know, 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 So 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 WebDriver IO over just straight WebDriver or straight Selenium?

Yeah, so we adopted the WebDriver bidi 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, you know, 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 built with webdriver bidi. Another example of a new feature where we use bidi now is the URL command to navigate to a certain website has now an option parameters that allows you to pass in headers. So 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 enable these features. So 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.

All right, so that's a good point. It may just be a function in there or that you're just using that happens to be using bydi behind the scenes, but kind of like a wrapper on top of it. That just makes it a lot easier to use.

Sounds like exactly. Another example I can give is like the URL command now has an onbefore load function or her 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 put provide a specific value in order to test whether your application renders the battery status of your laptop correctly. Things like that. There's so much opportunity now with these capabilities overriding native web APIs that we didn't even touch on all the capabilities yet. Over the course of version 9, we will add a lot of more features that will use Spiteye, where we do some tricks with the web APIs to make testing much, much easier.

So once again, that's the new URL command parameters, that feature.

Yeah.

Awesome. So how hard would this have been to do before this? Would you have to use like a different library or does this, how much time would this save someone now with this? Or is this something like, oh my gosh, you could do so many things that you couldn't even do before because it would have been nuts to roll your own.

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 web APIs when the browser has been established its 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. So that wouldn't be possible before bidi. And Even with 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 Web O will take care to set these set headers, for instance, properly to the request and clears everything up after you have accessed the page.

Nice. So 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?

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

Excellent. So I know webdriver IO has always been strong with the shadow doms. I know a lot of people, they brought that up as one of the things. So I was looking through the features, new features. One of them is called Automatic piercing of web components, iframes and shadow doms. What is that all about and how does it improve maybe the accuracy and reliability of a test result?

Yeah, this is one of the most exciting one for me because there was a lot of work going into that and introspection of how the protocol works and how web components work overall. And as someone who's working on the Stencil project, which is a web component library to build design systems, this has been really helpful. Even my company to test these web components. And what it is essentially is Web Developer version 9 now 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 an extra query to do a lookup in the shadowroot. And this can become more complicated as your shadow routes 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 testing those applications much, much difficult because you have a lot of more nested lookup calls to swing from one shadow route into the another. And with Raptor Visual Version 9, this will not be necessary anymore because Webdevil will in memory render a tree of all shadow routes and we'll do an automatic parallel lookup into all of them. And then we'll filter out the ones that you actually were looking for. And so in our release blog post, you will see 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 the element without problems. And that works with an open shadow root and with a closed shadow root, which is something that I think no other tool right now is able to do.

So does that add a lot of time to have to find it? Like how fast is optimize is that particular method?

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 look up is, it can take quite some consecutive calls to the protocol. And WebDriver v9 will do this all in parallel and will make tests as well, much faster.

Nice. So next on the list I have is add init script and initialization script commands. Can you give some examples of how that could be beneficial maybe to automation or scripting with Webdriver IO?

Yeah, that is related to what we talked about before, where you can update the certain web APIs that your 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 show something on your application or you want to install or set up a listener that will be invoked whenever an element shows up or whatever. If you want to observe whatever happens on the browser, you can now do this by injecting that script, which will be invoked before the application is loaded. So you can register all the listeners that you need and then call back to your test script whenever something interested on the website or application is happening. So again, this allows a lot of opportunities and capabilities because you can Override native web APIs, you can override native, you know, class methods to achieve and to hook into certain things. So I believe there will be a lot of interesting applications for that in your tests.

Absolutely. People definitely need to get their hands on this latest version. All right, so next on my list then is object to serialization and viewport management. I think you've always had object serialization. I think you improved on it. But I think there's a new command to set viewports or some. What's this all about?

Yeah, the argument 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 binary protocol allows that to also pass along an infinity value to the browser Things like that. It just 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 with setting the window size is that some operation systems like macOS, they only allow you to shrink it down to 500 pixel. And so emulating a mobile viewport for instance, is very difficult with that limitation. So the WebDriver BIDA protocol provides the capability to set the viewport including the device pixel ratio, which now allows you to emulate mobile viewports much easier. And so in enhancement to that, we also added a new scope to the emulate command that is using webdeva byday, where you can just provide a device name like iPhone 15 and Webdev will scale the viewport down to that specific device viewport size and will also adjust pixel resolution or the pixel ratio, which allows you to do some mobile tests 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 behave much different than desktop browser engine. So while it helps to kind of like test some mobile aspects, I think it's still valuable to run tests or mobile tests with WebDavo on an actual real mobile web device.

So I guess it's almost like a sanity test. First make sure everything's cool that way before you go to the main real device type testing.

Yeah, exactly. And if you, you know, there's 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.

Nice. So anything about like new support like TypeScript integration or Node JS, anything people need to know about upgrading or anything in order to use this latest version?

Yeah, with v9 we will drop support for node version 16. You know, as this version has been deprecated for long we the webdriver by. I think webdriver was one of the first project to had native Support for native TypeScript support for WebDriver by Primitives. So these has been enhanced and yeah, those are like. Yeah, those are more the notable changes on that side.

Nice. So this next feature I'm excited about because I actually I have to update one of my blog posts because I have like the top open source visual validation testing tools and I saw this visual testing reporting capabilities. This to me is exciting. So can you talk a little bit about visual testing? How it's. Is it now baked into webdriver? I o. I guess I Missed this somehow. I don't know how, but a little bit more about that.

Yeah, we could have been more vocal about this. But yeah, we have enhanced our visual capabilities and support, you know, visual snapshot testing for mobile and web with repdeiver natively. That includes also testing.

Storybook projects. And we have been also working on a visual report for that. So that webdavo spits out like an HTML report for all your visual tests. And we're working on DevTools application that essentially will allow you to approve and decline baselines, which is something that we're currently working on. We haven't released yet, but there are some exciting developments there. And yeah, for folks who haven't checked it out.

I have not implemented the visual features that has been done by Vim, one of our steering Vim Sellers, one of our steering committee members and he has done tremendous work. And I've seen when I saw testing, we tested the BBC storybook set, they had like 150 components and Webdevo were testing those all components in parallel and it was done within like 10 seconds. And it was really amazed me. It was a tremendous job done. And I love all these versatile features that repair provides now.

Oh man, that sounds killer. So does it use jest like how's it implemented?

We have a plugin, a service that you know, 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 snapshot testing with text and objects, but for visual essentially. And we're using our matcher, our assertion library, which is called Expect raptor vowel, which is also native. If you use the rep devo test runner and you get these matches for free, which makes testing very, very easy. So there's a lot of more information in our documentation around visual testing. Something that I haven't also mentioned is, which is part of this actually 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. Cool stuff that we have there.

All right, hold up, hold up. 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 something simple like that rather than have some weird integration with Auto it.

Unfortunately not, because we get the image. The image information 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, WebDavo, since it's based on the WebDava protocol, allows you to use Appium, for instance, to automate macOS applications or, you know, Windows application as well. So there are ways around it. But yeah, for the OCR part is mostly, you know, 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 with that.

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. And what's that all about?

We have been integrating Puppeteer for a long time, but version nine, we kind of like did some cleanups. But essentially what we want to allow users is webdriver Bylight will allow you to do things that work across all browsers. Where we, the standards team at the wtc, 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. And so there are a lot of features like performance testing, tracing. Those are mostly very browser native. And Chrome often leads in these areas, especially when it comes to performance tracing, things like that. And so all these features are behind the Chrome DevTools protocol. And puppeteer has been always the amazing tool if you want to interact with Chrome DevTools. So with REPW, you have a Get Puppeteer command that allows you to. Instead of using Web Developer 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 WebDriver and WebDriver Byday doesn't. Which is great if you want to do a little bit more on Chromium based browser only. And so we use Puppeteer for that. And recently also Puppeteer just released that it has completely switched to webdriver Bidder as well for most of its automation interfaces and has now support for Firefox and Chrome or Chrome browsers or Edge as well. So there's a lot of tools now switched to WebDriver BYDA and I believe we will see more adoption of the protocol as we in the future.

Very, very cool. All right, so we touched on the community driven aspect. So development of webdriver IO with the money. So someone heard that. How do they get involved? How can they start contributing to future releases? How does that work with your particular project?

Yeah, we basically look for anyone who is interested to contribute things to the project. It doesn't have to be code, it can be, you know, helping us, giving a hand on the website, front end development. 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. So 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 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 your work and interesting things to work on. Because that's important for me is that Web Developer has been always a tool that allowed me to learn new technologies and become better in certain programming aspects. And I think that's a great chance for everyone to do the same. And now with thanks to our sponsors, we can even pay them out.

So we'll have a link for the Discord Channel down below and maybe right here in the video. All right, so 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 WebDriver. I know AI is all the rage. I don't know there's any open source AI ML projects that could be integrated or is that something you're for or against? Anything like that?

Yeah, there's a lot of things we, you know, I, I look into when it comes to AI, but for web developer Particularly we want to improve just the, the experience using Web Develop. And you know, one of the leading features, why people, you know, may choose Playwright or Cypress or webdavo has been the UI mode or the like a certain application that helps to debug a certain test. And we want to definitely get better in 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 WebDrive IE 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 test at any given point in time to inspect the website. So there will be some cool features coming up and yeah, 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.

Love it. So are there any other features I may have missed? These are the ones I have written down, but I may have missed something.

Oh yeah. I mean, there are some notable breaking changes and things we have changed internally. Like we are now using PNPM within the project to, you know, set up the, you know, 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 DSBuild migration, you will also see performance improvement and stability improvements around the component test features of WebDevo. So we did a lot of like internal cleanups and changes to make sure that, you know, we can continue working on webdevo and don't bring on any legacy around.

All right. Okay, Christian, before we go, is there one piece of actual advice you can give to someone to help them with their WebDriver IO automation testing efforts and what's the best way to find or contact you?

Yeah, I think I will give the same advice as I do every year talking to you about the release. It's just if you're automation practitioner or someone who has to do desk browser automation or mobile automation, it's always recommended to get to know the tool that you're using well. And 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 helping webdavil as a common project, you know, would be a good thing to, you know, learn about better automation practices as well. You can find me you know, on Twitter, on LinkedIn, @broman, on GitHub, or join on the Dropdiver Discord channel. We are there almost every day to hang out and have fun working on the project that belongs to us all.

Thanks again for your automation awesomeness. The links to everything of value we covered in this episode hand over to test guild.com forward/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. 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. 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@testguild.com where you become part of our elite circle driving innovation in software testing and automation. And if you're a troop of 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 test guild.info to explore how we can create transformative experiences together. Let's push the boundaries of what we can achieve.

With loots and liars the bards began the song A tune of knowledge, a melody of code through the air it spread like wildfire through the land Guiding tester showing the secrets to behold.