Behat Gets the value of a CSS property of an Element

In Selenium we have getCSSValue() method to get the value of CSS property but we don't have in-build function like getCSSValue() in Behat Mink. We need to write our custom one.

In below screenshot you can see the highlighted button element has different css property like background, display, position, top etc., you can observe the same on right side of the screenshot:

This is our custom method to get the css property value:

public function getCSSValue($cssSelector, $propertyName)
{
    $function = <<<JS
    (
        function()
        {
            var ele = document.querySelector("$cssSelector"); 
            var myvalue = document.defaultView.getComputedStyle(ele, null).getPropertyValue("$propertyName");
            return myvalue;
        })() 
JS;
    
    return $this->getSession()->evaluateScript($function);
}

Above method will accept 2 parameters:

• $cssSelector: css selector of the element
• $propertyName: Property name you want to fetch e.g background, width etc.

In above method

• querySelector() will get the first element in the document that matches the specified css selector. Here we are using our first parameter.
• document.defaultView returns the window object associated with a document, or null if none is available.
• The getComputedStyle() method returns an object containing the values of all CSS properties of an element. Here we need to specify element for which to get the computed style and pseudo element to match, which is optional. In our case element is ele and pseudo element is not needed.
• The getPropertyValue() method is used to return the value of the CSS property which we are storing in myvalue variable
• Then outside the Javascript function we are calling evaluateScript() function which execute JS in browser and return its response. Here we are passing our 2nd parameter.

And this is how we are calling it for different property and printing its value

public function iReadTagNameAndAttributes()
{
    $selector = "button[name='submit_search']";

    echo "background is:" . $this->getCSSValue($selector,'background');
    echo "\ndisplay is:" . $this->getCSSValue($selector,'display');
    echo "\nposition is:" . $this->getCSSValue($selector,'position');
    echo "\ntop is:" . $this->getCSSValue($selector,'top');
    echo "\nright is:" . $this->getCSSValue($selector,'right');
    echo "\nborder is:" . $this->getCSSValue($selector,'border');
    echo "\ncolor is:" . $this->getCSSValue($selector,'color');
    echo "\nwidth is:" . $this->getCSSValue($selector,'width');
    echo "\ntext-align is:" . $this->getCSSValue($selector,'text-align');
    echo "\npadding is:" . $this->getCSSValue($selector,'padding');
}

You can observer the arrow |> for border and padding in below screenshot, that means border has several child property like border-top-style and same with padding it has padding-top, padding-bottom etc.

You can also fetch the same by specifying it's property name.

public function iReadTagNameAndAttributes()
{
    $selector = "button[name='submit_search']";

    echo "\nborder top style:" . $this->getCSSValue($selector,'border-top-style');
    echo "\npadding bottom:" . $this->getCSSValue($selector,'padding-bottom');
}