itemengine-cypress-automation 1.0.29 → 1.0.30

package/cypress/e2e/ILC/FillInTheGapsDragAndDrop/fillInTheGapsDragAndDropAdditionalSettings.js

@@ -16,18 +16,6 @@ describe('Fill In the Gaps Additional settings and Responses accordion', () => {
         fillInTheGapsDragAndDropPage.tests.verifyAdditonalSettingsAccordionProperties();
     });
 
-    describe('Additional Settings: Advanced settings for all Response Areas', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
-            cy.barsPreLoaderWait();
-            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyAdvanceSettingsForAllResponsesLabelAndCSS();
-
-    });
-
     describe('Additional Settings: Height and Width', () => {
         abortEarlySetup();
         before(() => {
@@ -194,286 +182,6 @@ describe('Fill In the Gaps Additional settings and Responses accordion', () => {
         fillInTheGapsDragAndDropPage.tests.verifyAdditionalSettingsResponseAccordionLabelCSSAndA11y();
     });
 
-    describe('Response Accordions: ARIA label', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
-            cy.barsPreLoaderWait();
-            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
-            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(0);
-            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(1);
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyDefaultStateOfAriaLabelInputFieldInResponseAccordionAndCSS();
-
-        //Note: a11y covered in Additional Settings: Response accordion
-
-        //ARIA label test cases for set correct answer section
-        it('When the user has not set \'ARIA label\' input field then the default \'ARIA label\' should be present for the \'Set correct answer\' section response field', () => {
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'aria-label', 'Response Area');
-            };
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('ARIA label');
-
-        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the \'Set correct answer\' section response field and for the other response field, value of the aria-label should remain the same', () => {
-            fillInTheGapsDragAndDropPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria Label');
-            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                .eq(0)
-                .should('have.attr', 'aria-label', 'Custom Aria Label');
-            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                .eq(1)
-                .should('have.attr', 'aria-label', 'Response Area');
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelVisibleOnResponseAccordion('ARIA label');
-
-        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelOnResponseAccordionCSS();
-
-        it('Accessibility of input field in \'Set correct answer\' section when custom \'ARIA label\' is set and Custom label', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea())
-            cy.checkAccessibility(fillInTheGapsDragAndDropPage.responseAccordionCustomLabel())
-        });
-
-        it('When the user clears the set value in the \'ARIA label\' input field, then the default \'ARIA label\' should be present for the response fields in the \'Set correct answer\' section', () => {
-            fillInTheGapsDragAndDropPage.responseAccordionWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDragAndDropPage.ariaLabelInputField()
-                        .clear()
-                        .should('have.value', '')
-                        .blur();
-                });
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'aria-label', 'Response Area');
-            };
-        });
-
-        //ARIA label test cases for preview tab
-        it('When the user has not set \'ARIA label\' input field then in the preview tab default \'ARIA label\' should be present for the response field in the preview tab', () => {
-            cy.log('Pre step: Switch to Preview tab')
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'aria-label', 'Response Area');
-            };
-        });
-
-        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the response field in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria Label');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                .eq(0)
-                .should('have.attr', 'aria-label', 'Custom Aria Label');
-            fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                .eq(1)
-                .should('have.attr', 'aria-label', 'Response Area');
-        });
-
-        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsDragAndDropPage.previewTabResponseArea())
-        });
-
-        it('When the user clears the set value in the \'ARIA label\' input field, then the default \'ARIA label\' should be present for the response field in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.responseAccordionWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDragAndDropPage.ariaLabelInputField()
-                        .clear()
-                        .should('have.value', '');
-                });
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'aria-label', 'Response Area');
-            };
-        });
-    });
-
-    describe('Response Accordions: Height and Width', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
-            cy.barsPreLoaderWait();
-            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
-            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(0);
-            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(1);
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyDefaultStateOfHeightAndWidthInputFieldInResponseAccordionAndCSS();
-
-        //Note: a11y covered in Additional Settings: Response accordion
-
-        //TODO: We will need to revisit below case as it will fail for mobile view
-        it('When the user has not set \'Height\' and \'Width\' for response fields then the default dimension of the response field in the \'Set correct answer\' section response fields should be (197x46)px', () => {
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'height', '46.000')
-                    .and('have.attr', 'width', '197.000px');
-            };
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Height and Width');
-
-        it('When the user has set \'Height\' for the response field then the Height of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
-            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '100');
-            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                .eq(0)
-                .should('have.attr', 'height', '100.000');
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Height and Width');
-
-        it('When the user has set \'Width\' for the response field then the Width of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
-            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '100');
-            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                .eq(0)
-                .should('have.attr', 'width', '100.000px');
-        });
-
-        it('When the user has set width below 80px then the width should remain 80px in the \'Set correct answer\' section', () => {
-            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '20');
-            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                .eq(0)
-                .should('have.attr', 'width', '80.000px');
-        });
-
-        it('When the user has set width above 400px then the width should remain 400px in the \'Set correct answer\' section', () => {
-            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '800');
-            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                .eq(0)
-                .should('have.attr', 'width', '400.000px');
-        });
-
-        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' in the \'Set correct answer\' section', () => {
-            fillInTheGapsDragAndDropPage.widthInputField()
-                .clear()
-                .type('250')
-                .should('have.value', '250');
-            fillInTheGapsDragAndDropPage.heightInputField()
-                .clear()
-                .type('180')
-                .should('have.value', '180');
-            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '175');
-            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '120');
-            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                .eq(0)
-                .should('have.attr', 'width', '175.000px')
-                .and('have.attr', 'height', '120.000');
-            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                .eq(1)
-                .should('have.attr', 'width', '250.000px')
-                .and('have.attr', 'height', '180.000');
-        });
-
-        //Height and width test cases for preview tab
-        //TODO: We will need to revisit below case as it will fail for mobile view
-        it('When the user has not set \'Height\' and \'Width\' for the response accordion then the default dimension of the response field in the preview tab response field should be (197x46)px', () => {
-            cy.log('Pre step: clearing the set values of height and width to bring back the dimensions of the response field to default dimensions')
-            fillInTheGapsDragAndDropPage.widthInputField()
-                .clear()
-                .should('have.value', '');
-            fillInTheGapsDragAndDropPage.heightInputField()
-                .clear()
-                .should('have.value', '');
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.responseAccordionWrapper()
-                    .eq(index)
-                    .within(() => {
-                        fillInTheGapsDragAndDropPage.heightInputField()
-                            .clear()
-                            .should('have.value', '');
-                        fillInTheGapsDragAndDropPage.widthInputField()
-                            .clear()
-                            .should('have.value', '');
-                    });
-            };
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'height', '46.000')
-                    .and('have.attr', 'width', '197.000px');
-            };
-        });
-
-        it('When the user has set \'Height\' for the response field then the height of the preview tab response field should get updated accordingly in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '100');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                .eq(0)
-                .should('have.attr', 'height', '100.000');
-        });
-
-        it('When the user has set \'Width\' for the response field then the width of the preview tab response field should get updated accordingly in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '100');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                .eq(0)
-                .should('have.attr', 'width', '100.000px');
-        });
-
-        it('When the user has set width below 80px then the width should remain 80px in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '20');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                .eq(0)
-                .should('have.attr', 'width', '80.000px');
-        });
-
-        it('When the user has set width above 400px then the width should remain 400px in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '800');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                .eq(0)
-                .should('have.attr', 'width', '400.000px');
-        });
-
-        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.widthInputField()
-                .clear()
-                .type('250')
-                .should('have.value', '250');
-            fillInTheGapsDragAndDropPage.heightInputField()
-                .clear()
-                .type('180')
-                .should('have.value', '180');
-            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '175');
-            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '120');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                .eq(0)
-                .should('have.attr', 'width', '175.000px')
-                .and('have.attr', 'height', '120.000');
-            fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                .eq(1)
-                .should('have.attr', 'width', '250.000px')
-                .and('have.attr', 'height', '180.000')
-        });
-    });
-
     describe('Additional Settings: Check Answer', () => {
         abortEarlySetup();
         before(() => {

package/cypress/e2e/ILC/FillInTheGapsDragAndDrop/fillInTheGapsDragAndDropAdditionalSettingsResponseAccordion.js

@@ -0,0 +1,299 @@
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Fill In the Gaps Additional settings and Responses accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings: Advanced settings for all Response Areas', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAdvanceSettingsForAllResponsesLabelAndCSS();
+    });
+
+    describe('Response Accordions: ARIA label', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
+            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(0);
+            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(1);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultStateOfAriaLabelInputFieldInResponseAccordionAndCSS();
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        //ARIA label test cases for set correct answer section
+        it('When the user has not set \'ARIA label\' input field then the default \'ARIA label\' should be present for the \'Set correct answer\' section response field', () => {
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'aria-label', 'Response Area');
+            };
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('ARIA label');
+
+        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the \'Set correct answer\' section response field and for the other response field, value of the aria-label should remain the same', () => {
+            fillInTheGapsDragAndDropPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria Label');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'aria-label', 'Custom Aria Label');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(1)
+                .should('have.attr', 'aria-label', 'Response Area');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelVisibleOnResponseAccordion('ARIA label');
+
+        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelOnResponseAccordionCSS();
+
+        it('Accessibility of input field in \'Set correct answer\' section when custom \'ARIA label\' is set and Custom label', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea())
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.responseAccordionCustomLabel())
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default \'ARIA label\' should be present for the response fields in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.ariaLabelInputField()
+                        .clear()
+                        .should('have.value', '')
+                        .blur();
+                });
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'aria-label', 'Response Area');
+            };
+        });
+
+        //ARIA label test cases for preview tab
+        it('When the user has not set \'ARIA label\' input field then in the preview tab default \'ARIA label\' should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Preview tab')
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'aria-label', 'Response Area');
+            };
+        });
+
+        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria Label');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'aria-label', 'Custom Aria Label');
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(1)
+                .should('have.attr', 'aria-label', 'Response Area');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.previewTabResponseArea())
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default \'ARIA label\' should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.ariaLabelInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'aria-label', 'Response Area');
+            };
+        });
+    });
+
+    describe('Response Accordions: Height and Width', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
+            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(0);
+            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(1);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultStateOfHeightAndWidthInputFieldInResponseAccordionAndCSS();
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the user has not set \'Height\' and \'Width\' for response fields then the default dimension of the response field in the \'Set correct answer\' section response fields should be (197x46)px', () => {
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'height', '46.000')
+                    .and('have.attr', 'width', '197.000px');
+            };
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Height\' for the response field then the Height of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '100');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'height', '100.000');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Width\' for the response field then the Width of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '100');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '100.000px');
+        });
+
+        it('When the user has set width below 80px then the width should remain 80px in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '20');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '80.000px');
+        });
+
+        it('When the user has set width above 400px then the width should remain 400px in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '800');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '400.000px');
+        });
+
+        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .clear()
+                .type('250')
+                .should('have.value', '250');
+            fillInTheGapsDragAndDropPage.heightInputField()
+                .clear()
+                .type('180')
+                .should('have.value', '180');
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '175');
+            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '120');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '175.000px')
+                .and('have.attr', 'height', '120.000');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(1)
+                .should('have.attr', 'width', '250.000px')
+                .and('have.attr', 'height', '180.000');
+        });
+
+        //Height and width test cases for preview tab
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the user has not set \'Height\' and \'Width\' for the response accordion then the default dimension of the response field in the preview tab response field should be (197x46)px', () => {
+            cy.log('Pre step: clearing the set values of height and width to bring back the dimensions of the response field to default dimensions')
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDragAndDropPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.responseAccordionWrapper()
+                    .eq(index)
+                    .within(() => {
+                        fillInTheGapsDragAndDropPage.heightInputField()
+                            .clear()
+                            .should('have.value', '');
+                        fillInTheGapsDragAndDropPage.widthInputField()
+                            .clear()
+                            .should('have.value', '');
+                    });
+            };
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'height', '46.000')
+                    .and('have.attr', 'width', '197.000px');
+            };
+        });
+
+        it('When the user has set \'Height\' for the response field then the height of the preview tab response field should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '100');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'height', '100.000');
+        });
+
+        it('When the user has set \'Width\' for the response field then the width of the preview tab response field should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '100');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '100.000px');
+        });
+
+        it('When the user has set width below 80px then the width should remain 80px in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '20');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '80.000px');
+        });
+
+        it('When the user has set width above 400px then the width should remain 400px in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '800');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '400.000px');
+        });
+
+        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .clear()
+                .type('250')
+                .should('have.value', '250');
+            fillInTheGapsDragAndDropPage.heightInputField()
+                .clear()
+                .type('180')
+                .should('have.value', '180');
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '175');
+            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '120');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '175.000px')
+                .and('have.attr', 'height', '120.000');
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(1)
+                .should('have.attr', 'width', '250.000px')
+                .and('have.attr', 'height', '180.000')
+        });
+    });
+});