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);
});

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

这让我疯狂了几天。我似乎无法从现有的模态中选择角色。即使使用节点调试工具从VSCode进行调试，无论我选择了什么，我都无法打印出任何内容。

Answer 1

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

browser.ignoreSynchronization = true;

这意味着，我不等任何＆＃34; angular＆＃34;作为量角器的常见问题解答说：

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

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

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

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

Answer 2

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

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

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

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

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

2 个答案: