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');