量角器测试未点击我的 button/element

Question

我的场景是这样的： 1.打开登录页面 2.输入用户名， 3.输入密码， 4.点击登录， 5. 角色 selection 模式打开，其中包含可能的用户角色列表 6. 点击第一个角色。

我的测试是这样的：

'use strict';

describe('Login page', function () {

  beforeEach(function () {
    browser.get('/#/login');
  });

  it('should login', function () {

    var _user = element(by.model('loginForm.exchange.user'));
    var _pass = element(by.model('loginForm.exchange.password'));
    var loginButton = element(by.xpath('/html/body/snap-content/ui-view/div/section/content/div/div/div[2]/div/form/button'));

    _user.sendKeys('myUsername');
    _pass.sendKeys('myPassword');

    loginButton.click();

    var _roleModal = by.className('modal-dialog');
    browser.driver.wait(function () {
      return browser.driver.isElementPresent(_roleModal);
    }, 5000)
      .then(function () {
        browser.driver.sleep(3000);
        console.log('modal now opened.');

        var _elementInModal = by.css('[ng-click="cancel()"]');

        browser.driver.wait(function () {
          return browser.driver.isElementPresent(_elementInModal);
        }, 1000)
          .then(function () {
            browser.driver.sleep(2000);

            console.log('element present.');

            // issue here being, I can't access the roles listed in modal, even though I've created a check if the button with cancel() exists in modal itself.
            // using by.xpath('/html/body/div[5]/div/div/form/div/div/div/div/ul/li[1]') to fetch 1st role doesn't work either.

            element.all(by.repeater('role in userRoles')).then(function (role) {
              console.log('HUEY! ROLE!', role);
              var titleElement = role[0].element(by.css('media-body'));
              console.log(titleElement);
            });
          });
      });

  }, 30000);
});

在谈论模态时请记住，这是 bootstrap 模态 (https://angular-ui.github.io/bootstrap/)。

模态模板：

  <div ng-switch-when="userRoles">
    <div class="card">
        <ul class="table-view" >
          <li ng-repeat="role in userRoles" class="table-view-cell" ng-click="save(role)">
              <a class="navigate-right">
                <div class="media-body">
                  {{role.LTEXT}}
                </div>
             </a>
          </li>
      </ul>
    </div>
  </div>

这几天让我发疯。我似乎无法从现有模式中 select 角色。即使使用节点调试工具从 VSCode 进行调试，无论我选择哪个 by*，我都无法打印出任何内容。

Answer 1

您没有在 titleElement 上调用任何操作，因此 Protractor 不会执行实际查找。来自 ElementFinder documentation:

An ElementFinder does not actually attempt to find the element until an action is called, which means they can be set up in helper files before the page is available.

您的规范超时，因为它没有任何 return 操作（例如 expect() 方法）并且您的 console.log() 语句没有任何内容可以打印出来。您可以这样做：

expect(titleElement.getText()).toBe('INSERT_EXPECTED_TEXT');

Answer 2

我不知道为什么会这样，但 10 个小时后我终于找到了原因。

browser.ignoreSynchronization = true;

这意味着，我不会像量角器常见问题解答中所说的那样等待任何 "angular" 事情：

If you need to navigate to a page which does not use Angular, you can turn off waiting for Angular by setting browser.ignoreSynchronization = true

由于我的整个项目都使用Angular，我仍然无法理解为什么会这样，为什么这会帮助我解决问题？

是不是因为我试图从模态中获取数据，它是由 bootstrap 创建模态方法创建并在控制器中调用的？也许吧，但是那里没有信息或类似的问题。

因此，如果您自己在使用模态检测元素时遇到问题，那么 ignoreSynchronization 可能是您应该尝试的第一件事。

量角器测试未点击我的 button/element

Protractor test not clicking my button/element

javascript

angularjs

angularjs-e2e

protractor