TESTEROPS

A pragmatic approach to QA and OPS

Playwright and CSS Validation

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 font-family.

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 css values.

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 #4CAF50

Let’s use this in our code

await expect(btn).toHaveCSS('background-color','#4CAF50')

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

await expect(btn).toHaveCSS('background-color','rgb(76,175,80)');

This will fail again also. Why? Because there is an extra space after the comma (,) in the computed values- see carefully.

Now try this

import { chromium, expect, test } from "@playwright/test";
test.use({ viewport: { width: 1400, height: 1000 } });
test("Launch the Selectors hub test page", async () => {
const browser = await chromium.launch({
headless: false,
});
const context = await browser.newContext();
const page = await context.newPage();
await page.goto("https://selectorshub.com/xpath-practice-page/");
await page.waitForSelector(".dropbtn", {
state: "visible",
});
// we want to mask this locator
const btn = await page.locator(".dropbtn");
//await expect(btn).toHaveCSS('background-color','#4CAF50'); // it will fail
//await expect(btn).toHaveCSS('background-color','rgb(76,175,80)'); // it will also fail due to spaces
await expect(btn).toHaveCSS('background-color','rgb(76, 175, 80)');
await page.waitForTimeout(2000);
await page.close();
});
view raw css1.js hosted with ❤ by GitHub

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 Figma or 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.

import { chromium, expect, test } from "@playwright/test";
test.use({ viewport: { width: 1400, height: 1000 } });
test("Launch the Selectors hub test page", async () => {
const browser = await chromium.launch({
headless: false,
});
const context = await browser.newContext();
const page = await context.newPage();
await page.goto("https://selectorshub.com/xpath-practice-page/");
await page.waitForSelector(".dropbtn", {
state: "visible",
});
const btn = await page.locator(".dropbtn");
await page.waitForTimeout(2000);
const color = await btn.evaluate((element) =>
window.getComputedStyle(element).getPropertyValue("background-color")
);
await console.log(`${color}`);
await expect(btn).toHaveCSS('background-color',color);
});
view raw css2.js hosted with ❤ by GitHub

The console printed the color as expected, and we didn’t get any error

Now let’s add a new test for font-size property.

import { chromium, expect, test } from "@playwright/test";
test.use({ viewport: { width: 1400, height: 1000 } });
test("Launch the Selectors hub test page", async () => {
const browser = await chromium.launch({
headless: false,
});
const context = await browser.newContext();
const page = await context.newPage();
await page.goto("https://selectorshub.com/xpath-practice-page/");
await page.waitForSelector(".dropbtn", {
state: "visible",
});
// validate background-color
const btn = await page.locator(".dropbtn");
await page.waitForTimeout(2000);
const color = await btn.evaluate((element) =>
window.getComputedStyle(element).getPropertyValue("background-color")
);
await console.log(`${color}`);
await expect(btn).toHaveCSS('background-color',color);
// validate font-size
const text = await page.locator("a[href='https://www.youtube.com/c/SelectorsHub?sub_confirmation=1'%5D >> nth=0");
const textprop = await text.evaluate((element) =>
window.getComputedStyle(element).getPropertyValue("font-size")
);
await console.log(`${textprop}`);
await expect(text).toHaveCSS('font-size',textprop);
});
view raw css3.js hosted with ❤ by GitHub

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 toHaveCSS() method.