itemengine-cypress-automation 1.0.155-migrationScripts-86e4c95.0 → 1.0.156-01AprilFixes-fc21452.0

package/cypress/e2e/ILC/GridFill/customizeLayoutSectionShadeCellsGridBorders.js

@@ -365,7 +365,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Shade the c
             });
         });
 
-        it('CSS of \'Grid borders\', \'Grid border style\' and \'Outer grid border\' sections', () => {
+        it('CSS of \'Grid borders\', \'Grid border style\' and \'Outer grid border\' sections', { tags: 'css' }, () => {
             utilities.verifyCSS(gridFillPage.gridBordersTitle(), {
                 'color': css.color.labels,
                 'font-size': css.fontSize.normal,

package/cypress/e2e/ILC/GridFill/editTabScoringSection.js

@@ -99,12 +99,6 @@ describe('Create item page - Grid fill: Scoring section', () => {
             gridFillPage.steps.verifyPointsPerResponseScore(3);
         });
 
-        it('When user shades a cell in customize layout then points per response should get updated accordingly', () => {
-            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
-            gridFillPage.steps.shadeCell(1, 3);
-            gridFillPage.steps.verifyPointsPerResponseScore(2);
-        });
-
         it('When user unselects the shaded cell in specify correct answer section, then points per response should get updated accordingly', () => {
             gridFillPage.steps.unselectCellSpecifyCorrectAnswerSection(1, 3);
             gridFillPage.steps.verifyPointsPerResponseScore(3);
@@ -115,11 +109,6 @@ describe('Create item page - Grid fill: Scoring section', () => {
             gridFillPage.steps.verifyPointsPerResponseScore(2);
         });
 
-        it('When user unshades the shaded cell in customize layout section, then points per response should get updated accordingly', () => {
-            gridFillPage.steps.unShadeCell(1,3);
-            gridFillPage.steps.verifyPointsPerResponseScore(2);
-        });
-
         it('When the user switches to \'All or nothing\' scoring, then the Points on response label and score should not be displayed and the points displayed in \'Points\' input field should remain unchanged', () => {
             gridFillPage.steps.selectAutoScoredScoringSubtype('All or nothing');
             utilities.verifyElementVisibilityState(gridFillPage.pointsPerResponseWrapper(), 'notExist');

package/cypress/e2e/ILC/GridFill/gridLayoutContents.js

@@ -0,0 +1,204 @@
+import { gridFillPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create Item page - Grid fill : Grid layout', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Grid layout - contents', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+        });
+
+        it('Grid layout label should be displayed', () => {
+            utilities.verifyInnerText(gridFillPage.gridLayoutLabel(), 'Grid layout');
+            utilities.verifyElementVisibilityState(gridFillPage.gridLayoutLabel(), 'visible');
+        });
+
+        it('\'Select layout\' label and \'Open the grid selector\' dropdown should be displayed and by default \'Open the grid selector\' dropdown should be in collapsed state', () => {
+            utilities.verifyInnerText(gridFillPage.selectLayoutLabel(), 'Select layout');
+            utilities.verifyElementVisibilityState(gridFillPage.gridLayoutLabel(), 'visible');
+            utilities.verifyInnerText(gridFillPage.openTheGridSelectorDropdownButtonLabel(), 'Open the grid selector');
+            utilities.verifyElementVisibilityState(gridFillPage.openTheGridSelectorDropdownButton(), 'visible');
+            gridFillPage.steps.verifyOpenTheGridSelectorDropdownCollapsed();
+        });
+
+        it('When user clicks on  \'Open the grid selector\' dropdown then grid selector should be displayed and it should have 20 columns and 20 rows', () => {
+            gridFillPage.steps.expandOpenTheGridSelectorDropdown();
+            utilities.verifyElementVisibilityState(gridFillPage.gridInOpenTheGridSelectorDropdownContainer(), 'visible');
+            gridFillPage.steps.verifyGridSizeInGridLayoutSection(20, 20);
+        });
+
+        it('When \'Open the grid selector\' dropdown is expanded, then by default it should have 5 columns and 3 rows selected', () => {
+            gridFillPage.steps.verifySelectedRowsAndColumns(3, 5);
+        });
+
+        it('When user hovers over a cell in grid selector dropdown then it should be in interactive state', () => {
+            gridFillPage.steps.verifySelectedRowsAndColumnsInInteractiveState(4, 6);
+            gridFillPage.steps.collapseOpenTheGridSelectorDropdown();
+        });
+
+        it('\'Columns\' and \'Rows\' labels and their input stepper should be displayed and default the value for \'Columns\' and \'Rows\' should be set to 5 and 3', () => {
+            utilities.verifyInnerText(gridFillPage.columnsLabel(), 'Columns');
+            utilities.verifyElementVisibilityState(gridFillPage.columnsLabel(), 'visible');
+            utilities.verifyInnerText(gridFillPage.rowsLabel(), 'Rows');
+            utilities.verifyElementVisibilityState(gridFillPage.rowsLabel(), 'visible');
+            gridFillPage.steps.verifyColumnInputStepperIncreaseDecreaseButton();
+            gridFillPage.steps.verifyRowInputStepperIncreaseDecreaseButton();
+            gridFillPage.steps.verifyColumnsInputStepperCountInputFieldValue(5);
+            gridFillPage.steps.verifyRowsInputStepperCountInputFieldValue(3);
+        });
+
+        it('When user increases the number of columns in the column input stepper using the increase button, then the count of column input stepper and the number of columns in the Open selector grid should increase', () => {
+            gridFillPage.steps.increaseColumnsInputStepperCount(2);
+            gridFillPage.steps.verifyColumnsInputStepperCountInputFieldValue(7);
+            gridFillPage.steps.expandOpenTheGridSelectorDropdown();
+            gridFillPage.steps.verifySelectedRowsAndColumns(3, 7);
+            gridFillPage.steps.collapseOpenTheGridSelectorDropdown();
+        });
+
+        it('When user decreases the number of rows in the row input stepper using the decrease button, then the count of row input stepper and the number of rows in the grid displayed in Open selector should decrease', () => {
+            gridFillPage.steps.decreaseRowsInputStepperCount(1);
+            gridFillPage.steps.verifyRowsInputStepperCountInputFieldValue(2);
+            gridFillPage.steps.expandOpenTheGridSelectorDropdown();
+            gridFillPage.steps.verifySelectedRowsAndColumns(2, 7);
+            gridFillPage.steps.collapseOpenTheGridSelectorDropdown();
+        });
+
+        it('User should be able to edit the number of rows and columns by directly giving an input in the input steppers and the grid in grid selector dropdown should be updated as well should be updated', () => {
+            gridFillPage.steps.setRows(4);
+            gridFillPage.steps.setColumns(4);
+            gridFillPage.steps.expandOpenTheGridSelectorDropdown();
+            gridFillPage.steps.verifySelectedRowsAndColumns(4, 4);
+        });
+
+        it('When the user increases the number of rows and columns to 20 by directly giving an input in the input steppers, then the increase buttons should get disabled and rows and column value should be updated in open grid selector', () => {
+            gridFillPage.steps.setRows(20);
+            gridFillPage.steps.verifyRowsInputStepperCountInputFieldValue(20);
+            gridFillPage.steps.setColumns(20);
+            gridFillPage.steps.verifyColumnsInputStepperCountInputFieldValue(20);
+            gridFillPage.steps.verifyRowInputStepperIncreaseButtonIsDisabled();
+            gridFillPage.steps.verifyColumnInputStepperIncreaseButtonIsDisabled();
+            gridFillPage.steps.expandOpenTheGridSelectorDropdown();
+            gridFillPage.steps.verifySelectedRowsAndColumns(20, 20);
+            gridFillPage.steps.collapseOpenTheGridSelectorDropdown();
+        });
+
+        it('When the user decreases the number of rows and columns to 1 by directly giving an input in the input steppers, then the decrease buttons should get disabled and rows and column value should be updated in open grid selector', () => {
+            gridFillPage.steps.setRows(1);
+            gridFillPage.steps.verifyRowsInputStepperCountInputFieldValue(1);
+            gridFillPage.steps.setColumns(1);
+            gridFillPage.steps.verifyColumnsInputStepperCountInputFieldValue(1);
+            gridFillPage.steps.verifyRowInputStepperDecreaseButtonIsDisabled();
+            gridFillPage.steps.verifyColumnInputStepperDecreaseButtonIsDisabled();
+            gridFillPage.steps.expandOpenTheGridSelectorDropdown();
+            gridFillPage.steps.verifySelectedRowsAndColumns(1, 1);
+            gridFillPage.steps.collapseOpenTheGridSelectorDropdown();
+        });
+
+        it('When the user gives an input value lower than 1 i.e. 0 in the rows input stepper, then the columns value should be reset to 1', () => {
+            gridFillPage.steps.setColumns(0);
+            gridFillPage.steps.verifyColumnsInputStepperCountInputFieldValue(1);
+        });
+
+        it('When the user gives an input value greater than 20 in the rows input stepper, then the rows value should be reset to 20', () => {
+            gridFillPage.steps.setRows(0);
+            gridFillPage.steps.verifyRowsInputStepperCountInputFieldValue(1);
+        });
+
+        it('When user clicks on a cell in grid selector dropdown then that many rows and columns should get selected and values should get updated in columns input stepper and rows input stepper', () => {
+            gridFillPage.steps.expandOpenTheGridSelectorDropdown();
+            gridFillPage.steps.clickOnCellInOpenTheGridSelectorDropdown(3, 3);
+            gridFillPage.steps.expandOpenTheGridSelectorDropdown();
+            gridFillPage.steps.verifySelectedRowsAndColumns(3, 3);
+            gridFillPage.steps.collapseOpenTheGridSelectorDropdown();
+            gridFillPage.steps.verifyColumnsInputStepperCountInputFieldValue(3);
+            gridFillPage.steps.verifyRowsInputStepperCountInputFieldValue(3);
+        });
+
+        it('\'Cell height (px) and Cell width (px) labels and their input fields should be displayed and by default values should be set to 80px', () => {
+            utilities.verifyInnerText(gridFillPage.cellHeightLabel(), 'Cell height (px)');
+            utilities.verifyElementVisibilityState(gridFillPage.cellHeightLabel(), 'visible');
+            utilities.verifyInnerText(gridFillPage.cellWidthLabel(), 'Cell width (px)');
+            utilities.verifyElementVisibilityState(gridFillPage.cellWidthLabel(), 'visible');
+            gridFillPage.steps.verifyCellHeightInputField(80);
+            gridFillPage.steps.verifyCellWidthInputField(80);
+        });
+
+        it('User should be able to update cell height and cell width input field values', () => {
+            gridFillPage.steps.updateValueInCellHeightInputField(50);
+            gridFillPage.steps.verifyCellHeightInputField(50);
+            gridFillPage.steps.updateValueInCellWidthInputField(50);
+            gridFillPage.steps.verifyCellHeightInputField(50);
+        });
+
+        it('Make responsive for mobile label and checkbox should be displayed and by default checkbox should be checked', () => {
+            utilities.verifyInnerText(gridFillPage.makeResponsiveLabel(), 'Make responsive for mobile');
+            utilities.verifyElementVisibilityState(gridFillPage.makeResponsiveLabel(), 'visible');
+            gridFillPage.steps.verifyMakeResponsiveCheckboxChecked();
+        });
+
+        it('When \'Make responsive for mobile\' checkbox is checked and user enters value less than 44 in cell height input field then value should reset to 44', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxChecked();
+            gridFillPage.steps.updateValueInCellHeightInputField(20);
+            gridFillPage.steps.verifyCellHeightInputField(44);
+        });
+
+        it('When \'Make responsive for mobile\' checkbox is checked and user enters value less than 44 in cell width input field then value should reset to 44', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxChecked();
+            gridFillPage.steps.updateValueInCellWidthInputField(20);
+            gridFillPage.steps.verifyCellWidthInputField(44);
+        });
+
+        it('When \'Make responsive for mobile\' checkbox is checked and user enters value more than 200 in cell height input field then value should reset to 200', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxChecked();
+            gridFillPage.steps.updateValueInCellHeightInputField(250);
+            gridFillPage.steps.verifyCellHeightInputField(200);
+        });
+
+        it('When \'Make responsive for mobile\' checkbox is checked and user enters value more than 200 in cell width input field then value should reset to 200', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxChecked();
+            gridFillPage.steps.updateValueInCellWidthInputField(250);
+            gridFillPage.steps.verifyCellWidthInputField(200);
+        });
+
+        it('User should be able to uncheck Make responsive for mobile checkbox', () => {
+            gridFillPage.steps.uncheckMakeResponsiveCheckbox();
+            gridFillPage.steps.verifyMakeResponsiveCheckboxUnchecked();
+        });
+
+        it('When user unchecks \'Make responsive for mobile\' checkbox then values in cell height and cell width should remain unchanged', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxUnchecked();
+            gridFillPage.steps.verifyCellHeightInputField(200);
+            gridFillPage.steps.verifyCellWidthInputField(200);
+        });
+
+        it('When \'Make responsive for mobile\' checkbox is unchecked and user enters value less than 20 in cell height input field then value should reset to 20', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxUnchecked();
+            gridFillPage.steps.updateValueInCellHeightInputField(10);
+            gridFillPage.steps.verifyCellHeightInputField(20);
+        });
+
+        it('When \'Make responsive for mobile\' checkbox is unchecked and user enters value less than 20 in cell width input field then value should reset to 20', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxUnchecked();
+            gridFillPage.steps.updateValueInCellWidthInputField(10);
+            gridFillPage.steps.verifyCellWidthInputField(20);
+        });
+
+        it('When \'Make responsive for mobile\' checkbox is unchecked and user enters value more than 200 in cell height input field then value should reset to 200', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxUnchecked();
+            gridFillPage.steps.updateValueInCellHeightInputField(250);
+            gridFillPage.steps.verifyCellHeightInputField(200);
+        });
+
+        it('When \'Make responsive for mobile\' checkbox is unchecked and user enters value more than 200 in cell width input field then value should reset to 200', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxUnchecked();
+            gridFillPage.steps.updateValueInCellWidthInputField(250);
+            gridFillPage.steps.verifyCellWidthInputField(200);
+        });
+    });
+});

package/cypress/e2e/ILC/GridFill/gridLayoutEditTabFunctionality.js

@@ -0,0 +1,229 @@
+import { gridFillPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create item : Grid fill - Grid layout', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Grid selector and Columns & Rows input steppers - Customize layout section section and Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+        });
+
+        it('By default, 5 columns and 3 rows should be displayed in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.verifyRowsCountCustomizeLayout(3);
+            gridFillPage.steps.verifyColumnsCountCustomizeLayout(5);
+            gridFillPage.steps.verifyRowsCountSpecifyCorrectAnswer(3);
+            gridFillPage.steps.verifyColumnsCountSpecifyCorrectAnswer(5);
+        });
+
+        it('When user updates the numbers of rows and columns in open the grid selector popup then numbers of rows and columns should be updated in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.expandOpenTheGridSelectorDropdown();
+            gridFillPage.steps.clickOnCellInOpenTheGridSelectorDropdown(2, 2);
+            gridFillPage.steps.verifyRowsCountCustomizeLayout(2);
+            gridFillPage.steps.verifyColumnsCountCustomizeLayout(2);
+            gridFillPage.steps.verifyRowsCountSpecifyCorrectAnswer(2);
+            gridFillPage.steps.verifyColumnsCountSpecifyCorrectAnswer(2);
+        });
+
+        it('When user increases the number of columns in the column input stepper using the increase button, then the number of columns in the grid displayed in customize layout section and specify correct answer section should increase', () => {
+            gridFillPage.steps.increaseColumnsInputStepperCount(1);
+            gridFillPage.steps.verifyColumnsCountCustomizeLayout(3);
+            gridFillPage.steps.verifyColumnsCountSpecifyCorrectAnswer(3);
+        });
+
+        it('When user decreases the number of rows in the row input stepper using the decrease button, then the number of rows in the grid displayed in customize layout section and specify correct answer section should decrease', () => {
+            gridFillPage.steps.decreaseRowsInputStepperCount(1);
+            gridFillPage.steps.verifyRowsCountCustomizeLayout(1);
+            gridFillPage.steps.verifyRowsCountSpecifyCorrectAnswer(1);
+        });
+
+        it('When user changes the number of rows and columns by directly giving an input in rows input steppers, then the added number of rows and columns should be reflected in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.setRows(5);
+            gridFillPage.steps.setColumns(5);
+            gridFillPage.steps.verifyRowsCountCustomizeLayout(5);
+            gridFillPage.steps.verifyColumnsCountCustomizeLayout(5);
+            gridFillPage.steps.verifyRowsCountSpecifyCorrectAnswer(5);
+            gridFillPage.steps.verifyColumnsCountSpecifyCorrectAnswer(5);
+        });
+
+        it('When there are less than 11 columns in the grid, then the left and right arrow navigation button should not be displayed in the Customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.verifyColumnsCountCustomizeLayout(5);
+            gridFillPage.steps.verifyPaginationButtonsNotExistCustomizeLayoutSection();
+            gridFillPage.steps.verifyPaginationButtonsNotExistSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user has added 11 columns in the grid, then the left, right arrow navigation button and pagination text \'Displaying 1-10 of 11\' should be displayed in the Customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.setColumns(11);
+            gridFillPage.steps.verifyColumnsCountCustomizeLayout(11);
+            gridFillPage.steps.verifyPaginationButtonsVisibleCustomizeLayoutSection();
+            utilities.verifyInnerText(gridFillPage.paginationTextCustomizeLayoutSection(), 'Displaying 1-10 of 11');
+            gridFillPage.steps.verifyColumnsCountSpecifyCorrectAnswer(11);
+            gridFillPage.steps.verifyPaginationButtonsVisibleSpecifyCorrectAnswerSection();
+            utilities.verifyInnerText(gridFillPage.paginationTextSpecifyCorrectAnswerSection(), 'Displaying 1-10 of 11');
+        });
+
+        it('When user adds columns more than 11, then pagination text should be updated accordingly in the Customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.setColumns(12);
+            gridFillPage.steps.verifyColumnsCountCustomizeLayout(12);
+            gridFillPage.steps.verifyPaginationButtonsVisibleCustomizeLayoutSection();
+            utilities.verifyInnerText(gridFillPage.paginationTextCustomizeLayoutSection(), 'Displaying 1-10 of 12');
+            gridFillPage.steps.verifyPaginationButtonsVisibleSpecifyCorrectAnswerSection();
+            utilities.verifyInnerText(gridFillPage.paginationTextSpecifyCorrectAnswerSection(), 'Displaying 1-10 of 12');
+        });
+
+        it('By default the left arrow navigation button should be disabled and right arrow navigation button should be enabled in the Customize layout section', () => {
+            utilities.verifyElementDisabled(gridFillPage.previousPaginationButtonCustomizeLayout());
+            utilities.verifyElementNotDisabled(gridFillPage.nextPaginationButtonCustomizeLayout());
+        });
+
+        it('By default the left arrow navigation button should be disabled and right arrow navigation button should be enabled in specify correct answer section', () => {
+            utilities.verifyElementDisabled(gridFillPage.previousPaginationButtonSpecifyCorrectAnswerSection());
+            utilities.verifyElementNotDisabled(gridFillPage.nextPaginationButtonSpecifyCorrectAnswerSection());
+        });
+
+        it('When user is on second page, then both left arrow navigation button and right arrow navigation button button should be in enabled state in the Customize layout section', () => {
+            gridFillPage.steps.navigateToNextPageCustomizeLayoutSection();
+            utilities.verifyElementNotDisabled(gridFillPage.nextPaginationButtonCustomizeLayout());
+            utilities.verifyElementNotDisabled(gridFillPage.previousPaginationButtonCustomizeLayout());
+        });
+
+        it('When user is on second page, then both left arrow navigation button and right arrow navigation button button should be in enabled state in specify correct answer section', () => {
+            gridFillPage.steps.navigateToNextPageSpecifyCorrectAnswerSection();
+            utilities.verifyElementNotDisabled(gridFillPage.previousPaginationButtonSpecifyCorrectAnswerSection());
+            utilities.verifyElementNotDisabled(gridFillPage.nextPaginationButtonSpecifyCorrectAnswerSection());
+        });
+
+        it('When user is on last page then left arrow navigation button button should be in enabled state and right arrow navigation button button should be in disabled state in the Customize layout section ', () => {
+            gridFillPage.steps.navigateToNextPageCustomizeLayoutSection();
+            utilities.verifyElementNotDisabled(gridFillPage.nextPaginationButtonCustomizeLayout());
+            utilities.verifyElementDisabled(gridFillPage.previousPaginationButtonCustomizeLayout());
+        });
+
+        it('When user is on last page then left arrow navigation button button should be in enabled state and right arrow navigation button button should be in disabled state in specify correct answer section', () => {
+            gridFillPage.steps.navigateToNextPageSpecifyCorrectAnswerSection();
+            utilities.verifyElementNotDisabled(gridFillPage.previousPaginationButtonSpecifyCorrectAnswerSection());
+            utilities.verifyElementDisabled(gridFillPage.nextPaginationButtonSpecifyCorrectAnswerSection());
+        });
+
+        it('When user selects 1 row and 1 column, then only one cell should be displayed in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.setRows(1);
+            gridFillPage.steps.setColumns(1);
+            gridFillPage.steps.verifyRowsCountCustomizeLayout(1);
+            gridFillPage.steps.verifyColumnsCountCustomizeLayout(1);
+            gridFillPage.steps.verifyRowsCountSpecifyCorrectAnswer(1);
+            gridFillPage.steps.verifyColumnsCountSpecifyCorrectAnswer(1);
+        });
+
+        it('When user selects 20 columns and 20 rows then in customize layout section, grid with 20 rows and 20 columns should be displayed and specify correct answer section', () => {
+            gridFillPage.steps.setRows(20);
+            gridFillPage.steps.setColumns(20);
+            gridFillPage.steps.verifyRowsCountCustomizeLayout(20);
+            gridFillPage.steps.verifyColumnsCountCustomizeLayout(20);
+            gridFillPage.steps.verifyRowsCountSpecifyCorrectAnswer(20);
+            gridFillPage.steps.verifyColumnsCountSpecifyCorrectAnswer(20);
+        });
+    });
+
+    describe('Cell height and Cell width : Customize layout section and Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+        });
+
+        it('By default, cell height and cell width should be 80 px and 80 px respectively in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.verifyCellHeightInCustomizeLayoutSection(80);
+            gridFillPage.steps.verifyCellWidthInCustomizeLayoutSection(80);
+            gridFillPage.steps.verifyCellHeightInSpecifyCorrectAnswerSection(80);
+            gridFillPage.steps.verifyCellWidthInSpecifyCorrectAnswerSection(80);
+        });
+
+        it('When user updates cell height and cell width, then cell height and cell width should be updated in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.updateValueInCellHeightInputField(50);
+            gridFillPage.steps.updateValueInCellWidthInputField(50);
+            gridFillPage.steps.verifyCellHeightInCustomizeLayoutSection(50);
+            gridFillPage.steps.verifyCellWidthInCustomizeLayoutSection(50);
+            gridFillPage.steps.verifyCellHeightInSpecifyCorrectAnswerSection(50);
+            gridFillPage.steps.verifyCellWidthInSpecifyCorrectAnswerSection(50);
+        });
+
+        it('When \'Make responsive\' checkbox is checked and user enters value less than 44 in cell height input field then cell height should be updated in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxChecked();
+            gridFillPage.steps.updateValueInCellHeightInputField(20);
+            gridFillPage.steps.verifyCellHeightInputField(44);
+            gridFillPage.steps.verifyCellHeightInCustomizeLayoutSection(44);
+            gridFillPage.steps.verifyCellHeightInSpecifyCorrectAnswerSection(44);
+        });
+
+        it('When \'Make responsive\' checkbox is checked and user enters value less than 44 in cell width input field then value should reset to 44 in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxChecked();
+            gridFillPage.steps.updateValueInCellWidthInputField(20);
+            gridFillPage.steps.verifyCellWidthInputField(44);
+            gridFillPage.steps.verifyCellWidthInCustomizeLayoutSection(44);
+            gridFillPage.steps.verifyCellWidthInSpecifyCorrectAnswerSection(44);
+        });
+
+        it('When \'Make responsive\' checkbox is checked and user enters value more than 200 in cell height input field then value should reset to 200 in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxChecked();
+            gridFillPage.steps.updateValueInCellHeightInputField(250);
+            gridFillPage.steps.verifyCellHeightInputField(200);
+            gridFillPage.steps.verifyCellHeightInCustomizeLayoutSection(200);
+            gridFillPage.steps.verifyCellHeightInSpecifyCorrectAnswerSection(200);
+        });
+
+        it('When \'Make responsive\' checkbox is checked and user enters value more than 200 in cell width input field then value should reset to 200 in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxChecked();
+            gridFillPage.steps.updateValueInCellWidthInputField(250);
+            gridFillPage.steps.verifyCellWidthInputField(200);
+            gridFillPage.steps.verifyCellWidthInCustomizeLayoutSection(200);
+            gridFillPage.steps.verifyCellWidthInSpecifyCorrectAnswerSection(200);
+        });
+
+        it('When user unchecks \'Make responsive\' checkbox then values in cell height and cell width should remain unchanged in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.uncheckMakeResponsiveCheckbox();
+            gridFillPage.steps.verifyCellHeightInCustomizeLayoutSection(200);
+            gridFillPage.steps.verifyCellWidthInCustomizeLayoutSection(200);
+            gridFillPage.steps.verifyCellHeightInSpecifyCorrectAnswerSection(200);
+            gridFillPage.steps.verifyCellWidthInSpecifyCorrectAnswerSection(200);
+        });
+
+        it('When \'Make responsive\' checkbox is unchecked and user enters value less than 20 in cell height input field then value should reset to 20 in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxUnchecked();
+            gridFillPage.steps.updateValueInCellHeightInputField(10);
+            gridFillPage.steps.verifyCellHeightInputField(20);
+            gridFillPage.steps.verifyCellHeightInCustomizeLayoutSection(20);
+            gridFillPage.steps.verifyCellHeightInSpecifyCorrectAnswerSection(20);
+        });
+
+        it('When \'Make responsive\' checkbox is unchecked and user enters value less than 20 in cell width input field then value should reset to 20 in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxUnchecked();
+            gridFillPage.steps.updateValueInCellWidthInputField(10);
+            gridFillPage.steps.verifyCellWidthInputField(20);
+            gridFillPage.steps.verifyCellWidthInCustomizeLayoutSection(20);
+            gridFillPage.steps.verifyCellWidthInSpecifyCorrectAnswerSection(20);
+        });
+
+        it('When \'Make responsive\' checkbox is unchecked and user enters value more than 200 in cell height input field then value should reset to 200 in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxUnchecked();
+            gridFillPage.steps.updateValueInCellHeightInputField(250);
+            gridFillPage.steps.verifyCellHeightInputField(200);
+            gridFillPage.steps.verifyCellHeightInCustomizeLayoutSection(200);
+            gridFillPage.steps.verifyCellHeightInSpecifyCorrectAnswerSection(200);
+        });
+
+        it('When \'Make responsive\' checkbox is unchecked and user enters value more than 200 in cell width input field then value should reset to 200 in customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.verifyMakeResponsiveCheckboxUnchecked();
+            gridFillPage.steps.updateValueInCellWidthInputField(250);
+            gridFillPage.steps.verifyCellWidthInputField(200);
+            gridFillPage.steps.verifyCellWidthInCustomizeLayoutSection(200);
+            gridFillPage.steps.verifyCellWidthInSpecifyCorrectAnswerSection(200);
+        });
+    });
+});