One of the few things that we might have to do during writing automated tests is to validate or verify certain CSS properties, like the
background-color, or the
For e.g. one of the clients that I’ve worked with, wanted to have a specific custom font used in all their web based products. So one of our automated tests included this test scenarios where we would check the font-family and font-size also for a specific
div element in the page.
You may also find the scenarios where you need to find and validate the css properties. In Selenium, we have a very nice method called
getCssValue() which can be used to get computed
How can we do it in Playwright. Let’s see couple of approaches.
1. Directly asserting using the pre-built method in Playwright
So Playwright has a in-built method called
toHaveCSS() which you can directly call upon a locator to validate the css property. You can use it as
const locatr = page.locator('#myid') await expect(locator).toHaveCSS('display', 'flex'); await expect(locatr).toHaveCSS('font-size','14px');
Let’s see a small example for this. Let’s head over to our favorite test playground – the practice page by
SelectorsHub. Let’s validate the
background-color css property of the drop down button with the text
Checkout here. In the Chrome console, the computer value for this property is
rgb(76, 175, 80)
Let’s use the
toHaveCSS method to validate this. Let’s see if the value of the
rgb if converted to HEX, will match or not. To convert the
rgb(76, 175, 80) to HEX, let’s use this link
The value that we get is
Let’s use this in our code
If you run using this, then the test will fail , because the method expects the
rgb computed value that is present in the console. Now try with this
This will fail again also. Why? Because there is an extra space after the
comma (,) in the computed values- see carefully.
Now try this
This test will pass. So we can see that we can give the correct value in the expected values for the css property and then it will validate it. But not often do we get the expected value – if you have a design documentation url like
InVision then you can surely fetch the values and store it as expected values, but if not then how. Let’s see the second approach.
2. Use JS to get the computed Style and then match with expected value.
In JS, there is a method called
window.getComputedStyle to fetch the computed styles for an element. So using this we can fetch the property value and then compare with the expected value. So we know that the computed value is
rgb(76, 175, 80). Let’s see if we can fetch and compare.
The console printed the color as expected, and we didn’t get any error
Now let’s add a new test for
Let’s see the printed value from console
which is what we were expecting.
So in this way, you can use the power of JS methods to fetch the value of a computed property and then match it with using