Automated Bulk CSS Verification with Playwright: A Step-by-Step Guide

Making sure that your online apps keep a consistent and appealing visual style is essential in today’s fast-paced web development environment. Multiple web pages’ CSS properties can be time-consuming and prone to mistakes when manually verified. Playwright and other automated testing tools can help with this situation. This tutorial will demonstrate how to extract data from a JSON file and utilize Playwright to automatically validate CSS settings on web pages.

Let’s quickly go over the script’s components and purpose before we get into the code:

A well-known end-to-end testing framework for web applications is called Playwright. For automating interactions with online pages in browsers like Chromium, Firefox, and WebKit, it offers a high-level API.

JSON Data: To check on specific aspects of those web sites, we have a JSON file containing URLs and CSS properties. Without changing the code, this data file enables us to quickly expand our tests for various pages and elements.

We’ll break down the code into blocks and explain each one.

import { chromium, expect, test } from "@playwright/test";
import * as fs from "fs/promises";

We import the required Playwright dependencies as well as the Node.js fs/promises module for file handling in this block. We’ll be using chrome, expect will be used for assertions, and test will be used to specify test cases.

async function verifyCSSValues(page, locator, cssValues) {
  // ...
}

This function is responsible for verifying CSS values on a given page for a specific element identified by a CSS selector. It accepts three parameters:

• page: The Playwright page object.
• locator: The CSS selector for the element.
• cssValues: An object containing CSS properties and their expected values.

test("Verify CSS values from JSON file", async ({}, testInfo) => {
  // ...
});

This is the main test case definition. It uses Playwright’s test function to define a test case named "Verify CSS values from JSON file." Inside this test case, we'll read data from a JSON file and loop through URLs and elements to verify CSS properties.

const browser = await chromium.launch({ headless: false });

Here, we launch a Chromium browser instance. The headless: false option means that the browser will be visible for debugging purposes.

const path = require("path");
const jsonFile = path.join(__dirname, "../data/urlsAndCSSWithLocators.json");
const fileContents = await fs.readFile(jsonFile, "utf-8");
const urlsAndCSS = JSON.parse(fileContents);
const urlsData = urlsAndCSS.urls;

In this block, we locate and read the JSON data file, parse its contents, and extract the URLs and CSS properties to verify.

for (const urlData of urlsData) {
  const url = urlData.url;
  const elements = urlData.elements;
  // ...
}

We loop through the URLs and their associated elements defined in the JSON data.

const context = await browser.newContext();
const page = await context.newPage();
await page.goto(url);

For each URL, we create a new browser context and page, navigate to the URL, and handle the cookie banner if it’s present.

for (const elementData of elements) {
  const locator = elementData.locator;
  const cssProperties = elementData.cssProperties;
  await verifyCSSValues(page, locator, cssProperties);
}

Within each page, we iterate over the elements and their CSS properties, calling the verifyCSSValues function to perform the CSS verification.

await context.close();

Finally, we close the browser context after verifying CSS values on all elements of the current page.

} finally {
  await browser.close();
}

In a finally block, we ensure that the browser instance is closed, regardless of whether the tests pass or fail.

{
  "urls": [
    {
      "url": "https://example.com/en",
      "elements": [
        {
          "locator": "#container-a08132e96b > div:nth-child(1)",
          "cssProperties": {
            "background-color": "#fff",
            "font-size": "16px",
            "border-right-width": "0.8px"
          }
        },
        {
          "locator": ".example-button--wrapper",
          "cssProperties": {
            "font-family": "Roboto, arial, sans-serif",
            "font-size": "16px"
          }
        }
      ]
    },
    {
      "url": "https://example.com/products",
      "elements": [
        {
          "locator": "div.teaser:nth-child(1)",
          "cssProperties": {
            "font-size": "16px",
            "line-height": "24px"
          }
        },
        {
          "locator": ".cmp-title__text",
          "cssProperties": {
            "font-size": "32px",
            "line-height": "48px"
          }
        }
      ]
    }
  ]
}

The JSON data structure:

• The JSON data is an object that contains a single key called “urls,” which maps to an array of URL objects. Each URL object represents a web page to be tested, along with the elements on that page and the CSS properties to verify.
• Inside the “urls” array, there are two URL objects (many can be added as per requirements), each representing a different web page:

1. URL 1 — “https://example.com/en":

• The “url” property specifies the URL of the web page to be tested, in this case, “https://example.com/en."
• The “elements” property is an array of elements to be verified on this page.
• Within the “elements” array, there are two element objects:
• Element 1:
• “locator” specifies the CSS selector for the first element to be verified, identified by #container-a08132e96b > div:nth-child(1).
• “cssProperties” is an object that lists the CSS properties and their expected values for this element.
• Element 2:
• “locator” specifies the CSS selector for the second element, identified by .example-button--wrapper.
• “cssProperties” lists the CSS properties and their expected values for this element.

1. URL 2 — “https://example.com/products":

• Similar to URL 1, this object defines the URL of the second web page to be tested.
• The “elements” array contains two element objects, each with its own CSS selector and CSS properties to be verified.

The purpose of this JSON data structure is to provide a structured and flexible way to define the web pages to be tested, the specific elements on those pages, and the CSS properties needed to be verified. This allows testers to easily extend their testing suite by adding more URLs and elements without modifying the code, making their testing process more maintainable and scalable.

Connect with me on LinkedIn: https://www.linkedin.com/in/minhazbillah