Тестирование всегда было и будет оставаться приоритетом номер один для веб-разработчиков, занимающихся выполнением различных типов проектов веб-разработки. Будь то ручное или автоматическое тестирование, веб-разработчики не откладывают тратить много времени на то, чтобы обеспечить отличную работу сайта. Модульное и интеграционное тестирование прекрасно, если вы можете точно определить ошибки в коде вашего сайта. Тестирование форм веб-страницы может быть утомительной задачей. Независимо от того, являетесь ли вы новичком или опытным веб-разработчиком, могут возникнуть ситуации, когда тестирование форм веб-страниц может привести к дрожанию. Поэтому, как попытка справиться со всеми вашими заботами, я написал этот блог, чтобы познакомить вас с отличным решением этой проблемы. Здесь я обсудил создание JavaScript-букмарклета для предварительного заполнения форм, размещенных на разных веб-страницах. Обратите внимание: поскольку для большинства полей будет необходимо вставить случайные данные, я буду использовать замечательную библиотеку Faker. Эта библиотека будет использоваться для создания поддельных имен, адресов и телефонных номеров.
Шаг 1 — Создание JavaScript Bookmarklet
Что ж, вы можете легко создавать и распространять букмарклет JavaScript, просто создав Pen на CodePen и добавив приведенный ниже фрагмент в href:
<a href="javascript: **js goes here** "></a>
В моем примере я буду использовать jQuery для обеспечения компактности кода и совместимости с различными браузерами. Теперь, чтобы предотвратить обновление самого букмарклета, вы можете начать обновлять код фрагмента через внешний файл, как описано ниже:
<a href="javascript:
(function(d) {
var body = d.getElementsByTagName('body')[0],
script = d.createElement('script');
script.src = '//localhost.com/pathtomyfile.js';
body.appendChild(script);
}(window.document));
">My Javascript Bookmarklet</a>
Шаг 2 — Загрузите файл предпочтительного сценария в букмарклет
Теперь, когда у вас есть готовый букмарклет, пришло время загрузить файл сценария, который соответствует вашим целям. Здесь абсолютно необходимо убедиться, что код никоим образом не конфликтует с исходной страницей. Вот как файл скрипта должен быть загружен в созданный букмарклет JavaScript:
(function(win, doc, $, undefined) {
'use strict';
// Don't run if jQuery isn't loaded
if (typeof window.jQuery === 'undefined') {
return;
}
// Наш код пойдет сюда.
}(window, window.document, window.jQuery));
In addition to above, use the below mentioned code for generating random numbers:
var _rand = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Окончательная загрузка скрипта FakerJS выполняется с использованием $ .getScript, как описано ниже:
$.getScript('//cdnjs.cloudflare.com/ajax/libs/Faker/0.7.2/MinFaker.js')
.done(function() {
// run our functions from here
})
.fail(function() {
win.console.error('ERROR: FakerJS not loaded!');
});
Для приведенного выше кода, обратите внимание, что Faker предоставляет быстрый доступ к поддельным именам, электронным письмам, адресам и т. Д.
Шаг 3 — Создание функции конструктора
В соответствии с этим шагом вам необходимо создать функцию конструктора, которую можно использовать для загрузки данные, которые могут быть повторно использованы по мере необходимости в будущем. Вот как это будет сделано:
var FormData = function(faker) {
this.faker = faker;
this.randomWord = faker.Internet.domainWord();
this.username = 'fake_' + this.randomWord;
this.username += _rand(100,9999);
// set this value to your password specifications
this.password = 'pass1234';
this.name = faker.Name.findName();
this.address1 = faker.Address.streetAddress();
this.city = faker.Address.city();
this.state = faker.random.br_state_abbr();
this.zip = faker.Address.zipCode();
// Chris' actual credit card number
this.cc = '4242 4242 4242 4242';
this.exp1 = _rand(1,12);
this.exp2 = _rand(14,22);
this.cvv = _rand(100,999);
};
Шаг 4. Установка статуса определенных типов файлов на «Случайный».
Здесь вы сможете установить статус определенных типов полей, таких как флажки, и установить флажки «Случайные». Для этого вам просто нужно расширить объект FormData некоторыми функциями, как описано ниже:
// Randomly select dropdown
FormData.prototype.randomizeSelect = function(el) {
var $el = $(el),
len = $el.find('option').length - 1;
$el.children('option')
.prop('selected', false)
.eq( _rand( 1,len + 1 ) )
.prop('selected', true);
};
// Randomly select radio button
FormData.prototype.randomizeRadio = function(radios) {
radios = radios.not('[type="hidden"]');
var len = radios.length;
radios
.prop('checked', false)
.eq( _rand( 0, len - 1 ) )
.prop('checked', true);
};
// Add some lorem text for textareas
FormData.prototype.randomizeParagraph = function(el) {
$(el).val(this.faker.Lorem.sentence(5));
};
// Randomize all checkbox fields
FormData.prototype.randomizeCheckbox = function(el) {
var $el = $(el);
$el.prop('checked', false);
if (_rand( 0,1 ) === 0) {
$el.prop('checked', true);
}
};
FormData.prototype.randomizeEmail = function(el) {
// if we want different emails for all email fields, we can modify this
$(el).val('chriscoyier+' + this.randomWord + '@gmail.com');
};
Шаг 5. Привязка данных к полям формы
Согласно этому последнему шагу, вы будете привязывать данные к полям, доступным в форме. Для этого вы можете использовать jQuery для захвата полей или типов полей и замены их значений без объекта данных. Код для этого упоминается ниже:
var fillForm = function() {
data = new FormData(window.Faker);
$('#name').val(data.name);
$('#username').val(data.username);
$('#cc').val(data.cc);
$('#exp-1').val(data.exp1);
$('#exp-2').val(data.exp2);
$('#cvv').val(data.cvv);
$('#address').val(data.address1);
$('#city').val(data.city);
$('#state').val(data.state);
$('#zip').val(data.zip);
$('#pw').val(data.password);
$('#pw-repeat').val(data.password);
data.randomizeRadio($('[name="radio-choice"]'));
// Randomize all select boxes
$('select').each(function() {
data.randomizeSelect(this);
});
// Randomize all checkboxes
$('input[type="checkbox"').each(function() {
data.randomizeCheckbox(this);
});
// Randomize all textareas
$('textarea').each(function() {
data.randomizeParagraph(this);
});
// Randomize all emails
$('input[type="email"').each(function() {
data.randomizeEmail(this);
});
};
Подводя итоги
, это обертка в этом блоге. Надеюсь, вам понравилось бы пройтись по ступенькам и найти их интересными. С помощью специального букмарклета javascript вы можете заполнять формы быстрыми и случайными данными.