使用量角器遍历 CSS 悬停导航

Question

在 CSS 导航中，:hover 会展开子级别，而点击不会。单击顶级项目会导致视图更改。如何用量角器遍历这样的导航？

（这有点伪代码）

例如

it 'should do things', ->
  Page.login(browser, '/#/area')
  .then ->
    # Here I need to expand the navigation in order to
    # make the sub-menu visible. Hover 1500ms.
    UI.menu.hover('1500')
  .then ->
    expect(UI.menu.submenu.visible()).to.be.true
    UI.menu.submenu.item.click()
  .then ->
    expect(something()).to.be.true

这可以用量角器实现吗？

我已经阅读了一些关于 action() here 的内容，但我无法真正得出结论。

AngularJS 1.2.16
量角器 0.22.0
CoffeeScript

Answer 1

WebDriver 的动作是要走的路。将鼠标移动到正确的元素后，您可以在那里等待 Xms，这意味着您正在悬停一个元素。

CoffeeScript:

hoverEl = (el, duration) ->
  browser.driver.actions().
    mouseMove(el).
    perform()
  .then ->
    browser.driver.wait ->
      setTimeout(->
        return true
      , duration)

或者普通js：

var hoverEl;

hoverEl = function(el, duration) {
  return browser.driver.actions().mouseMove(el).perform().then(function() {
    return browser.driver.wait(function() {
      return setTimeout(function() {
        return true;
      }, duration);
    });
  });
};

< Protractors docs on actions >

使用量角器遍历 CSS 悬停导航

Traverse CSS hover navigation with protractor

coffeescript

angularjs

protractor