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 😊
3 replies on “Checking web element styles using WebDriverJs”
and if you ever needed to do more layout testing, and visual validation of layouts, something like this may be useful, especially when responsive design is used: http://galenframework.com. There are other related tools as well like https://github.com/webdriverio/webdrivercss.
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!!
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!!