SergeyAvd/test_grid.html

## test_grid.html
<html>
<head>
	<title>test grid page</title>
</head>
<style>
body {
	width:1000px;
}
* {
  box-sizing: border-box;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
</style>
<script>
var colors = ["rgb(153, 51, 204)", "rgb(51, 181, 229)", "rgb(0, 153, 204)", "rgb(255, 255, 255)"];
function changeColor(e) {
	console.log(e.style.backgroundColor);
	var index = colors.indexOf(e.style.backgroundColor);
	var newIndex = 0;
	if (index !== -1) {
		newIndex = (index + 1) % colors.length;
	}
	e.style.backgroundColor = colors[newIndex];
	e.setAttribute("selected", "true");
}
var boxCounter = 0;
function addBox() {
	var row = document.getElementById("row");
	var box = document.getElementById("box");
	var newBox = box.cloneNode(true);
	newBox.setAttribute("style", "");
	row.appendChild(newBox);
	newBox.innerHTML = "box-" + boxCounter;
	newBox.setAttribute("id", "box-" + boxCounter++);
	newBox.style.width = sizeX;
	newBox.style.height = sizeY;
}
function createBoxes() {
	for (var i = 0; i < 100; i++) {
		addBox();
	}
}
var sizeX = 100;
var sizeY = 100;
function regenerate() {
	var row = document.getElementById("row");
	sizeX = parseInt(document.getElementById("size-x").value, 10) || 100;
	sizeY = parseInt(document.getElementById("size-y").value, 10) || 100;
	while (row.firstChild) {
		row.removeChild(row.firstChild);
	}
	boxCounter = 0;
	createBoxes();
}
</script>
<body onload="createBoxes()">
	<input type="number" id="size-x"/>
	<input type="number" id="size-y"/>
	<input type="button" value="Re-Generate" onclick="regenerate()" />
	<div class="col-0" onclick="changeColor(this)" style="display:none" id="box">
	  100 by 100
	</div>
	<div id="row" class="row">
	</div>
</body>
</html>

## test_grid.js
var chromeDriver = require('chromedriver'),
    webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

var chrome = require("selenium-webdriver/chrome");
var options = new chrome.Options();
var driver = new webdriver.Builder().
    forBrowser('chrome').
    setChromeOptions(options).
    build();

webdriver.promise.controlFlow().on('uncaughtException', function(e) {
    console.error('\n' + e.stack);
});

function click(id) {
  return driver.findElement(By.id('box-'+id)).click();
}

function getSelected(id) {
	return driver.findElement(By.id('box-'+id)).getAttribute('selected');
}

function clickAndExpectSelected(id) {
	click(id).then(() => getSelected(id)).then((res) =>
	{
		if (res === "true") {
			console.log("box-"+id+ " was selected");
		} else {
			console.log("box-"+id+ " was NOT SELECTED!");
		}
	})
}
	<html>
	<head>
	<title>test grid page</title>
	</head>
	<style>
	body {
	width:1000px;
	}
	* {
	box-sizing: border-box;
	}
	[class*="col-"] {
	float: left;
	padding: 15px;
	border: 1px solid red;
	}
	.row::after {
	content: "";
	clear: both;
	display: table;
	}
	</style>
	<script>
	var colors = ["rgb(153, 51, 204)", "rgb(51, 181, 229)", "rgb(0, 153, 204)", "rgb(255, 255, 255)"];
	function changeColor(e) {
	console.log(e.style.backgroundColor);
	var index = colors.indexOf(e.style.backgroundColor);
	var newIndex = 0;
	if (index !== -1) {
	newIndex = (index + 1) % colors.length;
	}
	e.style.backgroundColor = colors[newIndex];
	e.setAttribute("selected", "true");
	}
	var boxCounter = 0;
	function addBox() {
	var row = document.getElementById("row");
	var box = document.getElementById("box");
	var newBox = box.cloneNode(true);
	newBox.setAttribute("style", "");
	row.appendChild(newBox);
	newBox.innerHTML = "box-" + boxCounter;
	newBox.setAttribute("id", "box-" + boxCounter++);
	newBox.style.width = sizeX;
	newBox.style.height = sizeY;
	}
	function createBoxes() {
	for (var i = 0; i < 100; i++) {
	addBox();
	}
	}
	var sizeX = 100;
	var sizeY = 100;
	function regenerate() {
	var row = document.getElementById("row");
	sizeX = parseInt(document.getElementById("size-x").value, 10) \|\| 100;
	sizeY = parseInt(document.getElementById("size-y").value, 10) \|\| 100;
	while (row.firstChild) {
	row.removeChild(row.firstChild);
	}
	boxCounter = 0;
	createBoxes();
	}
	</script>
	<body onload="createBoxes()">
	<input type="number" id="size-x"/>
	<input type="number" id="size-y"/>
	<input type="button" value="Re-Generate" onclick="regenerate()" />
	<div class="col-0" onclick="changeColor(this)" style="display:none" id="box">
	100 by 100
	</div>
	<div id="row" class="row">
	</div>
	</body>
	</html>
	var chromeDriver = require('chromedriver'),
	webdriver = require('selenium-webdriver'),
	By = webdriver.By,
	until = webdriver.until;

	var chrome = require("selenium-webdriver/chrome");
	var options = new chrome.Options();
	var driver = new webdriver.Builder().
	forBrowser('chrome').
	setChromeOptions(options).
	build();

	webdriver.promise.controlFlow().on('uncaughtException', function(e) {
	console.error('\n' + e.stack);
	});

	function click(id) {
	return driver.findElement(By.id('box-'+id)).click();
	}

	function getSelected(id) {
	return driver.findElement(By.id('box-'+id)).getAttribute('selected');
	}

	function clickAndExpectSelected(id) {
	click(id).then(() => getSelected(id)).then((res) =>
	{
	if (res === "true") {
	console.log("box-"+id+ " was selected");
	} else {
	console.log("box-"+id+ " was NOT SELECTED!");
	}
	})
	}