Javascript 如何在接受测试中调用输入和按钮?

Javascript 如何在接受测试中调用输入和按钮?,javascript,ember.js,acceptance-testing,Javascript,Ember.js,Acceptance Testing,这让人恼火,因为谷歌/互联网对此几乎没有帮助。也不是很有帮助,即使它尝试了。我基本上是从零开始学习的。我知道少量的HTML、Handlebar和javascript,但重点是适度的 这是我的模板,大部分是从我的架构师设计中复制的代码,他没有时间帮助我: <form {{action "login" on="submit"}} class="col-md-4 col-md-offset-4"> {{#if loginFailed}} <div class="ale

这让人恼火,因为谷歌/互联网对此几乎没有帮助。也不是很有帮助,即使它尝试了。我基本上是从零开始学习的。我知道少量的HTML、Handlebar和javascript,但重点是适度的

这是我的模板,大部分是从我的架构师设计中复制的代码,他没有时间帮助我:

<form {{action "login" on="submit"}} class="col-md-4 col-md-offset-4">
    {{#if loginFailed}}
    <div class="alert">Invalid username or password.</div>
  {{/if}}

  <div class="form-group">
    <label for="inputEmail">Email address</label>
    {{input value=username type="email" class="form-control" id="inputEmail1" placeholder="Email"}}
  </div>

  <div class="form-group">
    <label for="inputPassword">Password</label>
    {{input value=password type="password" class="form-control" id="inputPassword" placeholder="Password"}}
  </div>

  <button type="submit" class="btn btn-default" disabled={{isProcessing}}>Log in!</button>
</form>
以下是我试图编写的验收测试:

import Ember from 'ember';
import { module, test } from 'qunit';
import startApp from 'ember-super-user/tests/helpers/start-app';

module('Acceptance | login', {
  beforeEach: function() {
    this.application = startApp();
  },

  afterEach: function() {
    Ember.run(this.application, 'destroy');
  }
});

test('visiting /login and fail a login attempt', function(assert) {
  visit('/login');
  fillIn('input.username', 'insert-username-here');
  fillIn('input.password', 'insert-password-here');
  click('button.submit');

  // I know this assert is wrong but I haven't even gotten this far yet so I'm     // not thinking about it; basically what happens is a popup appears and says    // wrong-username-or-password-etc
  andThen(function() {
    assert.equal(currentURL(), '/login');
  });
});
执行在
填充的
行上终止。我真的不知道该怎么办,我已经尝试了“input.username”、“input.inputEmail1”、“input.inputEmail”的所有组合。。。我只是不知道我该怎么做。我也很确定“button.submit”也不会神奇地工作。然后,我知道当我尝试填写
时,我会更加迷茫,然后
承诺承认一个弹出窗口显示“错误密码”等

请帮忙;非常感谢您抽出时间

编辑:我已经能够修复测试的
部分,但是
点击
(无论如何,可能是点击,因为错误消息不清楚哪一行是问题)产生了一些我无法诊断的错误。错误消息出现在QUnit测试套件的输出中,对我来说没有意义--

编辑2:将“按钮”更改为“提交”的最新更改仍然无效。当前错误消息:

Error: Element input[type='submit'] not found.@ 166 ms
Expected:   
true
Result:     
false
Diff:   
trufalse
Source:     
    at http://localhost:7357/assets/test-support.js:3592:13
    at exports.default._emberTestingAdaptersAdapter.default.extend.exception (http://localhost:7357/assets/vendor.js:52460:7)
    at onerrorDefault (http://localhost:7357/assets/vendor.js:43162:24)
    at Object.exports.default.trigger (http://localhost:7357/assets/vendor.js:67346:11)
    at Promise._onerror (http://localhost:7357/assets/vendor.js:68312:22)
    at publishRejection (http://localhost:7357/assets/vendor.js:66619:15)

每个输入的选择器都是错误的。因为您给了每个人一个id,所以您可以这样做:

fillIn('#inputEmail1', 'insert-username-here');
fillIn('#inputPassword', 'insert-password-here');
请记住,您对
fillIn
的第一个参数使用CSS选择器,ID使用
前缀,类使用

对于submit按钮,您没有添加类或ID,但如果它是页面上唯一的submit按钮,您可以将其作为目标,如下所示:

click('button[type="submit"]');

每个输入的选择器都是错误的。因为您给了每个人一个id,所以您可以这样做:

fillIn('#inputEmail1', 'insert-username-here');
fillIn('#inputPassword', 'insert-password-here');
请记住,您对
fillIn
的第一个参数使用CSS选择器,ID使用
前缀,类使用

对于submit按钮,您没有添加类或ID,但如果它是页面上唯一的submit按钮,您可以将其作为目标,如下所示:

click('button[type="submit"]');

fillIn和click函数接受css选择器。比如说,点击submit按钮

click("input[type='submit']");

fillIn和click函数接受css选择器。比如说,点击submit按钮

click("input[type='submit']");

谢谢你的帮助,我现在得到了一个新的错误:TypeError:undefined不是一个对象(计算'this.set')。我还尝试给按钮一个id“submitButton”,然后以与fillIns相同的方式使用它,但出现了相同的错误。我的直觉是,它与测试无关,更多地与应用程序代码有关。我会试着看看哪一行抛出了这个错误,以及它产生的堆栈跟踪。你可能是对的,虽然堆栈跟踪对我来说毫无意义,但我不知道它如何引导我找到错误所在。考虑到其他编程语言在错误发生的地方提供了非常清晰的堆栈跟踪,这是非常令人恼火的。任何进一步的帮助都会很好——谢谢。扫描代码后,我看到一些错误。您正试图直接访问
var user=this.modelFor('application').user,它应该是
var user=this.modelFor('application').get('user')这个.set('isProcessing',false),它应该是
\u这个。设置…
。如果您使用chrome开发工具,您可以在捕获错误时使其中断,选中async复选框,并探索更完整的堆栈跟踪,以查看它尝试调用
set
的位置。感谢您的帮助,我现在收到一个新错误:TypeError:undefined不是一个对象(评估'this.set')。我还尝试给按钮一个id“submitButton”,然后以与fillIns相同的方式使用它,但出现了相同的错误。我的直觉是,它与测试无关,更多地与应用程序代码有关。我会试着看看哪一行抛出了这个错误,以及它产生的堆栈跟踪。你可能是对的,虽然堆栈跟踪对我来说毫无意义,但我不知道它如何引导我找到错误所在。考虑到其他编程语言在错误发生的地方提供了非常清晰的堆栈跟踪,这是非常令人恼火的。任何进一步的帮助都会很好——谢谢。扫描代码后,我看到一些错误。您正试图直接访问
var user=this.modelFor('application').user,它应该是
var user=this.modelFor('application').get('user')这个.set('isProcessing',false),它应该是
\u这个。设置…
。如果您使用chrome开发工具,您可以在捕获错误时使其中断,选中async复选框,并探索更完整的堆栈跟踪,以查看它尝试调用
集的位置。遗憾的是,这也不起作用。检查对问题的编辑以获取错误消息;谢谢。我的错误应该是按钮[type='submit'],很遗憾,这也不起作用。检查对问题的编辑以获取错误消息;谢谢。我错了,应该是按钮[type='submit']