Checking web element styles using WebDriverJs

I try to avoid incorporating any or layout/style based checks or locators into my automated end to end tests since these typically change more often leading to a higher test maintenance burden.

But I did have a circumstance recently where I wanted to check that a change I dynamically made to a page was reflected in the resultant web element’s style.

I wrote some WordPress custom CSS which I applied to a test site:

.site-content {
	background-color: purple;
}

This CSS simply makes the background colour of the site-content element purple.

So when I visit the page that this should be applied to how do I use WebDriverJs to assert the .site-content element has purple as its background colour?

It’s actually pretty easy in WebDriverJS as each web element has a getCssValue method which returns the computed styles for a web element, so I can add a function to my ViewSitePage object:

siteContentBackgroundColour() {
  return this.driver.findElement( by.css( '.site-content' ) ).getCssValue( 'background-color' );
}

And I can assert this is actually purple in my end to end test. Simple 😊