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

Question

我是 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"

Answer 1

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

这是我的 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"
...

Answer 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();
    }
}

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

Answer 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。