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 😊

Author: Alister Scott

Alister is an Excellence Wrangler for Automattic.

1 thought on “Checking web element styles using WebDriverJs”

  1. Hi Alister. I am a manual QA guy at a startup, I was asked to “look into” automated acceptance tests with WebdriverJS. After reading through your blog and looking at your demo repositories and the WordPress repository, I was able to build an automation suite using page objects with my Codecademy level javascript. I’ve been getting huge props from engineering at my job – THANK YOU!!

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s