SlickGrid Selenium Automation Issues - selenium-webdriver

Question

I am trying to interact with slick grid and I used the below code
JavascriptExecutor js = (JavascriptExecutor)driver;
//Returns the DIV element matching class grid-canvas, which contains every data row currently being rendered in the DOM.
WebElement rowCount = (WebElement) js.executeScript("return grid.getCanvasNode();");
but it is returning the error saying grid not defined.
I figured out that I have to define the grid for getting the above code to work.
The definition of the grid is as below which has to be defined
var grid;
var columns = [
{id: "Date", name: "Date", field: "Date"},
{id: "tpn", name: "tpn", field: "tpn"},
];
var options = {
enableCellNavigation: true,
enableColumnReorder: true,
explicitInitialization: true
};
$(function () {
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
Date: "20180612",
SPN:Math.random(),
};
var myGrid = $("<div id='MovementTracker' style='height: 399px; overflow: hidden; outline: 0px; position: relative;'></div>");
grid = new Slick.Grid(myGrid, data, columns, options);
myGrid.appendTo($("#app > div > div > div > div > div.size--5.padding--horizontal--double > div.size--content > div > div > div"));
grid.init();
As the definition is multiline, I am struck here how to execute this multiline javascript code in selenium to make grid initialised.
Any help would be much appreciated

Answer 1

This is all about Javascript scope.
I know SlickGrid, but not Selenium. The grid variable is presumably a member of Document because it's not explicitly scoped. If Selenium executes in a different scope, you'd have to reference it as a member of Document. But it depends on the order of creation of the various scopes and objects.