循环遍历 Angular 表单中的字段并使用量角器测试输入验证? [英] Looping through fields in an Angular form and testing input validations using Protractor?

问题描述

我是初学者我正在尝试遍历 Angular 表单中的所有字段，并使用 Protractor 测试输入验证是否正常工作.到目前为止，我失败得很惨.我的伪代码如下:

I'm a beginner & am trying to loop through all the fields in an Angular form, and test that the input validation is working, using Protractor. So far I'm failing miserably. My pseudo code is as follows:

//PSEUDO CODE FOR TEST PROCESS:
//------------------------------
// 1.For each field requiring validation
// 2.Reset test environment
// 3.Populate field with dummy data
// 4.Get result
// 5.Evaluate result versus expectation for test type
// 6.Pass test description & test result (true/false) to Protractor to print to command line

我写的代码如下.这不是很好，我什至不确定是否可以在不为每个字段的每个验证测试指定单独测试的情况下实现我的目标.我做错了什么/正确的方法是什么?

The code I've written is below. It's not great, and I'm not even sure if it's possible to achieve my objective without specifying individual tests for each validation test for each field. What am I doing wrong / what is the correct approach?

describe('Sample form', function() {

// Fields subject to input validation
  var userName          = element(by.model('user.name'));           // required field
  var userSurname       = element(by.model('user.surname'));        // required field
  var userId            = element(by.model('user.id'));             // required field

// Test population
  var fieldsRequired    = [userName, userSurname, userId];          // fields to be tested

// helper function to check class of a specified element --> ng-valid / ng-invalid etc.
  var hasClass = function (element, cls) {
    return element.getAttribute('class').then(function (classes) {
      return classes.split(' ').indexOf(cls) !== -1;
    });
  };

// The testing function
  function testRequired(fieldsRequired) {
    //1. loop through each field
      for (var i = 0; i < fieldsRequired.length; i++) {

      //2. Reset page  prior to each test
        browser.get('http://sometestlink.html');      

      //3. Populate field with dummy data
        fieldsRequired[i].sendkeys();  

      //4,5 & 6. Protractor test
        it('should fail validation when ' + fieldsRequired[i] + ' is missing', expect(hasClass(fieldsRequired[i],'ng-valid')).toEqual(false));
      }
  }
});

推荐答案

你的代码有几个问题:

1. 你的 it 块永远不会被执行，因为你没有调用 testRequired 函数
2. sendkeys() 应该是 sendKeys()，而且你没有发送任何文本，它是空的

1. Your it block will never be executed because you are not calling the testRequired function
2. sendkeys() should be sendKeys(), and you are not sending any text, it's empty

你可以尝试用这个来实现你所描述的:

You could try achieve what you described with this:

describe('Sample form', function() {

    // helper function to check class of a specified element --> ng-valid / ng-invalid etc.
    var hasClass = function (element, cls) {
        return element.getAttribute('class').then(function (classes) {
            return classes.split(' ').indexOf(cls) !== -1;
        });
    };

    var fields = {
        'userName': element(by.model('user.name')),
        'userSurname': element(by.model('user.surname')),
        'userId': element(by.model('user.id'))
    };

    for(var field in fields) {
        (function(field) {                
            it('should fail validation when ' + field + ' is missing', function () {
                browser.get('http://sometestlink.html');
                fields[field].sendKeys('dummy_data');
                expect(hasClass(fields[field], 'ng-valid')).toEqual(false);
            });
        })(field);
    };
});

这篇关于循环遍历 Angular 表单中的字段并使用量角器测试输入验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！