itemengine-cypress-automation 1.0.51 → 1.0.63

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdown/fillInTheGapsOverImageDropdownAdditionalSettingsResponseAccordions.js

@@ -0,0 +1,366 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionsForResponse1 = ['Flower', 'Petal', 'Stem', 'Branch'];
+const pointerDropdownList = ['Left', 'Right', 'Top', 'Bottom', 'Top left', 'Top right', 'None'];
+
+describe('Fill In the gaps over image - dropdown - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings : \'Advanced settings for individual response area\' section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        it('When the user has not added any response container, response accordion should not be displayed', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseAccordionWrapper(), 'notExist');
+        });
+
+        it('When the user adds a response container, \'Advanced settings for individual response area\' label along with a response accordion should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.advanceSettingForIndividualResponsesLabel(), 'Advanced settings for individual response area');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.advanceSettingForIndividualResponsesLabel(), 'visible');
+        });
+
+        it('By default the \'Response #\' accordion should be collapsed and by clicking on the \'Response #\' accordion, user should be able to expand the accordion', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAccordionCollapsedState(0);
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseAccordion(0);
+        });
+
+        it('\'Placeholder text\' label and input field should be displayed and by default, the input field should be empty', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderTextLabelAndInputFieldResponseAccordion();
+        });
+
+        it('\'Pointer\' label and dropdown should be displayed and in \'Type of answer input\' dropdown \'Left\' option should be selected by default', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyPointerLabelAndDropdownResponseAccordion();
+        });
+
+        it('\'Height (px)\' and \'Width (px)\' labels and input fields should be displayed and by default, the input fields should be empty', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyHeightAndWidthLabelAndInputFieldResponseAccordion();
+        });
+
+        //Note: The CSS of labels and dropdowns are being verified in their respective describes, so not verifying them here again
+
+        it('Accessibility of \'Advanced settings for individual response area\' section contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.responseAccordionWrapper());
+        });
+    });
+
+    describe('Response accordions: Placeholder text : Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseAccordion(0);
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseAccordion(1);
+        });
+
+        it('When the user has not set placeholder text in the Response accordion then placeholder should not be displayed in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdownNotExists(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdownNotExists(1);
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Placeholder text');
+
+        it('When the user has set a placeholder text in either response accordion then a placeholder text should be displayed for the respective response in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Enter response here');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdown(0, 'Enter response here');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdownNotExists(1);
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Placeholder text');
+
+        it('CSS of Custom label', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseAccordionCustomLabel(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.medium,
+                'border': `1px solid ${css.color.primaryBtnBorder}`
+            });
+        });
+
+        it('When the user removes the placeholder text from the individual responses, then the placeholder attribute of the dropdowns should get updated accordingly in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.clearPlaceholderTextInResponseAccordion(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdownNotExists(0);
+        });
+
+        it('When the user has set placeholder text in the individual response areas, then it should override the placeholder text set in the \'Advanced settings for all response areas\' in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldPlaceholderTextGlobal('Global placeholder');
+            fillInTheGapsOverImageDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Enter response here');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdown(0, 'Enter response here');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdown(1, 'Global placeholder');
+        });
+
+        it('Accessibility of \'Placeholder text\' in \'Set correct answer\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.responseDropdownWrapperSetCorrectAnswerSection());
+        });
+
+        it('When the user selects and option in dropdown, then the placeholder text should disappear', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, optionsForResponse1[0]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdownNotExists(0);
+        });
+    });
+
+    describe('Response accordions: Placeholder text : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseAccordion(0)
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseAccordion(1)
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set placeholder text in the Response accordion then placeholder should not be displayed in preview tab dropdowns', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInPreviewTabDropdownNotExists(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInPreviewTabDropdownNotExists(1);
+        });
+
+        it('When the user has set a placeholder text in either individual response accordion a placeholder text should be displayed for the respective response in preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Enter response here');
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInPreviewTabDropdown(0, 'Enter response here');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInPreviewTabDropdownNotExists(1);
+        });
+
+        it('When the user removes the placeholder text from individual responses the Placeholders should get updated accordingly for both the responses in preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.clearPlaceholderTextInResponseAccordion(0);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInPreviewTabDropdownNotExists(0);
+        });
+
+        it('When the user has set placeholder text in the individual response area, then it should override the placeholder text set in the \'Advanced settings for all response areas\' in the preview tab dropdowns', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldPlaceholderTextGlobal('Global placeholder');
+            fillInTheGapsOverImageDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Enter response here');
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInPreviewTabDropdown(0, 'Enter response here');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInPreviewTabDropdown(1, 'Global placeholder');
+        });
+
+        it('Accessibility of \'Placeholder text\' in preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.responseFieldPreviewTab().parents('.response-input-field'))
+        });
+
+        it('When the user selects and option in dropdown, then the placeholder text should disappear', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, optionsForResponse1[0]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInPreviewTabDropdownNotExists(0);
+        });
+    });
+
+    describe('Response accordions: Pointer dropdown contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseAccordion(0);
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyPointerDropdownContentsResponseAccordion();
+    });
+
+    describe('Response accordions: Pointer dropdown functionality: Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseAccordion(0);
+        });
+
+        it('When the user has not updated the \'Pointer\' dropdown in the Response accordion then pointer should be displayed according to the global \'Pointer\' dropdown option \'Image\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerPointerInImageSection(0, 0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerPointerInImageSection(1, 0);
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Pointer');
+
+        pointerDropdownList.forEach((dropdownOption, dropdownOptionIndex) => {
+            it(`When the user selects \'${dropdownOption}\' option from the \'Pointer\' dropdown, then pointer position of the respective response container should change to ${dropdownOption} in the \'Image\' section`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.selectOptionFromPointerDropdownResponseAccordion(0, dropdownOption);
+                fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerPointerInImageSection(0, dropdownOptionIndex);
+                cy.log('Checking pointer of response container 2 is according to the Global pointer dropdown option')
+                fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerPointerInImageSection(1, 0);
+            });
+        });
+
+        it(`When user selects ${pointerDropdownList[6]} then the pointer should not be displayed in the \'Image\' section`, () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseContainerPointer(), 'hidden');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Placeholder text');
+
+        it('When the user selects response pointer dropdown option similar to the global pointer dropdown option, then the Custom label should not be displayed on response accordion', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromPointerDropdownGlobal(pointerDropdownList[6]);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseAccordionCustomLabel(), 'notExist');
+        });
+    });
+
+    //TODO: Script for preview tab will be added once https://redmine.zeuslearning.com/issues/542815 is resolved
+
+    describe('Response accordions: Height and Width : Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseAccordion(0);
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseAccordion(1);
+        });
+
+        it('When the user has not set \'Height\' and \'Width\' for dropdowns then the default dimension of the dropdown in the \'Set correct answer\' section should be (120x34)px', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyHeightOfResponseDropdownInSetCorrectAnswerSection(0, 34);
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthOfResponseDropdownInSetCorrectAnswerSection(0, 120);
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Height\' for the dropdown then the height of the dropdown should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setHeightInResponseAccordion(0, 100);
+            fillInTheGapsOverImageDropdownPage.steps.verifyHeightOfResponseDropdownInSetCorrectAnswerSection(0, 100);
+            fillInTheGapsOverImageDropdownPage.steps.verifyHeightOfResponseDropdownInSetCorrectAnswerSection(1, 34);
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Width\' for the dropdown then the Width of the dropdown should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setWidthInResponseAccordion(0, 100);
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthOfResponseDropdownInSetCorrectAnswerSection(0, 100);
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthOfResponseDropdownInSetCorrectAnswerSection(1, 120);
+        });
+
+        it('When the user has set width below 80px then the width should remain 80px in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setWidthInResponseAccordion(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthOfResponseDropdownInSetCorrectAnswerSection(0, 80);
+        });
+
+        it('When the user has set width above 400px then the width should remain 400px in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setWidthInResponseAccordion(0, 800);
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthOfResponseDropdownInSetCorrectAnswerSection(0, 400);
+        });
+
+        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', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldWidthGlobal(250);
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldHeightGlobal(180);
+            fillInTheGapsOverImageDropdownPage.steps.setWidthInResponseAccordion(0, 175);
+            fillInTheGapsOverImageDropdownPage.steps.setHeightInResponseAccordion(0, 120);
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthOfResponseDropdownInSetCorrectAnswerSection(0, 175);
+            fillInTheGapsOverImageDropdownPage.steps.verifyHeightOfResponseDropdownInSetCorrectAnswerSection(0, 120);
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthOfResponseDropdownInSetCorrectAnswerSection(1, 250);
+            fillInTheGapsOverImageDropdownPage.steps.verifyHeightOfResponseDropdownInSetCorrectAnswerSection(1, 180);
+        });
+    });
+
+    describe('Response accordions: Height and Width : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseAccordion(0);
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseAccordion(1);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set \'Height\' and \'Width\' for the response accordion then the default dimension of the dropdown in the preview tab should be (120x34)px', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownHeightPreviewTab(0, 34)
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownWidthPreviewTab(0, 120);
+        });
+
+        it('When the user has set \'Height\' for the dropdown then the height of the preview tab dropdown should get updated accordingly', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setHeightInResponseAccordion(0, 100);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownHeightPreviewTab(0, 100);
+        });
+
+        it('When the user has set \'Width\' for the dropdown then the width of the preview tab dropdown should get updated accordingly', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setWidthInResponseAccordion(0, 100);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownWidthPreviewTab(0, 100);
+        });
+
+        it('When the user has set width below 80px then the width of the preview tab dropdown should remain 80px', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setWidthInResponseAccordion(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownWidthPreviewTab(0, 80);
+        });
+
+        it('When the user has set width above 400px then the width of the preview tab dropdown should remain 400px', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setWidthInResponseAccordion(0, 800);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownWidthPreviewTab(0, 400);
+        });
+
+        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\' for the preview tab dropdowns', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldWidthGlobal(250);
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldHeightGlobal(180);
+            fillInTheGapsOverImageDropdownPage.steps.setWidthInResponseAccordion(0, 175);
+            fillInTheGapsOverImageDropdownPage.steps.setHeightInResponseAccordion(0, 120);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownWidthPreviewTab(0, 175);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownHeightPreviewTab(0, 120);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownWidthPreviewTab(1, 250);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownHeightPreviewTab(1, 180);
+        });
+    });
+});