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:
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
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 😊