Behat / Mink Getting value from a CSS Element

Question

I have a expandable div on a website. I want to create a test case with Behat/Mink to assert that when the user reaches the page the box is not expanded.

<a class="expand" data-reactid=".r[37uxa].[1]" href="#">Click to expand</a>
<div class="expandable" data-reactid=".r[37uxa].[2]" style="height: 0px;">

Afterwards when the users clicks the "Click to expand" the value of the style="height" changes:

<a class="expand" data-reactid=".r[37uxa].[1]" href="#">Click to expand</a>
<div class="expandable" data-reactid=".r[37uxa].[2]" style="height: 157px;">

which means it is now expanded.

I was wondering if there is a way or if i could implement a step definition to check/get the value for the style attribute. Thank you.

Answer 1

You can use NodeElement::isVisible() to check the visibility of an element.

$session = $this->getSession(); // assume extends RawMinkContext
$page = $session->getPage();

$expandable = $page->find('css', '.expandable');

if (null === $expandable) {
    throw new \LogicException('Could not find the element');
}

if ($expandable->isVisible()) {
    throw new \LogicException('Element is visible...');
}

Alternatively inspect the style attribute yourself:

$style = $expandable->getAttribute('style');

Answer 2

Thank you both , I was able to work a solution to what I needed with your help. Here is the way I have used:

  /**
 * @Then /^The "([^"]*)" element should not be expanded$/
 */

public function theElementShouldNotBeExpanded($element)
{
    $session = $this->getSession(); 
    $page = $session->getPage();

    $expandable = $page->find('css', '.expandable');
    $style = $expandable->getAttribute('style');

    if ($style === "height: 0px;") {
        $message1 = sprintf('Is not expanded having the attribute: '.$style);
        echo $message1; 
    } else {
             $message2 = sprintf('The element is expanded having the attribute: '.$style);
             throw new Exception($message2);

            }

}

 /**
     * @Then /^The "([^"]*)" element shold be expanded$/
     */
    public function theElementSholdBeExpanded($element)
    {
        $session = $this->getSession(); 
        $page = $session->getPage();
        $expandable = $page->find('css', '.expandable');
        $style = $expandable->getAttribute('style');

        if ($style === "height: 105px;") {
            $message1 = sprintf('Is expanded having the attribute: '.$style);
            echo $message1; 
        } else {
                 $message2 = sprintf('The element is not expanded having the attribute: '.$style);
                 throw new Exception($message2);

                }

    }

The step definitions are as follows:

Given I am on "/"
        Then  I should see an ".promotion" element
        Then  The ".expandable" element should not be expanded
        And   I follow "Click to expand"
        Then  The ".expandable" element shold be expanded
        And   I follow "Click to hide"

And the result:

 Given I am on "/"         
 Then I should see an ".promotion" element     
 Then The ".expandable" element should not be expanded
 --Is not expanded having the attribute: height: 0px; 
 And I follow "Click to expand"
 Then The ".expandable" element shold be expanded
  --Is expanded having the attribute: height: 105px;  

Thank you both , have a nice day!

Answer 3

I suppose you have $session from $session = new \Behat\Mink\Session($driver);.

You can use NodeElement::getAttribute('style').

$page = $session->getPage();
$el = $page->find('css', '.something');
echo $el->getAttribute('style');

If it isn't accessible or it doesn't work for you, you can always do

echo $session->evaluateScript(
    "(function(){ return document.getElementById('...').style.height; })()"
);