量角器测试没有点击我的按钮/元素

Question

我的场景如下所示： 1.打开登录页面 2.输入用户名， 3.输入密码， 4.点击登录， 5. 角色选择模式打开，列出可能的用户角色 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);
});

在谈论模态时请记住，这是引导模态 (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>

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

Answer 1

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

browser.ignoreSynchronization = true;

这意味着，我不会像量角器常见问题解答所述那样等待任何“角度”的事情：

如果您需要导航到不使用 Angular 的页面，您可以 通过设置 browser.ignoreSynchronization 关闭等待 Angular = 真

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

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

因此，如果您在使用模态检测元素时遇到问题，忽略同步可能是您应该尝试的第一件事。

Answer 2

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

在调用操作之前，ElementFinder 不会真正尝试查找元素，这意味着可以在页面可用之前在帮助文件中设置它们。

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

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