itemengine-cypress-automation 1.0.12 → 1.0.13

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -23,6 +23,7 @@ const selectors = {
             return cy.get('[role="listbox"] .dropdown-menu-item')
         }
     },
+    responseDropdownOptionText: () => cy.get('[role="listbox"] .dropdown-menu-item .dropdown-label-text'),
     responseDropdownSetCorrectAnswerSection: () => cy.get('.response-dropdown [role="combobox"]'),
     responseFieldLabelSetCorrectAnswerSection: () => cy.get('.cloze-with-text-form-control-wrapper .input-field-label'),
     responseDropdownWrapperSetCorrectAnswerSection: () => cy.get('.response-dropdown-wrapper .dropdown-form-control'),
@@ -323,7 +324,54 @@ const steps = {
         fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection()
             .eq(responseDropdownIndex)
             .should('have.attr', 'aria-label', ariaLabel);
-    }
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @description Verify placeholder for response dropdown in set correct answer section does not exist
+     */
+    verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdownNotExists: (responseDropdownIndex) => {
+        fillInTheGapsDropdownCommonComponent.responseDropdownWrapperSetCorrectAnswerSection()
+            .eq(responseDropdownIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.responseDropdownPlaceholderText(), 'notExist');
+            });
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @param {string} placeholderText Placeholder for dropdown
+     * @description Verify placeholder text displayed for response dropdown in set correct answer section
+     */
+    verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdown: (responseDropdownIndex, placeholderText) => {
+        fillInTheGapsDropdownCommonComponent.responseDropdownWrapperSetCorrectAnswerSection()
+            .eq(responseDropdownIndex)
+            .within(() => {
+                utilities.verifyTextContent(fillInTheGapsDropdownCommonComponent.responseDropdownPlaceholderText(), placeholderText);
+            });
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @param {number} height Height of response dropdown in set correct answer section
+     * @description Verify height of response dropdown in set correct answer section
+     */
+    verifyHeightOfResponseDropdownInSetCorrectAnswerSection: (responseDropdownIndex, height) => {
+        fillInTheGapsDropdownCommonComponent.responseDropdownWrapperSetCorrectAnswerSection()
+            .eq(responseDropdownIndex)
+            .should('have.attr', 'height', `${height}px`);
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @param {number} width Width of response dropdown in set correct answer section
+     * @description Verify width of response dropdown in set correct answer section
+     */
+    verifyWidthOfResponseDropdownInSetCorrectAnswerSection: (responseDropdownIndex, width) => {
+        fillInTheGapsDropdownCommonComponent.responseDropdownWrapperSetCorrectAnswerSection()
+            .eq(responseDropdownIndex)
+            .should('have.attr', 'width', `${width}px`);
+    },
 }
 
 const tests = {
@@ -340,6 +388,11 @@ const tests = {
             fillInTheGapsDropdownCommonComponent.steps.verifyMatchFromAllResponsesLabelAndCheckboxDisabledState();
         });
 
+        it('When the user hovers over the \'Match from all responses\' label, \'Feature available for only alternate correct answers\' text should appear on a tooltip, on hovering away from the label, the tooltip should disappear', () => {
+            fillInTheGapsDropdownCommonComponent.matchFromAllResponsesLabel()
+                .verifyTooltip('Feature available for only alternate correct answers');
+        });
+
         it('CSS of correct response conditions section', { tags: 'css' }, () => {
             const labels = [fillInTheGapsDropdownCommonComponent.randomizeOptionsLabel, fillInTheGapsDropdownCommonComponent.matchFromAllResponsesLabel]
             const uncheckedCheckboxes = [fillInTheGapsDropdownCommonComponent.randomizeOptionsCheckbox, fillInTheGapsDropdownCommonComponent.matchFromAllResponsesCheckbox]

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -19,10 +19,10 @@ const selectors = {
     ignoreSpacesBeforeAndAfterCheckbox: () => cy.get('.ngie-checkbox input').eq(1),
     matchFromAllResponsesLabel: () => cy.get('.ngie-checkbox-control-label').eq(2),
     matchFromAllResponsesCheckbox: () => cy.get('.ngie-checkbox input').eq(2),
-    responseFieldPreviewTab: () => cy.get('.edit-question-preview-wrapper .response-input-field input[type="text"]'),
-    responseFieldWrapperPreviewTab: () => cy.get('.edit-question-preview-wrapper .response-input-field'),
+    responseFieldPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-input-field input[type="text"]'),
+    responseFieldWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-input-field'),
     previewTabCorrectAnswerContainer: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectAnswerWrapper"]'),
-    previewTabCorrectAnswerResponseWrapper: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectResponseWrapper"] [aria-label*="Response"]'),
+    previewTabCorrectAnswerResponseWrapper: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectResponseWrapper"] [aria-label*="Add answer for response"]'),
     previewTabResponseWrapper: () => cy.get('.draggable-input .cloze-with-text-answer-status-response-preview-wrapper'),
     previewTabCorrectAnswerLabel: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectAnswerLabel"]'),
     responseNumeration: () => cy.get('.response-input-adornment'),

package/cypress/pages/components/gridCommonComponents.js

@@ -533,7 +533,8 @@ const steps = {
                 .eq(columnIndex)
                 .clear()
                 .type(points, { delay: 0 })
-                .should('have.value', points);
+                .should('have.value', points)
+                .blur();
         });
     },
 
@@ -895,7 +896,7 @@ const tests = {
                         .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.regular);
                 });
             gridCommonComponents.addOptionButton()
-                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.normal, css.fontWeight.medium);
+                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.default, css.fontWeight.medium);
         });
     },
 

package/cypress/pages/components/index.js

@@ -35,4 +35,5 @@ export * from './fillInTheGapsDropdownCommonComponent';
 export * from './figOverImageCommonComponent';
 export * from './uploadImageSectionComponent';
 export * from './colorPopupComponent';
-export * from './customizeHighlightPropertiesComponent';
+export * from './customizeHighlightPropertiesComponent';
+export * from './browseItemsPage';

package/cypress/pages/components/listSortingAndOrderingBase.js

@@ -246,7 +246,7 @@ const tests = {
             utilities.verifyCSS(optionsWrapperComponent.addOptionButton(), {
                 'color': css.color.secondaryBtnActive,
                 'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
+                'font-weight': css.fontWeight.medium
             });
         });
 

package/cypress/pages/components/questionInstructionsComponent.js

@@ -5,7 +5,7 @@ const css = Cypress.env('css');
 const selectors = {
     questionInstructionsLabelEditTab: () => cy.get('.edit-question-instruction-label'),
     questionInstructionsInputField: () => cy.get('[title="Question Instructions"]'),
-    questionInstructionsText: () => cy.get('.edit-question-preview-wrapper .question-instruction.question-text-wrapper'),
+    questionInstructionsText: () => cy.get('.edit-question-preview-wrapper .question-instruction'),
 }
 
 const steps = {
@@ -31,6 +31,11 @@ const steps = {
                 commonComponents.errorMessage()
                     .verifyInnerText('Error: Question instructions are required.');
             });
+    },
+
+    verifyQuestionInstructionsText: () => {
+        questionInstructionsComponent.questionInstructionsText()
+            .should('have.text', 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
     }
 }
 
@@ -99,8 +104,7 @@ const tests = {
             questionInstructionsComponent.steps.addQuestionInstructions()
             cy.log('Switching to Preview Tab')
             createQuestionBasePage.steps.switchToPreviewTab();
-            questionInstructionsComponent.questionInstructionsText()
-                .should('have.text', 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+            steps.verifyQuestionInstructionsText();
         });
     }
 };

package/cypress/pages/components/uploadImageSectionComponent.js

@@ -222,6 +222,8 @@ const steps = {
         uploadImageSectionComponent.imagePopupImagePreview()
             .find('img')
             .should('have.attr', 'src', sourceUrl);
+        uploadImageSectionComponent.imagePopupImagePreview()
+            .click();
     },
 
     clickOnEditImageButton: () => {

package/cypress/pages/createItemPage.js

@@ -7,7 +7,12 @@ const selectors = {
     previewTab: () => cy.get('[data-ngie-testid="preview-tab"]'),
     editTab: () => cy.get('[data-ngie-testid="edit-tab"]'),
     settingsButton: () => cy.get('.settingsBtn '),
-    viewAllQuestionsButton: () => cy.get('.view-question-resource-button-wrapper')
+    viewAllQuestionsButton: () => cy.get('.view-question-resource-button-wrapper'),
+    createItemContainer: () => cy.get('.edit-wrapper'),
+    referenceId: () => cy.get('.edit-item-reference-id'),
+    itemTitle: () => cy.get('.ItemLevel-Header'),
+    tagsButton: () => cy.get('.ngie-button').contains('Tags'),
+    tagsInputField: () => cy.get('.tags-chip-container')
 }
 
 const steps = {
@@ -15,10 +20,38 @@ const steps = {
         createItemPage.addQuestionButton()
             .click();
     },
-    
+
     clickOnAddResource: () => {
         createItemPage.addResourceAndToolsButton()
             .click();
+    },
+
+    navigateToCreateItemPage: () => {
+        cy.visit('/item-engine/demo/create-item');
+    },
+
+    verifyCreateItemContainerIsVisible: () => {
+        createItemPage.createItemContainer()
+            .should('be.visible');
+    },
+
+    verifyAddQuestionButtonIsVisible: () => {
+        createItemPage.addQuestionButton()
+            .should('be.visible');
+    },
+
+    clickOnTagsButton: () => {
+        createItemPage.tagsButton()
+            .click();
+    },
+
+    /**
+    * @param {string[]} arrayOfTags of text displayed in tags input field
+    * @description Verify the text in tags input field
+    */
+    verifyTagsInInputField: (arrayOfTags) => {
+        createItemPage.tagsInputField()
+            .should('have.text', arrayOfTags.sort().join(''));
     }
 }
 

package/cypress/pages/dialogBoxBase.js

@@ -3,8 +3,8 @@ import { createQuestionBasePage } from "./components";
 const css = Cypress.env('css');
 
 const selectors = {
-    dialogBox: () => cy.get('[aria-describedby="alert-dialog-description"]'),
-    dialogBoxTitle: () => cy.get('#alert-dialog-title'),
+    dialogBox: () => cy.get('[role="dialog"]'),
+    dialogBoxTitle: () => cy.get('.dialog-title'),
     dialogBoxContent: () => cy.get('div[id="alert-dialog-description"]'),
     buttonReject: () => cy.get('.action-btn-wrapper button').eq(0),
     buttonAccept: () => cy.get('.action-btn-wrapper button').eq(1),

package/cypress/pages/dragAndDropIntoCategoriesAllOrNothingScoring.js

@@ -106,8 +106,8 @@ const tests = {
             dragAndDropIntoCategoriesPage.steps.verifyNumerationOfCategoryCellsInQuestionPreview(cellNumerationArray);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(0);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(1);
-            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(2);
-            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(3);
             dragAndDropIntoCategoriesPage.steps.verifyIncorrectAttemptBorder();
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectCellBorderNotExists();
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
@@ -119,8 +119,8 @@ const tests = {
             autoScoredPreviewBase.steps.checkAnswer();
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(0);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(1);
-            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(2);
-            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(3);
             dragAndDropIntoCategoriesPage.steps.verifyIncorrectAttemptBorder();
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectCellBorderNotExists();
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');

package/cypress/pages/dragAndDropIntoCategoriesCellsScoring.js

@@ -1,6 +1,8 @@
 import { autoScoredPreviewBase, previewScoringAndShowCorrectAnswerComponent } from "./components";
 import { dragAndDropIntoCategoriesPage } from "./dragAndDropIntoCategoriesPage";
 const cellNumerationArray = ['1', '2', '3', '4'];
+const correctTabAnswerArray = [['Bat'], ['Eagle', 'Parrot'], ['Platypus', 'Whale'], ['Ostrich']];
+
 const tests = {
     verifyScoringForEachCell: (scoringSubtype) => {
         it('When the user attempts the question incorrectly then on selecting \'Show correct answer\' checkbox, 0 points should be provided, red cross-mark should be displayed besides incorrect answer responses, incorrect cell border and red cross-mark should be displayed for incorrect cells and the correct answer section should display the incorrect/not attempted options from the correct tab along with category cell numeration', () => {

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -57,7 +57,7 @@ const selectors = {
     setCorrectAnswerSectionCategoryGrid: () => cy.get('[class*="DragAndDropMatrixstyles__TableWrapper"]'),
     previewTabCategoryGrid: () => cy.get('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__TableWrapper"]'),
     //Additional settings
-    rowHeadingLabel: () => cy.get('[class*="Classificationstyle__RowResponseWrapper"] .inline-text-property-label').eq(0),
+    rowHeadingLabel: () => cy.get('[class*="RowResponseWrapper"] .text-label '),
     rowHeadingInputField: () => cy.get('input[aria-label="Row heading"]'),
     rowHeadingSetCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__RowTitleCell"]'),
     rowHeadingPreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__RowTitleCell"]'),
@@ -786,7 +786,7 @@ const steps = {
             .contains(optionName)
             .click();
         draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper('drag and drop into categories')
-            .find('[class*="DragAndDropMatrixstyles__DroppableWrapper"]')
+            .find('[class*="DroppableWrapper"]')
             .click({ force: true });
     },
 
@@ -802,7 +802,7 @@ const steps = {
                     .click();
             });
         draggableOptionsContainer.previewTabDraggableOptionsWrapper('drag and drop into categories')
-            .find('[class*="DragAndDropMatrixstyles__DroppableWrapper"]')
+            .find('[class*="DroppableWrapper"]')
             .click({ force: true });
     },
 
@@ -1066,7 +1066,7 @@ const steps = {
      */
     enterTextInRowTitleWidthInputField: (text) => {
         dragAndDropIntoCategoriesPage.rowTitleWidthInputField()
-            .type(text, { delay: 0 })
+            .type(text)
             .blur();
     },
 
@@ -1092,7 +1092,7 @@ const steps = {
      */
     enterTextInRowMinHeightInputField: (text) => {
         dragAndDropIntoCategoriesPage.rowMinHeightInputField()
-            .type(text, { delay: 0 })
+            .type(text)
             .blur();
     },
 
@@ -1206,7 +1206,8 @@ const steps = {
 
     clearMaxResponsePerCellInputField: () => {
         dragAndDropIntoCategoriesPage.maxResponsePerCellInputField()
-            .clear();
+            .clear()
+            .blur();
     },
 
     /**
@@ -1537,10 +1538,6 @@ const tests = {
         });
     },
 
-    /**
-    * @param {string[]} numerationArray array of the numeration displayed with options numbers| lowercase| uppercase
-    * @description this function checks the numeration displayed for the options and correct answer container options when check answer is selected
-    */
     verifyCategoryCellsNumerationNotDisplayedWhenCheckAnswerIsSelected: () => {
         it('When user clicks on \'Check answer\' button then the numeration should not be displayed in the category cells', () => {
             autoScoredPreviewBase.steps.checkAnswer()

package/cypress/pages/essayResponseBasicPage.js

@@ -13,8 +13,8 @@ const selectors = {
     copyCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="copy-toggle-button"]`),
     pasteCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="paste-toggle-button"]`),
     specialCharacterCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="special-characters-toggle-button"]`),
-    customizeFormattingOptionsLabel: () => cy.get('.customized_button_label'),
-    customizeFormattingOptionsIcon: () => cy.get('.audio_icon_wrapper'),
+    customizeFormattingOptionsLabel: () => cy.get('.ngie-toggle-button-label'),
+    customizeFormattingOptionsIcon: () => cy.get('.ngie-toggle-button-icon svg'),
     customizeFormattingOptionsWrapper: () => cy.get('.customize-essay-formatting-options'),
 };
 

package/cypress/pages/essayResponseMathPage.js

@@ -12,8 +12,9 @@ const selectors = {
     textToNotBeRenderedAsLaTextInputFieldWrapper: (inputfieldNumber) => cy.get('.text-not-to-be-rendered-input').eq(inputfieldNumber),
     textToNotBeRenderedAsLaTextInputField: () => cy.get('[aria-label="Text to not be rendered as LaTex"]'),
     textToNotBeRenderedAsLaTextInputFieldCount: () => cy.get('.start-adornment'),
-    addTextButton: () => cy.get('.text-not-latex-wrapper .add-option'),
-    inputFieldLatexCharacter: () => cy.get('var[mathquill-command-id]')
+    addTextButton: () => cy.get('.text-not-latex-wrapper .ngie-icon-with-label-btn'),
+    inputFieldLatexCharacter: () => cy.get('var[mathquill-command-id]'),
+    deleteButton: () => cy.get('.icon-button-wrapper button')
 }
 
 const steps = {

package/cypress/pages/essayResponsePage.js

@@ -351,7 +351,7 @@ const tests = {
             cy.log('Adding a space and inserting more symbols in the response field.');
             essayResponsePage.responseField()
                 .click()
-                .type(' ');
+                .type('  ');
             essayResponsePage.previewTabToolbarOption(`${specialOrMathCharacters[popupType].popupTitle}`)
                 .click();
             essayResponsePage.specialAndMathCharacterPopupSymbols()

package/cypress/pages/fillInTheGapsOverImageDropdownPage.js

@@ -1,12 +1,15 @@
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, figOverImageCommonComponent, fillInTheGapsDropdownCommonComponent, commonComponents, uploadImageSectionComponent, optionsWrapperComponent, ckEditorToolbar, equationEditorFlyout, autoScoredSetCorrectAnswerSection, scoringSectionBase, autoScoredScoringSectionMultipleResponsesType, autoScoredScoringSection, previewScoringAndShowCorrectAnswerComponent, additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, questionInstructionsComponent } from "./components"
+import { createQuestionBasePage, figOverImageCommonComponent, fillInTheGapsDropdownCommonComponent, commonComponents, uploadImageSectionComponent, optionsWrapperComponent, ckEditorToolbar, equationEditorFlyout, autoScoredSetCorrectAnswerSection, scoringSectionBase, autoScoredScoringSectionMultipleResponsesType, autoScoredScoringSection, previewScoringAndShowCorrectAnswerComponent, additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, questionInstructionsComponent, answerNumerationComponent } from "./components"
 
 const selectors = {
     ...figOverImageCommonComponent,
     ...fillInTheGapsDropdownCommonComponent,
     ...questionInstructionsComponent,
+    ...answerNumerationComponent,
+    ...additionalSettingsPanel,
     responseDropdownPreviewTab: () => cy.get('[class*="ImageWithDropdownPreviewstyles__DraggableInput"] [class*="icon-chevron"]'),
-    responseDropdownWrapperPreviewTab: () => cy.get('[class*="ImageWithDropdownPreviewstyles__IconDiv"]'),
+    responseDropdownWrapperPreviewTab: () => cy.get('.response-dropdown-wrapper'),
+    responseDropdownContainerWrapperPreviewTab: () => cy.get('[class*="ImageWithDropdownPreviewstyles__IconDiv"]'),
     //Correct answer container
     previewTabCorrectAnswerContainer: () => cy.get('.cloze-with-text-correct-answer-wrapper'),
     previewTabCorrectAnswerLabel: () => cy.get('.cloze-with-text-correct-answer-label'),
@@ -31,7 +34,7 @@ const steps = {
     ...autoScoredPreviewBase.steps,
     ...autoScoredScoringSection.steps,
     ...questionInstructionsComponent.steps,
-
+    ...answerNumerationComponent.steps,
     /**
      * @param {number} responseContainerIndex Index of response container
      * @param {number[]} responseContainerPositionCoordinates Position coordinates of the response container
@@ -128,7 +131,7 @@ const steps = {
      * @description Verify that the incorrect option at the specified index has a cross-mark icon and is visible.
      */
     verifyIncorrectOptionCrossmarkIcon: (index) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
+        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
             .eq(index)
             .find('.tick-icon-wrapper')
             .should('have.class', 'icon-incorrect')
@@ -140,7 +143,7 @@ const steps = {
      * @description Verify that the correct option at the specified index has a check-mark icon and is visible.
      */
     verifyCorrectOptionCheckmarkIcon: (index) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
+        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
             .eq(index)
             .find('.tick-icon-wrapper')
             .should('have.class', 'icon-correct')
@@ -152,7 +155,7 @@ const steps = {
      * @description Verify that the option at the specified index does not have a check-mark or cross-mark.
      */
     verifyCheckmarkOrCrossmarkNotVisible: (index) => {
-        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab().eq(index).find('.tick-icon-wrapper'), 'notExist');
+        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab().eq(index).find('.tick-icon-wrapper'), 'notExist');
     },
 
     /**
@@ -194,7 +197,68 @@ const steps = {
                 let responseVerticalCoordinate = coordinatesArray[1].trim();
                 expect(responseVerticalCoordinate).to.be.eq(verticalCoordinate);
             });
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @description Verify placeholder for response dropdown in preview tab does not exist
+     */
+    verifyPlaceholderAttributeInPreviewTabDropdownNotExists: (responseDropdownIndex) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
+            .eq(responseDropdownIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.responseDropdownPlaceholderText(), 'notExist');
+            });
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @param {*} placeholderText Placeholder for dropdown
+     * @description Verify placeholder text displayed for response dropdown in preview tab
+     */
+    verifyPlaceholderAttributeInPreviewTabDropdown: (responseDropdownIndex, placeholderText) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
+            .eq(responseDropdownIndex)
+            .within(() => {
+                utilities.verifyTextContent(fillInTheGapsDropdownCommonComponent.responseDropdownPlaceholderText(), placeholderText);
+            });
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @param {number} height Height of response dropdown in preview tab
+     * @description Verify height of response dropdown in preview tab
+     */
+    verifyDropdownHeightPreviewTab: (responseDropdownIndex, height) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
+            .eq(responseDropdownIndex)
+            .should('have.attr', 'height', `${height}px`);
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @param {number} width Width of response dropdown in preview tab
+     * @description Verify width of response dropdown in preview tab
+     */
+    verifyDropdownWidthPreviewTab: (responseDropdownIndex, width) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
+            .eq(responseDropdownIndex)
+            .should('have.attr', 'width', `${width}px`);
+    },
+
+    /**
+      * Verify the numeration of response fields in the Preview Tab.
+      * @param {string[]} optionNumerationArray - An array of expected numeration strings to verify.
+      */
+    verifyResponseDropdownNumeration: (optionNumerationArray) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
+        optionNumerationArray.forEach((optionNumeration, count) => {
+            fillInTheGapsOverImageDropdownPage.responseNumeration()
+                .eq(count)
+                .should('have.text', `${optionNumeration}`);
+        });
     }
+
 }
 
 const tests = {
@@ -206,8 +270,11 @@ const tests = {
     ...autoScoredScoringSection.tests,
     ...commonComponents.tests,
     ...previewScoringAndShowCorrectAnswerComponent.tests,
+    ...answerNumerationComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...autoScoredAdditionalSettings.tests,
     ...questionInstructionsComponent.tests,
-
+    ...createQuestionBasePage.tests,
     /**
      * @param {number} minimumScoreIfAttemptedPoints - The minimum score awarded if attempted.
      * @param {number} allocatedPoints - The expected allocated points for the question.

package/cypress/pages/fillInTheGapsTextPage.js

@@ -59,7 +59,7 @@ const steps = {
     expandResponseAccordion: (responseIndex) => {
         fillInTheGapsTextPage.responseAccordionWrapper()
             .eq(responseIndex)
-            .find('.additional-settings-panel')
+            .find('[role="button"]')
             .should('have.attr', 'aria-expanded', 'false')
             .click()
             .should('have.attr', 'aria-expanded', 'true');

package/cypress/pages/highlightImagePage.js

@@ -37,13 +37,11 @@ const selectors = {
     highlighImageCanvasWrapper: () => cy.get('.drawing-tool__wrapper .drawing-tool__canvas'),
     highlighImageCanvas: () => cy.get('.drawing-tool__wrapper .upper-canvas'),
     setCorrectAnswerSectionHighlight: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a'),
-    setCorrectAnswerSectionHighlightActivePattern: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPattern-"]'),
     setCorrectAnswerSectionHighlightFillColor: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPatternWrapper"]'),
     setCorrectAnswerSectionHighlightPolygon: () => cy.get('[class*="HighlightImageControlstyles__PolygonWrapper"]'),
     highlightNumeration: () => cy.get('[class*="styles__TextWrapper"]'),
     setCorrectAnswerSectionImage: () => cy.get('.highlight-svg-responseive image'),
     previewTabHighlight: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
-    previewTabHighlightActivePattern: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPattern-"]'),
     previewTabHighlightFillColor: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPatternWrapper"]'),
     previewTabHighlightPolygon: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__PolygonWrapper"]'),
     multipleSelectionCheckboxLabel: () => cy.get('[data-ngie-testid="multiple-selection-checkbox"] .MuiFormControlLabel-label'),
@@ -486,14 +484,14 @@ const steps = {
 
     clickOnUndoTool: () => {
         highlightImagePage.undoTool()
-            .click()
-            .blur();
+            .click();
+        steps.clickOnPenTool();
     },
 
     clickOnRedoTool: () => {
         highlightImagePage.redoTool()
-            .click()
-            .blur();
+            .click();
+        steps.clickOnPenTool();
     },
 
     clickOnClearAllTool: () => {
@@ -1150,8 +1148,9 @@ const steps = {
     * @description this function verifies that active pattern is displayed on the highlight region in Set correct answer section
     */
     verifyActivePatternIsDisplayedOnHighlightRegionInSetCorrectAnswerSection: (index) => {
-        highlightImagePage.setCorrectAnswerSectionHighlightActivePattern()
+        highlightImagePage.setCorrectAnswerSectionHighlight()
             .eq(index)
+            .find('[class*="HighlightImageControlstyles__DiamondPattern-"]')
             .should('exist');
     },
 
@@ -1160,8 +1159,9 @@ const steps = {
     * @description this function verifies that active pattern is displayed on the highlight region in Preview tab
     */
     verifyActivePatternIsDisplayedOnHighlightRegionInPreviewTab: (index) => {
-        highlightImagePage.previewTabHighlightActivePattern()
+        highlightImagePage.previewTabHighlight()
             .eq(index)
+            .find('[class*="HighlightImageControlstyles__DiamondPattern-"]')
             .should('exist');
     },
 
@@ -1170,8 +1170,9 @@ const steps = {
     * @description this function verifies that active pattern is not displayed on the highlight region in Set correct answer section
     */
     verifyActivePatternIsNotDisplayedOnHighlightRegionInSetCorrectAnswerSection: (index) => {
-        highlightImagePage.setCorrectAnswerSectionHighlightActivePattern()
+        highlightImagePage.setCorrectAnswerSectionHighlight()
             .eq(index)
+            .find('[class*="HighlightImageControlstyles__DiamondPattern-"]')
             .should('not.exist');
     },
 
@@ -1180,8 +1181,9 @@ const steps = {
     * @description this function verifies that active pattern is not displayed on the highlight region in Preview Tab
     */
     verifyActivePatternIsNotDisplayedOnHighlightRegionInPreviewTab: (index) => {
-        highlightImagePage.previewTabHighlightActivePattern()
+        highlightImagePage.previewTabHighlight()
             .eq(index)
+            .find('[class*="HighlightImageControlstyles__DiamondPattern-"]')
             .should('not.exist');
     }
 }