itemengine-cypress-automation 1.0.78 → 1.0.80

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

@@ -1,356 +0,0 @@
-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 accordion', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
-            cy.barsPreLoaderWait();
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyAdditonalSettingsAccordionProperties();
-    });
-
-    describe('Additional Settings: Height and Width', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
-            cy.barsPreLoaderWait();
-            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyHeightAndWidthLabelInputFieldWithCSSAnda11y()
-
-        //Height and width test cases for set correct answer section response fields
-        //TODO: We will need to revisit below case as it will fail for mobile view
-        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response field should be (197x46)px in the \'Set correct answer\' section response field', () => {
-            fillInTheGapsDragAndDropPage.heightInputField()
-                .should('have.value', '');
-            fillInTheGapsDragAndDropPage.widthInputField()
-                .should('have.value', '');
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'height', '46.000')
-                    .and('have.attr', 'width', '197.000px');
-            };
-        });
-
-        it('When the user adds \'Height\' for the response field then the height of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
-            fillInTheGapsDragAndDropPage.heightInputField()
-                .type('100')
-                .should('have.value', '100')
-                .blur();
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'height', '100.000')
-            };
-        });
-
-        it('When the user adds \'Width\' for the response field then the Width of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
-            fillInTheGapsDragAndDropPage.heightInputField()
-                .clear()
-                .should('have.value', '');
-            fillInTheGapsDragAndDropPage.widthInputField()
-                .type('100')
-                .should('have.value', '100')
-                .blur();
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'width', '100.000px')
-            };
-        });
-
-        it('When the user enters a value below 80px in the \'Width\' input field then the width of the input field should remain 80px in \'Set correct answer\' section', () => {
-            fillInTheGapsDragAndDropPage.widthInputField()
-                .clear()
-                .type('20')
-                .should('have.value', '20')
-                .blur();
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'width', '80.000px')
-            };
-        });
-
-        it('When the user enters a value above 400px in the \'Width\' input field then the width of the input field should remain 400px in \'Set correct answer\' section', () => {
-            fillInTheGapsDragAndDropPage.widthInputField()
-                .clear()
-                .type('800')
-                .should('have.value', '800')
-                .blur();
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'width', '400.000px')
-            };
-        });
-
-        //Height and width test cases for preview tab response fields
-        //TODO: We will need to revisit below case as it will fail for mobile view
-        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response field should be (197x46)px for the preview tab', () => {
-            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 adds \'Height\' for the response field then the height of the response field should get updated accordingly in the preview tab', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.heightInputField()
-                .type('100')
-                .should('have.value', '100');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'height', '100.000');
-            };
-        });
-
-        it('When the user adds \'Width\' for the response field then the response fields should get updated accordingly in the preview tab', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.heightInputField()
-                .clear()
-                .should('have.value', '');
-            fillInTheGapsDragAndDropPage.widthInputField()
-                .type('100')
-                .should('have.value', '100');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'width', '100.000px');
-            };
-        });
-
-        it('When the user enters a value below 80px in the \'Width\' input field then the input field should remain 80px for the preview tab response fields', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.widthInputField()
-                .clear()
-                .type('20')
-                .should('have.value', '20');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'width', '80.000px');
-            };
-        });
-
-        it('When the user enters a value above 400px in the \'Width\' input field then the input field should remain 400px for preview tab repsonse field', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.widthInputField()
-                .clear()
-                .type('800')
-                .should('have.value', '800');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                    .eq(index)
-                    .should('have.attr', 'width', '400.000px');
-            };
-        });
-    });
-
-    describe('Additional Settings : Response accordion', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
-            cy.barsPreLoaderWait();
-            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyAdditionalSettingsResponseAccordionLabelCSSAndA11y();
-    });
-
-    describe('Additional Settings: Check Answer', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
-            cy.barsPreLoaderWait();
-            fillInTheGapsDragAndDropPage.addOptionButton()
-                .click();
-            fillInTheGapsDragAndDropPage.addOptionButton()
-                .click();
-            fillInTheGapsDragAndDropPage.steps.addInputToOptionsForDragAndDropFields(['Correct answer for response 1', 'Correct answer for response 2', 'Incorrect answer 1', 'Incorrect answer 2']);
-            fillInTheGapsDragAndDropPage.pointsInputField()
-                .type('4');
-            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
-            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
-            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
-    });
-
-    describe('Additional Settings: Check Answer - Functionality', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
-            cy.barsPreLoaderWait();
-            fillInTheGapsDragAndDropPage.addOptionButton()
-                .click();
-            fillInTheGapsDragAndDropPage.addOptionButton()
-                .click();
-            fillInTheGapsDragAndDropPage.steps.addInputToOptionsForDragAndDropFields(['Correct answer for response 1', 'Correct answer for response 2', 'Incorrect answer 1', 'Incorrect answer 2']);
-            fillInTheGapsDragAndDropPage.pointsInputField()
-                .type('4');
-            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
-            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
-            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
-            fillInTheGapsDragAndDropPage.steps.setMaximumCheckAnswerAttempts(2);
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-        });
-
-        it('When the user has not set any responses then on clicking on the Check Answer button icons should not be displayed beside both empty responses, label should not be displayed below the box', () => {
-            for (let index = 0; index < 2; index++) {
-                fillInTheGapsDragAndDropPage.previewTabResponseArea()
-                    .eq(index)
-                    .should('have.value', '');
-            };
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDragAndDropPage.correctIcon()
-                .should('not.exist');
-            fillInTheGapsDragAndDropPage.incorrectIcon()
-                .should('not.exist');
-            fillInTheGapsDragAndDropPage.correctIncorrectAnswerLabel()
-                .should('not.exist');
-            fillInTheGapsDragAndDropPage.previewTabCorrectAnswerContainer()
-                .should('not.exist')
-        });
-
-        it('When the user has added correct response for one option then on clicking on the Check Answer button, green checkmark icon should be displayed besides the correct response, red crossmark should not be displayed beside empty response and \'Incorrect Answer\' label should be displayed below the box', () => {
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionCheckmarkIcon(0);
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectIconNotVisible(1);
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
-            fillInTheGapsDragAndDropPage.steps.verifyIncorrectAttemptBorder();
-        });
-
-        it('When the user has added correct responses then on clicking on the Check Answer button, green checkmark icon should be displayed besides the responses and \'Correct Answer\' label should be displayed below the box', () => {
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionCheckmarkIcon(0);
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionCheckmarkIcon(1);
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectAttemptBorder();
-        });
-
-
-        fillInTheGapsDragAndDropPage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y()
-
-        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.maximumCheckAnswerAttemptsInputField()
-                .clear()
-                .type(1)
-                .should('have.value', '1');
-            cy.log('Switching to Preview tab');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .should('be.enabled');
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .click()
-                .should('be.disabled');
-        });
-
-        it('When the \'Maximum check answer attempts\' input field has value \'0\' and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.steps.clearMaximumCheckAnswerAttemptsInputField();
-            fillInTheGapsDragAndDropPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
-            cy.log('Switching to Preview tab');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .should('be.enabled');
-            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Incorrect answer 1', 0);
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Incorrect answer 2', 1);
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
-            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .should('be.enabled');
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
-            fillInTheGapsDragAndDropPage.steps.verifyIncorrectAttemptBorder()
-            cy.log('As the user is able to check answer multiple times, verifying state of \'Check Answer\' to be enabled by adding another response')
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Correct')
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectAttemptBorder()
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .should('be.enabled');
-        });
-
-        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsDragAndDropPage.maximumCheckAnswerAttemptsInputField()
-                .clear()
-                .should('have.value', '');
-            cy.log('Switching to Preview tab');
-            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .should('be.enabled');
-            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Incorrect answer 1', 0);
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Incorrect answer 2', 1);
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
-            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .should('be.enabled');
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
-            fillInTheGapsDragAndDropPage.steps.verifyIncorrectAttemptBorder()
-            cy.log('As the user is able to check answer multiple times, verifying state of \'Check Answer\' to be enabled by adding another response')
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
-            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Correct')
-            fillInTheGapsDragAndDropPage.steps.verifyCorrectAttemptBorder()
-            fillInTheGapsDragAndDropPage.checkAnswerButton()
-                .should('be.enabled');
-        });
-    });
-
-    describe('Additional Settings: Details section', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
-            cy.barsPreLoaderWait();
-            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
-        });
-
-        fillInTheGapsDragAndDropPage.tests.verifyDetailsSection();
-    });
-});

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

@@ -1,299 +0,0 @@
-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')
-        });
-    });
-});