Question

我有一个应用程序我正在尝试用e2e测试。该应用程序使用非Angular登录页面（Microsoft AD帐户）。因此，我填写用户名和密码，然后单击“登录”按钮，并输入以下代码：

var user = asAdmin ? config.adminUser : config.user;
browser.driver.findElement(by.id('cred_userid_inputtext')).sendKeys(user);
browser.driver.findElement(by.id('cred_password_inputtext')).sendKeys(config.pass);
browser.driver.findElement(by.id('cred_sign_in_button')).click();

用户名和密码被填写，“登录”按钮（＆lt; span＆gt;）看起来就像点击了（更改了颜色），但没有任何反应。

我等了很长时间（分钟）而且它不起作用。但是，如果我只使用鼠标，它确实有效。我还尝试在密码字符串的末尾加上“\ n”来模拟回车键。这被忽略了。

登录相关部分的html如下所示：

<form id="credentials" method="post" action="https://login.microsoftonline.com/...">
    <div id="cred_userid_container" class="login_textfield textfield">
        <span class="input_field textfield">
            <label for="cred_userid_inputtext" class="no_display" aria-hidden="true">User account</label>
            <div class="input_border">
                <input tabindex="1" id="cred_userid_inputtext" class="login_textfield textfield required email field normaltext" placeholder="someone@example.com " type="email" name="login" spellcheck="false" alt="someone@example.com " aria-label="User account" value="" autocomplete="off">
            </div>
        </span>
    </div>
    ...
    <div id="cred_password_container" class="login_textfield textfield" style="opacity: 1;">
        <span class="input_field textfield">
            <label for="cred_password_inputtext" class="no_display" aria-hidden="true">Password</label>
            <div class="input_border">
                <input tabindex="2" id="cred_password_inputtext" class="login_textfield textfield required field normaltext" placeholder="Password" spellcheck="false" aria-label="Password" alt="Password" type="password" name="passwd" value="">
            </div>
        </span>
    </div>
    ...
     <li class="login_cred_options_container">
        <div id="cred_kmsi_container" class="subtext normaltext">
          <span class="input_field ">
            <input tabindex="10" id="cred_keep_me_signed_in_checkbox" type="checkbox" value="0" name="persist">
            <label id="keep_me_signed_in_label_text" for="cred_keep_me_signed_in_checkbox" class="persist_text">Keep me signed in</label>
          </span>
        </div>
      <span id="cred_sign_in_button" tabindex="11" onclick="Post.SubmitCreds();return false;" class="button normaltext cred_sign_in_button refresh_domain_state disabled_button" role="button" style="opacity: 1;">Sign in</span>
                    <div id="recover_container" class="subtext smalltext" style="opacity: 1;">
          <span>
             <a id="cred_forgot_password_link" tabindex="12" href="https://login.microsoftonline.com/resetpw.srf?lc=1033&amp;id=501148">Can’t access your account?</a>
          </span>
        </div>

      </li>
    ...
</form>

我不能，因为我的生活中弄清楚这里发生了什么。

非常感谢任何帮助。

更新：添加了缺少的“按钮”范围

UPDATE 2：也在使用Firefox测试过，同样的问题。点击跨度似乎不起作用..

更新3：由于某些奇怪的原因，以下代码有效：

browser.actions()
  .mouseMove(browser.driver.findElement(by.id('cred_sign_in_button')))
  .click()
  .perform();

browser.sleep(500);

browser.driver.findElement(by.id('cred_sign_in_button')).click();

如果我执行mouseMove / click或最后一次单击，它将停止工作。如果我睡觉了，那就是间歇性的。

我不知道为什么会这样。

Answer 1

使用Protractor测试非角度页面在等待内容时可能会非常棘手。

我建议您将Protractor升级到最新版本（截至目前为1.3.1），使用custom function waitReady() browser.wait准备好元素并重写您的测试：

var user = asAdmin ? config.adminUser : config.user;

// TODO: use page objects
var userIdInputElm = $('#cred_userid_inputtext');
var passwordInputElm = $('#cred_password_inputtext');
var signinButtonElm = $('#cred_sign_in_button');

it('waits for the elements present and visible (non-angular)', function() {
    expect(userIdInputElm.waitReady()).toBeTruthy();
    expect(passwordInputElm.waitReady()).toBeTruthy();
    expect(signinButtonElm.waitReady()).toBeTruthy();
});

it('fills user and password', function() {
    userIdInputElm.sendKeys(user);
    passwordInputElm.sendKeys(config.pass);
});

it('clicks sign in button', function() {
    signinButtonElm.click();
});

waitReady here。

的详细信息

为什么在Protractor测试中非Angular页面上的Click被忽略？

1 个答案: