Behat / Mink 从 CSS 元素中获取价值

Question

我在网站上有一个可展开的 div。我想用 Behat/Mink 创建一个测试用例，以断言当用户到达页面时框不会展开。

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

之后，当用户点击“点击展开”时，style="height" 的值会发生变化：

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

这意味着它现在被扩展了。

我想知道是否有办法或者我是否可以实现一个步骤定义来检查/获取样式属性的值。谢谢。

Answer 1

您可以使用NodeElement::isVisible() 来检查元素的可见性。

$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...');
}

或者自己检查样式attribute：

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

Answer 2

谢谢你们，在你们的帮助下，我能够找到我需要的解决方案。这是我使用的方式：

  /**
 * @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);

                }

    }

步骤定义如下：

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"

结果：

 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;  

谢谢你们，祝你们有美好的一天！

Answer 3

我想你有来自$session = new \Behat\Mink\Session($driver); 的$session。

您可以使用NodeElement::getAttribute('style')。

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

如果它无法访问或对您不起作用，您可以随时使用

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

Answer 4

使用 JavaScript 时，isVisible 并不总是按预期工作。

检查样式属性和高度值的示例：

     /**
     * @When /^The expandable div is visible$/
     */
    public function expandableDivIsVisible() {
        $id= 'whatever_expandable_div_id';
        $element = $context->getSession()->getPage()->findById($elementId);

        // This is a good place for using a "spin" functionallity
       if (!$this->elementIsVisibleAndHeightIsHigherThanZero($element)) {
           throw new \Exception(sprintf('Element not visible: %s', $$id));
       }  
    }

   private function elementIsVisibleAndHeightIsHigherThanZero(?NodeElement $element) {

       if (null === $element) {
           return false;
       }

        $dictionary = static:buildDictionaryFromStyleString($element->getAttribute('style'));

        return $element->isVisible() && 
               array_key_exists('height', $dictionary) &&
               (int)$dictionary['height'] > 0
    }

    public static function buildDictionaryFromStyleString($style): array
    {
        $dictionary = [];

        if (empty($style)) {
            return $dictionary;
        }

        foreach (explode(';', rtrim($style, ';, ')) as $css) {
            $parts = explode(':', $css);
            $dictionary[trim($parts[0])] = trim($parts[1]);
        }

        return $dictionary;
    }