为什么在量角器测试中的非角度页面上点击忽略？

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

的用户名和密码得到填补，并点击“登录”按钮（这是一个<跨度> ）看起来像被点击（改变颜色），但没有任何反应。

我等了很长时间（分钟），它只是不起作用。但是，如果我只是使用鼠标，它确实有效。我也尝试在密码字符串的末尾加上“\ 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> 

我不能为我的生活弄清楚是怎么回事。

任何帮助，非常感谢。

更新：加入缺少的 “按钮” 跨度

更新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(); 

如果我参加任何鼠标移动/点击或最后点击，它停止工作。如果我睡觉，它是间歇性的。

我不知道为什么这是工作。

Answer 1

使用量角器测试非角度页面对于等待内容可能会非常棘手。

我建议你升级量角器最新版本（1.3.1截至目前），使用custom functionwaitReady()是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(); 
}); 

更多的为什么waitReadyhere细节。