Question

我仍然处于学习模式，其中大部分都是这样。

我已经安装了MeanJS，并且正在使用开箱即用的导航。我开始使用Protractor和Jasmine实施端到端测试。

我希望我的量角器测试与导航组件交互。在整页中它很宽。在移动尺寸，它是一个汉堡包。关于编写/思考测试方法的好方法的任何一般信息将非常感激。

以下是我现在坚持的一些项目：

模拟菜单项选择

我想模拟用户使用Protractor单击菜单项。用于全屏宽度演示的HTML ...

WAVE_FORMAT_IEEE_FLOAT

我认为我需要做的是模拟“管理”链接的点击以显示子菜单（注意上面的第一条评论）。然后模拟“管理用户”链接的点击以触发导航

我的具体问题：

我的模拟导航链接点击策略是否正确？
我应该使用什么魔法元素（通过。？）语句来查找“管理员”链接
假设我有“管理员”链接，找到“管理用户”链接以模拟该点击的最佳方法是什么？

我应该如何处理折叠/汉堡模式

导航范例在移动布局中会发生变化。我还没有研究过布局，但是相同链接需要不同的点击次数。

这里的最佳做法是什么？我可以用什么资源建议来帮助发现该做什么？

我还应该注意......

我确实希望找到菜单中的子项链接...而不是只查找包含该URL的任何链接。

菜单项比显示的更多......我只是简化了html示例。

Answer 1

在那里再回来......（自我回答）

我对量角器，JS等的了解远远超过我开始时的情况。我认为这是一个相当不错的解决方案。这将节省大量时间。希望它有所帮助...

首先，使用Page Object pattern。

接下来，创建一个单击导航栏链接的功能，包括单击以展开/显示子项。它需要根据MEANJS导航的响应特性（例如汉堡包或不包括汉堡包）智能地工作：

commonPOs.clickNavBar = function(mainTab, linkUrl) {
  var deferred = protractor.promise.defer();

  var hamburger = element(by.id('nav-hamburger'));

  hamburger.isDisplayed().then(function(result) {
    if ( result ) {
      hamburger.click().then(function() {
        var navBar = hamburger
          .element(by.xpath('../..'))
          .element(by.id('myapp-navbar'));
          return clickItNow(mainTab, linkUrl, navBar, deferred);
      });
    } else {
      return clickItNow(mainTab, linkUrl, element(by.id('myapp-navbar')), deferred);
    }
  });

  return deferred.promise;
};

function clickItNow(mainTab, linkUrl, navBar, deferred) {
  var targetLink;
  var linkCssExpression = 'a[href*="' + linkUrl + '"]';

  expect(navBar.waitReady()).toBeTruthy();

  if(mainTab) {
    // if mainTab was  passed, neet to
    // click the parent first to expose the link
    var parentTabLink;

    if (mainTab == 'ACCTADMIN') {
      parentTabLink = navBar.element(by.id('account-admin-menu'));
    }
    else {
      parentTabLink = navBar.element(by.id('main-menu-' + mainTab.split(' ').join('')));
    }
    // expect(parentTabLink.isDisplayed()).toBeTruthy();
    expect(parentTabLink.waitReady()).toBeTruthy();
    parentTabLink.click();
    targetLink = parentTabLink.element(by.xpath('..')).element(by.css(linkCssExpression));
  }
  else {
    targetLink = navBar.element(by.css(linkCssExpression));
  }

  expect(targetLink.waitReady()).toBeTruthy();
  targetLink.click().then(function() {
    return deferred.fulfill();
  });
}

我在上面的代码中引用了waitReady（）函数。你可以找到here。

上面的导航功能需要对量角器进行一些html标记更改才能更轻松地找到导航元素：

/public/modules/core/views/header.client.view.html 使用ID标记这些元素：

'NAV-汉堡包'
'MyApp的-导航栏'
'主菜单 - {{item.title.split（''）。join（''）}}'＆lt;＆lt;＆lt;让空格存在于标题
'帐户管理员菜单'

/public/modules/core/views/header.client.view.html

<div class="container" data-ng-controller="HeaderController">
    <div class="navbar-header">
        <button id="nav-hamburger" class="navbar-toggle" type="button" data-ng-click="toggleCollapsibleMenu()">  . . . .
        </button>
    </div>
    <nav id="myapp-navbar" class="collapse navbar-collapse" collapse="!isCollapsed" role="navigation">
        <ul class="nav navbar-nav" data-ng-if="menu.shouldRender(authentication.user);">
            <li data-ng-repeat="item in menu.items | orderBy: 'position'" data-ng-if="item.shouldRender(authentication.user);" ng-switch="item.menuItemType" ui-route="{{item.uiRoute}}" class="{{item.menuItemClass}}" ng-class="{active: ($uiRoute)}" dropdown="item.menuItemType === 'dropdown'">
                <a id="main-menu-{{item.title.split(' ').join('')}}" ng-switch-when="dropdown" class="dropdown-toggle" dropdown-toggle>

        <ul class="nav navbar-nav navbar-right" data-ng-show="authentication.user">
            <li class="dropdown" dropdown>
                <a id="account-admin-menu" href="#" class="dropdown-toggle" data-toggle="dropdown" dropdown-toggle>

我已使用通用页面对象命令将导航包装到特定元素：

commonPOs.navToSigninPage = function() {
  var deferred = protractor.promise.defer();

  this.clickNavBar(null, 'signin').then(function() {
    expect(something).toBeTruthy();
    deferred.fulfill(new SigninPage());
  });

  return deferred.promise;
};

最后，请在您的规范中使用它：

commonPOs.navToSigninPage().then(function(signInPage){
  signInPage.loginWithCredentials(username, password);
});

量角器e2e使用MEANJS导航进行测试

1 个答案: