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.

3 thoughts 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!!

    Like

  2. 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

Comments are closed.