If you are testing any web application having tabular data representation, you might have come across  AG grid implementation many times. AG Grid is a fully-featured and highly customisable data grid with good performance and integrates smoothly with most of the major javascript frontend frameworks. The term AG in AG grid means Agnostics since it does not have any 3rd party dependencies. In this post, I will be sharing some challenges we may come across while automating user scenarios on AG grid with React framework and tips and tricks to overcome the same.

Lets consider the demo example - https://ag-grid.com/example/.

Problem statement 1:
Validate all the columns in the Grid header. 

If you have noticed carefully, the demo application it has both primary and secondary column headers. All the columns in the header will not be shown in the page together, user may need to scroll towards right to check the column names. Scroll to view with coordinates may not work consistently here. Another workaround could be increasing the screen size by some % which is again not a very reliable solution.

Solution: We are going to use react props to validate the above details without scrolling.

Step 1: Getting access to react props (https://reactjs.org/docs/components-and-props.html)
 in the test code. The below javascript method will give us a handle to access react internal objects.

Step2: Identify the react element to be used. Make sure you have taken the parent element of AG grid root as shown in the below image. In this case we will be using div with id myGrid.
var grid = document.getElementById("myGrid");

Step 3: Now time to get the react handler for our test. The below command will give the react handler we are looking for.
var reactGrid = findReactComponent(grid);

Step 4: Now time to use the react props we got in the last step.
var props = reactGrid.children.props;

Step 5: We will use props to get the total number of header columns and data in the grid without scrolling using the below two commands.

var columnCount = props.gridOptions.columnDefs.length;

Time to put together everything in Test code:
Now we have the raw javascript code to be used in our test framework like selenium. We can execute those using Javascript Executor.
Using AG grid APIs:
We can also use AG grid apis to perform different supported actions. I am sharing few examples below.

Click on select all rows from the grid using API:

Selecting any visible row: 

Getting all the row data from an selected row:

Hope this post will be useful for some of you who is using selenium to automate AG grid. You can play around to learn more about AG grid from chrome console.
Here are few useful resources: