Одновременное тестирование кода в разных браузерах

О тестировании какого кода в браузерах пойдёт речь? О любом коде, который он может отобразить - HTML, CSS, JavaScript, PHP, Processing, X3D и т.д.

Для одновременного тестирования кода в разных браузерах нам потребуются следующие модули:

В разделе Qt Quick был показан пример построения данной системы без скрипта автоматизации, но необходимость перекомпиляции программ и написания части кода web-сокет сервера на Qt C++ вызывает неудобства. Более интересной является реализация сервера и детектора на Node.js, что позволит оперативно перезапускать сервер после изменения его кода.

var fs = require('fs');
var path = "C:\\\\Apache\\htdocs\\websocket";
var lock = false;
var listSockets = [];

fs.watch(path, (eventType, filename) => {

if(!lock){
		lock = true;
		fileName = path+"\\test.html";
		fs.readFile(fileName, 'utf8', function(err, data) {
			
			if (err) {
				console.log( 'Невозможно найти или прочитать файл\n');
			} else {
				lock = false;
				
				for(var i in listSockets){

listSockets[i].send(data);
				}	
			}	
		})
	}
});

var WebSocketServer = require('ws').Server;

var server = new WebSocketServer({ port : 3002 });
var listSockets = [];

server.on('connection', function(socket) {
	
	var id = listSockets.length;
	listSockets[id] = socket;
	console.log('Подключился клиент с id: ' + id);
	
	socket.on('message', function(message) {
		
		switch(message){
		case "close": 
			for(var i in listSockets){
				if (listSockets[i] == this){
					delete(listSockets[i]);	
					console.log("Отключился клиент с id: " + i);
					break;
				}
			}
			break;
		}
	});
});

console.log('Порт для прослушивания ' + server.options.port);

В показанном примере можно выделить два блока: обнаружения изменения целевой директории при помощи метода fs.watch и создания сервера.

При обнаружении изменения в директории (сохранении файла) метод обнаружения срабатывает два раза подряд. Избавление от этой особенности осуществляется с помощью защёлки lock.

Все объекты подключенных клиентов сохраняются в масиве listSockets и удаляются из него после своего отключения.

В коде клиента вместо строки "IP компьютера" укажите IP-адрес компьютера, на котором будет запущен сервер - 127.0.0.1 для тестирования на локальном хосте или реальный IP-адрес компьютера в локальной сети.

Для запуска сервера переходим в папку расположения файла server.js, открываем командную стоку (cmd в Windows) и вводим:

Если возникает сообщение об отсутствии модуля ws, то загружаем его:

После успешного запуска сервера в браузере открываем файл клиента client.html и консоль (F12) для просмотра логов..

Измените код в файле test.html целевой директории и сохраните его - браузер отобразит содержимое данного файла. Если всё работает, то можно перейти к написанию скрипта автоматизации на AutoHotkey.

Скриптовый язык AHK чем-то напоминает JavaScript", что позволяет быстрее привыкнуть к его особенностям. Для редактирования ahk-файлов лучше использовать один из специализированных редакторов, например, SciTE4AutoHotKey.

После сохранения файла multiview.ahk делаем двойной щелчок на его названии или ярлыке. Если ошибок нет, то значок данного файла появляется в трее, что говорит об активности скрипта. После нажатия клавиши F2 на экране появятся окна браузеров с подключенным к серверу клиентами. После сохранения файла client.html они отобразят его содержимое.