diff --git a/main/tests/cypress/cypress/integration/project/grid/viewpanel-header/rows_records.spec.js b/main/tests/cypress/cypress/integration/project/grid/viewpanel-header/rows_records.spec.js
new file mode 100644
index 000000000..c64c566fb
--- /dev/null
+++ b/main/tests/cypress/cypress/integration/project/grid/viewpanel-header/rows_records.spec.js
@@ -0,0 +1,153 @@
+const jsonValue = `[
+  {
+     "id":"0001",
+     "type":"donut",
+     "name":"Cake",
+     "ppu":0.55,
+     "batters":{
+        "batter":[
+           {
+              "id":"1001",
+              "type":"Regular"
+           },
+           {
+              "id":"1002",
+              "type":"Chocolate"
+           },
+           {
+              "id":"1003",
+              "type":"Blueberry"
+           },
+           {
+              "id":"1004",
+              "type":"Devil's Food"
+           }
+        ]
+     },
+     "topping":[
+        {
+           "id":"5001",
+           "type":"None"
+        },
+        {
+           "id":"5002",
+           "type":"Glazed"
+        },
+        {
+           "id":"5005",
+           "type":"Sugar"
+        },
+        {
+           "id":"5007",
+           "type":"Powdered Sugar"
+        },
+        {
+           "id":"5006",
+           "type":"Chocolate with Sprinkles"
+        },
+        {
+           "id":"5003",
+           "type":"Chocolate"
+        },
+        {
+           "id":"5004",
+           "type":"Maple"
+        }
+     ]
+  },
+  {
+     "id":"0002",
+     "type":"donut",
+     "name":"Raised",
+     "ppu":0.55,
+     "batters":{
+        "batter":[
+           {
+              "id":"1001",
+              "type":"Regular"
+           }
+        ]
+     },
+     "topping":[
+        {
+           "id":"5001",
+           "type":"None"
+        },
+        {
+           "id":"5002",
+           "type":"Glazed"
+        },
+        {
+           "id":"5005",
+           "type":"Sugar"
+        },
+        {
+           "id":"5003",
+           "type":"Chocolate"
+        },
+        {
+           "id":"5004",
+           "type":"Maple"
+        }
+     ]
+  },
+  {
+     "id":"0003",
+     "type":"donut",
+     "name":"Old Fashioned",
+     "ppu":0.55,
+     "batters":{
+        "batter":[
+           {
+              "id":"1001",
+              "type":"Regular"
+           },
+           {
+              "id":"1002",
+              "type":"Chocolate"
+           }
+        ]
+     },
+     "topping":[
+        {
+           "id":"5001",
+           "type":"None"
+        },
+        {
+           "id":"5002",
+           "type":"Glazed"
+        },
+        {
+           "id":"5003",
+           "type":"Chocolate"
+        },
+        {
+           "id":"5004",
+           "type":"Maple"
+        }
+     ]
+  }
+]`;
+describe(__filename, function () {
+  it('ensures rows and records display same in csv file', function () {
+    cy.loadAndVisitProject('food.small');
+
+    cy.get('span[bind="modeSelectors"]').contains('records').click();
+    cy.get('.data-table tbody').find('tr').should('have.length', 10);
+
+    cy.get('span[bind="modeSelectors"]').contains('rows').click();
+    cy.get('.data-table tbody').find('tr').should('have.length', 10);
+  });
+  it('ensures rows and records are different for 3-level json file', function () {
+    const projectName = Date.now();
+    cy.loadAndVisitSampleJSONProject(projectName, jsonValue);
+    cy.get('span[bind="modeSelectors"]').contains('records').click();
+    for (let i = 1; i <= 3; i++) {
+      cy.get('tr td:nth-child(3)').should('to.contain', i);
+    }
+    cy.get('span[bind="modeSelectors"]').contains('row').click();
+    for (let i = 1; i <= 10; i++) {
+      cy.get('tr td:nth-child(3)').should('to.contain', i);
+    }
+  });
+});
diff --git a/main/tests/cypress/cypress/support/commands.js b/main/tests/cypress/cypress/support/commands.js
index f91b52a7e..3016a9139 100644
--- a/main/tests/cypress/cypress/support/commands.js
+++ b/main/tests/cypress/cypress/support/commands.js
@@ -82,6 +82,14 @@ Cypress.Commands.add('doCreateProjectThroughUserInterface', () => {
     const projectId = location.href.split('=').slice(-1)[0];
     cy.visitProject(projectId);
     cy.wrap(projectId).as('createdProjectId');
+    cy.get('@loadedProjectIds', { log: false }).then((loadedProjectIds) => {
+      loadedProjectIds.push(projectId);
+      cy.wrap(loadedProjectIds, { log: false })
+        .as('loadedProjectIds')
+        .then(() => {
+          return projectId;
+        });
+    });
   });
 });
 
@@ -228,3 +236,34 @@ Cypress.Commands.add(
       .should('to.exist');
   }
 );
+
+Cypress.Commands.add(
+  'loadAndVisitSampleJSONProject',
+  (projectName, fixture) => {
+    cy.visitOpenRefine();
+    cy.navigateTo('Create Project');
+    cy.get('#create-project-ui-source-selection-tabs > div')
+      .contains('Clipboard')
+      .click();
+
+    cy.get('textarea').invoke('val', fixture);
+    cy.get(
+      '.create-project-ui-source-selection-tab-body.selected button.button-primary'
+    )
+      .contains('Next »')
+      .click();
+    cy.get(
+      '.default-importing-wizard-header input[bind="projectNameInput"]'
+    ).clear();
+    cy.get(
+      '.default-importing-wizard-header input[bind="projectNameInput"]'
+    ).type(projectName);
+    // need to disable es-lint as force is required to true, if not then
+    // cypress won't detect the element due to `position:fixed` and overlays
+    cy.get('[data-cy=element0]') // eslint-disable-line
+      .first()
+      .scrollIntoView()
+      .click({ force: true });
+    cy.doCreateProjectThroughUserInterface();
+  }
+);
diff --git a/main/webapp/modules/core/scripts/index/parser-interfaces/json-parser-ui.js b/main/webapp/modules/core/scripts/index/parser-interfaces/json-parser-ui.js
index 3cdbf672d..3de51dd6a 100644
--- a/main/webapp/modules/core/scripts/index/parser-interfaces/json-parser-ui.js
+++ b/main/webapp/modules/core/scripts/index/parser-interfaces/json-parser-ui.js
@@ -199,7 +199,8 @@ Refine.JsonParserUI.prototype._showPickRecordNodesUI = function() {
       if (elementNode !== null) {
         $('<span>').addClass('punctuation').text(',').appendTo(elementNode);
       }
-      elementNode = $('<div>').addClass('node').addClass('indented').appendTo(container);
+      var dataCy = "element" + i;
+      elementNode = $('<div>').addClass('node').addClass('indented').attr('data-cy', dataCy).appendTo(container);
 
       renderNode(a[i], elementNode, parentPath2);
     }