4

问题

有没有人成功测试过单击按钮时是否显示引导模式？

细节

我正在编写一个 Testacular 测试，检查单击按钮时是否显示 Bootstrap 模式。问题是即使我可以看到窗口弹出并且可见，调用也会css('display')返回。'none'

我想知道 Bootstrap Modal 是否发生了一些奇怪的事情，它复制了一个 html 块，然后用不同的 id 显示它。我当然希望不会！

代码

场景

describe('e2e', function() {

  beforeEach(function() {
    browser().navigateTo('/chessClub/');
  });


  it('should display editor when add member button clicked', function() {
    expect(element('title').text()).toBe("Chess Club");

      expect(element('#myModal').css('display')).toBe('none'); //as expected, it is none
              //click the button to show the modal
      element('#addMemberButton','Add Member Button').click();

              //this 2nd expect still return 'none'
      expect(element('#myModal').css('display')).toBe('block');

  });

});

测试输出

Chrome 25.0 e2e should display editor when add member button clicked FAILED
    expect element '#myModal' get css 'display' toBe "block"
    /Users/jgordon/learning/chessClub/web-app/test/e2e/scenarios.js:17:4: expected "block" but was "none"

html

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">{{editorLabel}}</h3>
    </div>
    <div class="modal-body">
        <form>
            <label>
                Name
            </label>
                <input type="text" ng-model="editedMember.name" placeholder="John Doe">
            <label>
                Grade
            </label>
                <input type="text" ng-model="editedMember.grade">
            <label>
                Ladder Position
            </label>
                <input type="text" ng-model="editedMember.ladderPosition">
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" ng-click="saveMember()">Save changes</button>
    </div>
</div>
4

3 回答 3

7

一种方法，虽然有点 hacky 是使用:visible选择器并计算有多少匹配项

expect(element('#someElement:visible').count()).toBe(1);

来源

于 2013-03-06T07:27:36.693 回答
2

我最终只需要打电话sleep(1)进行测试。我猜显示模态的代码不如测试检查样式的速度快。

于 2013-01-28T15:50:18.700 回答
1

我设法执行以下操作来检查元素是否隐藏：

expect(element("#id_element").css("display")).toBe("none");

并检查此元素是否可见：

expect(element("#id_element").css("display")).not().toBe("none");

我相信这不是最好的方法。但这很简单，它对我有用。

干杯!

于 2013-05-16T12:49:34.840 回答