如何告诉 Behat / Mink 将鼠标悬停在网页上的元素上？答案

【问题标题】：How do I tell Behat / Mink to hover over an element on a webpage?如何告诉 Behat / Mink 将鼠标悬停在网页上的元素上？
【发布时间】：2019-11-07 18:01:19
【问题描述】：

我是 Behat 的新手。我目前正在使用 Mink Extension 和 Selenium2 驱动程序，我想知道如何指定测试应该将鼠标悬停在元素上作为场景的一部分。

例如，这是我的场景：

Scenario: Testing that the Contact Us submenu appears
    Given I am on "/"
    When I hover over "About"
    Then I should see "Contact Us"

【问题讨论】：

标签： bdd behat mink

【解决方案1】：

我根据这个答案 https://stackoverflow.com/a/17217598 想通了，只是将 click() 替换为 mouseOver()。

这是我的 FeatureContext 代码：

/**
 * @When /^I hover over the element "([^"]*)"$/
 */
public function iHoverOverTheElement($locator)
{
        $session = $this->getSession(); // get the mink session
        $element = $session->getPage()->find('css', $locator); // runs the actual query and returns the element

        // errors must not pass silently
        if (null === $element) {
            throw new \InvalidArgumentException(sprintf('Could not evaluate CSS selector: "%s"', $locator));
        }

        // ok, let's hover it
        $element->mouseOver();
}

我在使用时必须通过css选择器，所以用法如下：

...
When I hover over the element ".about"
...

【讨论】：

【解决方案2】：

交替悬停

/**
 * @Then /^I hover over "([^"]*)"$/
 */
public function iHoverOver($arg1)
{
    $page = $this->getSession()->getPage();
    $findName = $page->find("css", $arg1);
    if (!$findName) {
        throw new Exception($arg1 . " could not be found");
    } else {
        $findName->mouseOver();
    }
}

【讨论】：

【解决方案3】：

/**
 * works better with css, uses different method for css than xpath
 * @Then /^I mouse over "(?P<selector>[^"]*)"$/
 */



 public function iMouseOver($selector){
        $element = $this->find($selector);
        if($element == null){
            throw new Exception('Element '.$selector.' NOT found');
        }
        $this->iFocusOn($selector);
        if (strstr($selector, '//')) {
            $element->mouseOver();
        } else {
            $this->mouseOver($selector, '1');
        }
    }

【讨论】：

我似乎找不到任何关于您在那里使用的 iFocusOn() 方法的文档。

【解决方案4】：

我很欣赏这个问题已有 4 年历史，并且得到了公认的答案，但您的示例使用短语来识别要悬停在哪个元素上，而不是 CSS 选择器。我认为这是一件好事，因为我希望我的 Behat 脚本能够被客户和项目团队的非技术成员阅读。

如果我可以提供一个替代答案：

脚本：

...
When I hover over the "About" link
...

FeatureContext 中的步骤定义：

    /**
     * @Then I hover over the :phrase link
     */
    public function iHoverOverLink($phrase)
    {
        $session = $this->getSession();

        // Get all link elements on the page
        $links = $session->getPage()->findAll('css', 'a');

        foreach($links as $link) {
            if ($link->getText() == $phrase) {
                // ok, let's hover it
                return $link->mouseOver();
            }
        }

        throw new \InvalidArgumentException(sprintf('Could not find anchor element matching "%s"', $phrase));
    }

我的示例将可定位项目缩小为仅锚元素以提高速度和效率，但如果您的导航菜单中有不可点击的项目并且您想将鼠标悬停在上面，那么您可以轻松地从末尾删除“链接”一词步骤模板并更改 CSS 选择器以匹配所有文本元素 p, span, li, a。

【讨论】：