itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/e2e/ILC/Highlight/highlightTextSelectionTypesInHighlightOptionsSection.js

@@ -1,375 +0,0 @@
-import { highlightPage } from "../../../pages";
-import abortEarlySetup from "../../../support/helpers/abortEarly";
-import utilities from "../../../support/helpers/utilities";
-const css = Cypress.env('css');
-
-const paragraphTextArray = ['Horses cannot breat& through their mouth! Cows can sleep standing up?', 'Dogs have e#cellent \'hearing\'.', 'Deers possess nearly, 300 degree field of vision.'];
-const sentenceTextArray = ['Horses cannot breat& through their mouth! ', 'Cows can sleep standing up?', 'Dogs have e#cellent \'hearing\'.', 'Deers possess nearly, 300 degree field of vision.'];
-const wordTextArray = ['Horses', 'cannot', 'breat&', 'through', 'their', 'mouth', 'Cows', 'can', 'sleep', 'standing', 'up', 'Dogs', 'have', 'e#cellent', 'hearing', 'Deers', 'possess', 'nearly', '300', 'degree', 'field', 'of', 'vision'];
-const anySelectionArray = ['Cows can sleep', 'Dogs have e#cellent \'hearing\'', 'nearly, 300 degree field of vision.'];
-
-describe('Create Item page - Highlight: Text selection in Highlight options section', () => {
-    before(() => {
-        cy.loginAs('admin');
-    });
-
-    describe('Highlight options section: Any', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight question type');
-            highlightPage.steps.navigateToCreateQuestion('highlight');
-            cy.barsPreLoaderWait();
-            highlightPage.steps.clearQuestionInputField();
-            paragraphTextArray.forEach((paragraphText) => {
-                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
-            });
-            highlightPage.steps.addInputToQuestionInputField('{backspace}');
-        });
-
-        it('By default \'Any\' should be selected in text selection dropdown.', () => {
-            utilities.verifyInnerText(highlightPage.textSelectionDropdown(), 'Any');
-        });
-
-        it('When \'Any\' text selection type is selected, the added input should be displayed in the highlight options section and no options should be displayed', () => {
-            utilities.verifyElementCount(highlightPage.highlightOptionsParagraphs(), 3);
-            utilities.verifyElementVisibilityState(highlightPage.highlightOptionsSpans(), 'notExist');
-        });
-
-        it('The highlight count should be displayed as \'0\'.', () => {
-            highlightPage.steps.verifyHighlightCounterTextAndValue(0);
-        });
-
-        it('When user selects any texts, then that text should be highlighted and the highlight count should be increased to 1.', () => {
-            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[0]);
-            highlightPage.steps.verifyHighlightCounterTextAndValue(1);
-        });
-
-        it('CSS of the response option in selected state', { tags: 'css' }, () => {
-            utilities.verifyCSS(highlightPage.highlightOptionsSpans(), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.figActiveComponentBg,
-                'border': `1px solid ${css.color.activeComponentBorder}`
-            });
-        });
-
-        it('Accessibility of the response option', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(highlightPage.highlightOptionsSpans().parents('.highlight-tab-wrapper'));
-        });
-
-        it('When user clicks on a highlighted option, then the highlighted option should be deselected and the highlight count should reduce by 1.', () => {
-            highlightPage.steps.clickOnOptionInHighlightOptionsSection(anySelectionArray[0]);
-            utilities.verifyElementVisibilityState(highlightPage.highlightOptionsSpans(), 'notExist')
-            highlightPage.steps.verifyHighlightCounterTextAndValue(0);
-        });
-
-        it('When user clears all selected options with the \'Clear\' button, then all the selected highlight options should be deselected and the Highlight options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
-            cy.log('Pre-step: Selecting multiple texts to create options');
-            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[0]);
-            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[1]);
-            highlightPage.steps.clearSelectedOptionsInHighlightOptionsSection();
-            utilities.verifyElementVisibilityState(highlightPage.highlightOptionsSpans(), 'notExist');
-            utilities.verifyInnerText(highlightPage.errorMessage(), 'Error: Minimum one highlight option is required.');
-            highlightPage.steps.verifyErroredStateOfHighlightOptionsSection();
-        });
-
-        highlightPage.tests.verifyCSSAnda11yOfErrorMessage();
-
-        it('When user selects any text again, the option should be selected and the error message should disappear and highlight counter should display 1 count', () => {
-            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[2]);
-            utilities.verifyElementVisibilityState(highlightPage.errorMessage(), 'notExist');
-            highlightPage.steps.verifyHighlightCounterTextAndValue(1);
-        });
-    });
-
-    describe('Highlight options section: Paragraph', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight question type');
-            highlightPage.steps.navigateToCreateQuestion('highlight');
-            cy.barsPreLoaderWait();
-            highlightPage.steps.clearQuestionInputField();
-            paragraphTextArray.forEach((paragraphText) => {
-                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
-            });
-            highlightPage.steps.addInputToQuestionInputField('{backspace}');
-        });
-
-        it('User should be able to switch to \'Paragraph\' in text selection dropdown.', () => {
-            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Paragraph');
-        });
-
-        it('When user has switched to \'Paragraph\' text selection type, the previously added input should be divided into options as per \'Paragraph\' text selection type and all the options should be in selected state', () => {
-            utilities.verifyElementCount(highlightPage.highlightOptionsParagraphs(), 3);
-            utilities.verifyElementCount(highlightPage.highlightOptionsSpans(), 3);
-            highlightPage.steps.verifyOptionsInHighlightOptionsSection(paragraphTextArray);
-            paragraphTextArray.forEach((paragraphText) => {
-                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(paragraphText);
-            });
-        });
-
-        it('The highlight count should be displayed as per the number of \'Paragraph\'.', () => {
-            highlightPage.steps.verifyHighlightCounterTextAndValue(3);
-        });
-
-        it('When user clicks on a highlighted option, then the highlighted option should be deselected and the highlight count should reduce by 1.', () => {
-            highlightPage.steps.deselectOptionInHighlightOptionsSection('Paragraph', paragraphTextArray[0]);
-            for (let arrayIndex = 1; arrayIndex < paragraphTextArray.length; arrayIndex++) {
-                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(paragraphTextArray[arrayIndex]);
-            }
-            highlightPage.steps.verifyHighlightCounterTextAndValue(2);
-        });
-
-        it('CSS of the response option in selected and deselected state', { tags: 'css' }, () => {
-            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(paragraphTextArray[1]), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.figActiveComponentBg,
-                'border': `1px solid ${css.color.activeComponentBorder}`
-            });
-            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(paragraphTextArray[0]), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.defaultBackground
-            });
-        });
-
-        it('Accessibility of the response options', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(highlightPage.highlightOptionsSpans().parent('[class*="Highlightstyles__HighLightWrapper"] [data-testid="question-instruction-element"]'));
-        });
-
-        it('When the user hovers over the deselected option, then that option should be displayed in hover state', () => {
-            highlightPage.steps.verifyHoverStateOfDeselectedOptionInHighlightOptionsSection(paragraphTextArray[0])
-        });
-
-        //Clear button reset popup verification
-        it('When user clicks on \'Clear button\', Reset popup should be displayed with the text \'Are you sure you want to clear all highlights? This action will not delete template content but clear all highlights.\', Cancel and Confirm button', () => {
-            highlightPage.steps.clickOnClearHighlightButtonInHighlightOptionsSection();
-            highlightPage.steps.verifyResetPopupForClearingOptionSelection();
-        });
-
-        it('CSS of Reset popup', { tags: 'css' }, () => {
-            utilities.verifyCSS(highlightPage.dialogBoxTitle().find('span'), {
-                'color': css.color.flyoutTitle,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.bold
-            });
-            utilities.verifyCSS(highlightPage.dialogBoxContent(), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(highlightPage.buttonAccept(), {
-                'color': css.color.primaryBtn,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.primaryBtnBg
-            });
-            utilities.verifyCSS(highlightPage.buttonReject(), {
-                'color': css.color.secondaryBtn,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.secondaryBtnBg
-            });
-        });
-
-        it('Accessibility of Reset popup', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(highlightPage.dialogBox());
-        });
-
-        it('When user clicks on \'Cancel\' button of the Reset popup, then the popup should be closed and the earlier state of highlight options should persist', () => {
-            highlightPage.steps.clickOnRejectButtonInDialogBox();
-            utilities.verifyElementVisibilityState(highlightPage.dialogBox(), 'notExist');
-            highlightPage.steps.verifyOptionIsNotSelectedInHighlightOptionsSection(paragraphTextArray[0]);
-            for (let arrayIndex = 1; arrayIndex < paragraphTextArray.length; arrayIndex++) {
-                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(paragraphTextArray[arrayIndex]);
-            }
-        });
-
-        it('When user clicks on \'Confirm\' button of the Reset popup, then the popup should be closed and all the selected highlight options should be deselected and the Highlight options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
-            cy.log('Pre-step: Again clicking on Clear button to open Reset popup');
-            highlightPage.steps.clickOnClearHighlightButtonInHighlightOptionsSection();
-            highlightPage.steps.clickOnAcceptButtonInDialogBox();
-            for (let arrayIndex = 0; arrayIndex < paragraphTextArray.length; arrayIndex++) {
-                highlightPage.steps.verifyOptionIsNotSelectedInHighlightOptionsSection(paragraphTextArray[arrayIndex]);
-            }
-            utilities.verifyInnerText(highlightPage.errorMessage(), 'Error: Minimum one highlight option is required.');
-            highlightPage.steps.verifyErroredStateOfHighlightOptionsSection();
-        });
-
-        highlightPage.tests.verifyCSSAnda11yOfErrorMessage();
-
-        it('When user click on a deselected option, the option should be selected and the error message should disappear and highlight counter should display 1 count', () => {
-            highlightPage.steps.selectOptionInHighlightOptionsSection('Paragraph', paragraphTextArray[0]);
-            utilities.verifyElementVisibilityState(highlightPage.errorMessage(), 'notExist');
-            highlightPage.steps.verifyHighlightCounterTextAndValue(1);
-        });
-    });
-
-    describe('Highlight options section: Sentence', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight question type');
-            highlightPage.steps.navigateToCreateQuestion('highlight');
-            cy.barsPreLoaderWait();
-            highlightPage.steps.clearQuestionInputField();
-            paragraphTextArray.forEach((paragraphText) => {
-                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
-            });
-            highlightPage.steps.addInputToQuestionInputField('{backspace}');
-        });
-
-        it('User should be able to switch to \'Sentence\' in text selection dropdown.', () => {
-            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Sentence');
-        });
-
-        it('When user has switched to \'Sentence\' text selection type, the previously added input should be divided into options as per \'Sentence\' text selection type and all the options should be in selected state', () => {
-            utilities.verifyElementCount(highlightPage.highlightOptionsParagraphs(), 3);
-            utilities.verifyElementCount(highlightPage.highlightOptionsSpans(), 4);
-            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInHighlightOptionsSection(0, 2);
-            highlightPage.steps.verifyOptionsInHighlightOptionsSection(sentenceTextArray);
-            sentenceTextArray.forEach((sentenceText) => {
-                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(sentenceText);
-            });
-        });
-
-        it('The highlight count should be displayed as per the number of \'Sentence\'.', () => {
-            highlightPage.steps.verifyHighlightCounterTextAndValue(4);
-        });
-
-        it('When user clicks on a highlighted option, then the highlighted option should be deselected and the highlight count should reduce by 1.', () => {
-            highlightPage.steps.deselectOptionInHighlightOptionsSection('Sentence', sentenceTextArray[0])
-            for (let arrayIndex = 1; arrayIndex < sentenceTextArray.length; arrayIndex++) {
-                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(sentenceTextArray[arrayIndex]);
-            }
-            highlightPage.steps.verifyHighlightCounterTextAndValue(3);
-        });
-
-        it('CSS of the response option in selected and deselected state', { tags: 'css' }, () => {
-            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(sentenceTextArray[1]), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.figActiveComponentBg,
-                'border': `1px solid ${css.color.activeComponentBorder}`
-            });
-            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(sentenceTextArray[0]), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.defaultBackground
-            });
-        });
-
-        it('Accessibility of the response options', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(highlightPage.highlightOptionsSpans().parent('[class*="Highlightstyles__HighLightWrapper"] [data-testid="question-instruction-element"]'));
-        });
-
-        it('When the user hovers over the deselected option, then that option should be displayed in hover state', () => {
-            highlightPage.steps.verifyHoverStateOfDeselectedOptionInHighlightOptionsSection(sentenceTextArray[0])
-        });
-
-        it('When user clears all selected options with the \'Clear\' button, then all the selected highlight options should be deselected and the Highlight options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
-            highlightPage.steps.clearSelectedOptionsInHighlightOptionsSection();
-            for (let arrayIndex = 0; arrayIndex < sentenceTextArray.length; arrayIndex++) {
-                highlightPage.steps.verifyOptionIsNotSelectedInHighlightOptionsSection(sentenceTextArray[arrayIndex]);
-            }
-            utilities.verifyInnerText(highlightPage.errorMessage(), 'Error: Minimum one highlight option is required.');
-            highlightPage.steps.verifyErroredStateOfHighlightOptionsSection();
-        });
-
-        highlightPage.tests.verifyCSSAnda11yOfErrorMessage();
-
-        it('When user click on a deselected option, the option should be selected and the error message should disappear and highlight counter should display 1 count', () => {
-            highlightPage.steps.selectOptionInHighlightOptionsSection('Sentence', sentenceTextArray[0])
-            utilities.verifyElementVisibilityState(highlightPage.errorMessage(), 'notExist');
-            highlightPage.steps.verifyHighlightCounterTextAndValue(1);
-        });
-    });
-
-    describe('Highlight options section: Word', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight question type');
-            highlightPage.steps.navigateToCreateQuestion('highlight');
-            cy.barsPreLoaderWait();
-            highlightPage.steps.clearQuestionInputField();
-            paragraphTextArray.forEach((paragraphText) => {
-                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
-            });
-            highlightPage.steps.addInputToQuestionInputField('{backspace}');
-        });
-
-        it('User should be able to switch to \'Word\' in text selection dropdown.', () => {
-            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Word');
-        });
-
-        it('When user has switched to \'Word\' text selection type, the previously added input should be divided into options as per \'Word\' text selection type and all the options should be in selected state', () => {
-            utilities.verifyElementCount(highlightPage.highlightOptionsParagraphs(), 3);
-            utilities.verifyElementCount(highlightPage.highlightOptionsSpans(), 23);
-            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInHighlightOptionsSection(0, 11);
-            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInHighlightOptionsSection(1, 4);
-            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInHighlightOptionsSection(2, 8);
-            highlightPage.steps.verifyOptionsInHighlightOptionsSection(wordTextArray);
-            wordTextArray.forEach((wordText) => {
-                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(wordText);
-            });
-        });
-
-        it('The highlight count should be displayed as per the number of \'Word\'.', () => {
-            highlightPage.steps.verifyHighlightCounterTextAndValue(23);
-        });
-
-        it('When user clicks on a highlighted option, then the highlighted option should be deselected and the highlight count should reduce by 1.', () => {
-            highlightPage.steps.deselectOptionInHighlightOptionsSection('Word', wordTextArray[0])
-            for (let arrayIndex = 1; arrayIndex < wordTextArray.length; arrayIndex++) {
-                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(wordTextArray[arrayIndex]);
-            }
-            highlightPage.steps.verifyHighlightCounterTextAndValue(22);
-        });
-
-        it('CSS of the response option in selected and deselected state', { tags: 'css' }, () => {
-            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(wordTextArray[1]), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.figActiveComponentBg,
-                'border': `1px solid ${css.color.activeComponentBorder}`
-            });
-            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(wordTextArray[0]), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.defaultBackground
-            });
-        });
-
-        it('Accessibility of the response options', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(highlightPage.highlightOptionsSpans().parent('[class*="Highlightstyles__HighLightWrapper"] [data-testid="question-instruction-element"]'));
-        });
-
-        it('When the user hovers over the deselected option, then that option should be displayed in hover state', () => {
-            highlightPage.steps.verifyHoverStateOfDeselectedOptionInHighlightOptionsSection(wordTextArray[0])
-        });
-
-        it('When user clears all selected options with the \'Clear\' button, then all the selected highlight options should be deselected and the Highlight options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
-            highlightPage.steps.clearSelectedOptionsInHighlightOptionsSection();
-            for (let arrayIndex = 0; arrayIndex < sentenceTextArray.length; arrayIndex++) {
-                highlightPage.steps.verifyOptionIsNotSelectedInHighlightOptionsSection(wordTextArray[arrayIndex]);
-            }
-            utilities.verifyInnerText(highlightPage.errorMessage(), 'Error: Minimum one highlight option is required.');
-            highlightPage.steps.verifyErroredStateOfHighlightOptionsSection();
-        });
-
-        highlightPage.tests.verifyCSSAnda11yOfErrorMessage();
-
-        it('When user click on a deselected option, the option should be selected and the error message should disappear and highlight counter should display 1 count', () => {
-            highlightPage.steps.selectOptionInHighlightOptionsSection('Word', wordTextArray[0]);
-            utilities.verifyElementVisibilityState(highlightPage.errorMessage(), 'notExist');
-            highlightPage.steps.verifyHighlightCounterTextAndValue(1);
-        });
-    });
-});

package/cypress/e2e/ILC/HighlightImage/highlightImageAdditionalSettings.js

@@ -1,219 +0,0 @@
-import { highlightImagePage } from "../../../pages";
-import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
-import abortEarlySetup from "../../../support/helpers/abortEarly";
-import utilities from "../../../support/helpers/utilities";
-const css = Cypress.env('css');
-
-let imageWidth = 500;
-let imageHeight = 500;
-const flowerHighlightRegion = [[24, 6], [24, 24], [56, 24], [56, 6]];
-const branchesHighlightRegion = [[36, 36], [36, 46], [58, 46], [58, 36]];
-const leafHighlightRegion = [[54, 48], [54, 72], [82, 72], [82, 48]];
-const numbers = ['1', '2'];
-const lowercase = ['a', 'b'];
-const uppercase = ['A', 'B'];
-const answerNumerationDropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
-
-describe('Create Item page - Highlight image: Additional settings', () => {
-    before(() => {
-        cy.loginAs('admin');
-    });
-
-    describe('Additional settings: Student response area and layout', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight image question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            highlightImagePage.steps.expandAdditonalSettings();
-        });
-
-        //TODO: Need to remove this and use common function verifyStudentResponseAreaAndLayoutLabelAndCSS when https://redmine.zeuslearning.com/issues/518498 is resolved
-        it('\'Student response area and layout\' label should be displayed', () => {
-            utilities.verifyInnerText(highlightImagePage.studentResponseAreaAndLayoutLabel(), 'Student response area and layout');
-            utilities.verifyElementVisibilityState(highlightImagePage.studentResponseAreaAndLayoutLabel(), 'visible');
-        });
-
-        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
-            utilities.verifyCSS(highlightImagePage.studentResponseAreaAndLayoutLabel(), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.semibold
-            });
-        });
-
-        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
-    });
-
-    describe('Additional settings: Answer numeration (only while grading) contents', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight image question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            highlightImagePage.steps.expandAdditonalSettings();
-        });
-
-        highlightImagePage.tests.verifyAnswerNumerationContents();
-    });
-
-    describe('Additional settings: Answer numeration Set correct answer section', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight image question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
-            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
-            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
-            highlightImagePage.steps.expandAdditonalSettings();
-            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
-            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
-        });
-
-        it(`When the user selects ${answerNumerationDropdownOptions[0]} option from the Answer Numeration dropdown, then numeration should not be displayed in the Set correct answer section`, () => {
-            utilities.verifyInnerText(highlightImagePage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`)
-            utilities.verifyElementVisibilityState(highlightImagePage.correctAnswerNumeration(), 'notExist');
-        });
-
-        it(`When the user selects ${answerNumerationDropdownOptions[1]} option from the Answer Numeration dropdown, then numeration should not be displayed in the Set correct answer section`, () => {
-            highlightImagePage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
-            utilities.verifyElementVisibilityState(highlightImagePage.correctAnswerNumeration(), 'notExist');
-        });
-
-        it(`When the user selects ${answerNumerationDropdownOptions[2]} option from the Answer Numeration dropdown, then numeration should not be displayed in the Set correct answer section`, () => {
-            highlightImagePage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
-            utilities.verifyElementVisibilityState(highlightImagePage.correctAnswerNumeration(), 'notExist');
-        });
-    });
-
-    describe('Additional settings: Answer numeration preview tab', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight image question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
-            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
-            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
-            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
-            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
-            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
-            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
-            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
-            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
-            highlightImagePage.steps.checkMultipleSelectionCheckbox();
-            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
-            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(2);
-            highlightImagePage.steps.allotPoints(10);
-            highlightImagePage.steps.expandAdditonalSettings();
-        });
-
-        it(`When the user attempts the question when ${answerNumerationDropdownOptions[0]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[0]} numeration`, () => {
-            utilities.verifyInnerText(highlightImagePage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`);
-            highlightImagePage.steps.switchToPreviewTab();
-            highlightImagePage.steps.checkShowCorrectAnswerCheckbox();
-            highlightImagePage.steps.highlightARegionInPreviewTab(1);
-            highlightImagePage.steps.checkShowCorrectAnswerCheckbox();
-            highlightImagePage.steps.verifyCorrectAnswerContainerNumeration(numbers);
-        });
-
-        it(`When the user attempts the question when ${answerNumerationDropdownOptions[1]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[1]} numeration`, () => {
-            highlightImagePage.steps.switchToEditTab();
-            highlightImagePage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
-            highlightImagePage.steps.switchToPreviewTab();
-            highlightImagePage.steps.highlightARegionInPreviewTab(1);
-            highlightImagePage.steps.checkShowCorrectAnswerCheckbox();
-            highlightImagePage.steps.verifyCorrectAnswerContainerNumeration(uppercase);
-        });
-
-        it(`When the user attempts the question when ${answerNumerationDropdownOptions[2]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[2]} numeration`, () => {
-            highlightImagePage.steps.switchToEditTab();
-            highlightImagePage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
-            highlightImagePage.steps.switchToPreviewTab();
-            highlightImagePage.steps.highlightARegionInPreviewTab(1);
-            highlightImagePage.steps.checkShowCorrectAnswerCheckbox();
-            highlightImagePage.steps.verifyCorrectAnswerContainerNumeration(lowercase);
-        });
-    });
-
-    describe('Additional settings: Canvas maximum width contents and set correct answer section', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight image question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
-            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
-            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
-            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
-            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
-            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
-            highlightImagePage.steps.expandAdditonalSettings();
-        });
-
-        it('\'Canvas maximum width (px)\' label and input field should be displayed and the input field should be empty by default', () => {
-            utilities.verifyInnerText(highlightImagePage.canvasMaximumWidthLabel(), 'Canvas maximum width (px)');
-            utilities.verifyElementVisibilityState(highlightImagePage.canvasMaximumWidthLabel(), 'visible');
-            utilities.verifyElementVisibilityState(highlightImagePage.canvasMaximumWidthInputField(), 'visible');
-            highlightImagePage.steps.verifyCanvasMaximumWidthInputField('');
-        });
-
-        it('When user enters value in \'Canvas maximum width (px)\' the width of the image should change accordingly in set correct answer section', () => {
-            highlightImagePage.steps.addInputToCanvasMaximumWidthInputField(400);
-            highlightImagePage.steps.verifyHeightAndWidthOfImageInSetCorrectAnswerSection(imageHeight, 400);
-            highlightImagePage.steps.verifyImageWidthInHighlightImageSection(imageWidth);
-        });
-
-        it('User should not be able to set \'Canvas maximum width (px)\' below 288px', () => {
-            highlightImagePage.steps.clearCanvasMaximumWidthInputField();
-            highlightImagePage.steps.addInputToCanvasMaximumWidthInputField(200);
-            highlightImagePage.steps.verifyCanvasMaximumWidthInputField(288);
-            highlightImagePage.steps.verifyHeightAndWidthOfImageInSetCorrectAnswerSection(imageHeight, 288);
-            highlightImagePage.steps.verifyImageWidthInHighlightImageSection(imageWidth);
-        });
-
-        it('When user clears the input field the width of the image should be displayed according to the original width', () => {
-            highlightImagePage.steps.clearCanvasMaximumWidthInputField();
-            highlightImagePage.steps.verifyHeightAndWidthOfImageInSetCorrectAnswerSection(imageHeight, imageWidth);
-            highlightImagePage.steps.verifyImageWidthInHighlightImageSection(imageWidth);
-        });
-    });
-
-    describe('Additional settings: Canvas maximum width preview tab', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight image question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
-            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
-            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
-            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
-            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
-            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
-            highlightImagePage.steps.expandAdditonalSettings();
-        });
-
-        it('When user enters value in \'Canvas maximum width (px)\' the width of the image should change accordingly in preview tab', () => {
-            highlightImagePage.steps.addInputToCanvasMaximumWidthInputField(400);
-            highlightImagePage.steps.switchToPreviewTab();
-            highlightImagePage.steps.verifyHeightAndWidthOfImageInPreviewTab(imageHeight, 400);
-        });
-
-        it('User should not be able to set width of image below 288px', () => {
-            highlightImagePage.steps.switchToEditTab();
-            highlightImagePage.steps.clearCanvasMaximumWidthInputField();
-            highlightImagePage.steps.addInputToCanvasMaximumWidthInputField(200);
-            highlightImagePage.steps.switchToPreviewTab();
-            highlightImagePage.steps.verifyHeightAndWidthOfImageInPreviewTab(imageHeight, 288);
-        });
-
-        it('When user clears the input field the width of the image should be displayed according to the original width', () => {
-            highlightImagePage.steps.switchToEditTab();
-            highlightImagePage.steps.clearCanvasMaximumWidthInputField();
-            highlightImagePage.steps.switchToPreviewTab();
-            highlightImagePage.steps.verifyHeightAndWidthOfImageInPreviewTab(imageHeight, imageWidth);
-        });
-    });
-});