What's up with WebdriverCSS?

I found out about WebdriverIO through WebdriverCSS. Seems strange, since WebdriverIO is so powerful on its own, but yeah, WebdriverCSS introduced me to the awesomeness that is WebdriverIO.

Visual Regression Testing has always been an interest of mine. I talked about it at CSSDevConf in 2013, when I demoed the functionality of Wraith. I worked with Micah Godbolt to write an e-book about it this Spring that you can get for free via learn.visualregressiontesting.com.

So to say I'm invested in the topic is a bit of an understatement. I think the idea is super powerful, so I want to see it succeed.

I've been a little worried about WebdriverCSS lately. It relies on WebdriverIO, and since that tool has been iterating so well lately, it's kind of left WebdriverCSS in the dust. WebdriverIO is on version 4.x, while WebdriverCSS only officially supports version 2.x.

What are fans of WebdriverCSS to do? Well, there are a few options:

Use the "official" version

Truthfully, I can't recommend this option. Not because it doesn't work, but because there are better solutions out there for just a little bit of effort.

Anyway, this is how you install it:

npm install webdriverio@2 webdrivercss

Beta RC1

Unofficially, WebdriverCSS has supported WebdriverIO 3.x for quite a while now. This is probably your "safest" route for now, although you will end up missing out on some of the fantastic features of WebdriverIO 4.x.

Here are the installation instructions:

npm install webdriverio@3.4.0 webdrivercss@2.0.0beta-rc1

Beta RC1, version 2

Update: See this post for a more reliable method

Here's the option I'm really excited about. You get to have your cake and eat it to. Using a very specific branch of WebdriverCSS, you can run it with WebdriverIO 4.x, which again has some fairly awesome features in it.

Installation is as follows:

npm install webdriverio DenisKudelin/webdrivercss#beta-rc1

There is a PR out to get this functionality merged in to the main beta-rc1 branch, so keep an eye on that to see where this goes.

Summary

All of these options use the same basic format when calling WebdriverCSS:

browser.webdrivercss("Capture Name", {
	elem: ".element-selector",
	name: "element-name"
});

There's no difference between the different version.

Truthfully, WebdriverCSS is a little bit of a mess right now. It really needs an official update to catch up to WebdriverIO 4.x and be a little more stable than present. That said, don't feel held back by what's official or not. The folks at WebdriverIO are working their butts off to provide a great Selenium automation tool to us for free, so a little bit of compromise is necessary.

And really, all of this is okay, because Visual Regression Testing has been a little bit of mess since its inception. It's a tricky problem to solve, and a single tool isn't going to be able to fix it all.

Hopefully you're still able to move forward with it though. I feel like Visual Regression Testing is one of those practices that can drastically improve your dev life, and I'd hate for a little bit of version churn to take away from that.

P.S. Want to learn more about WebdriverIO? Early access is now open for my course, including a 50% discount off the regular price. Check out more info here.