itemengine-cypress-automation 1.0.205-8thJuneFixes-5ad148f.0 → 1.0.206-12thJuneFixesAndRepoUpdate-5fe2304.0

package/cypress/e2e/ILC/EssayResponse/essayResponseCustomizeFormattingOptions1.smoke.js

@@ -1,7 +1,6 @@
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import { essayResponsePage } from "../../../pages";
 import utilities from "../../../support/helpers/utilities";
-import { equationEditorFlyout } from "../../../pages/components";
 const css = Cypress.env('css');
 const grepTags = Cypress.env('grepTags');
 
@@ -155,7 +154,6 @@ describe('Create question page - Essay Response: Customize formatting options (f
         });
     });
 
-    //Failing due https://weldnorthed.atlassian.net/browse/IEI-2433
     if (!grepTags || !grepTags.includes('smoke')) {
         describe('Bold, Italic, Underline, Strikethrough formatting options - Preview tab', () => {
             abortEarlySetup();

package/cypress/e2e/ILC/EssayResponse/previewHyperlink.js

@@ -23,13 +23,9 @@ describe('Essay Response Preview: Hyperlink', () => {
             utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarOption('Insert Hyperlink'), 'visible');
         });
 
-        it('When user clicks on Hyperlink option, then the Hyperlink popup should appear and by default the cursor should be focused inside the \'Display text\' input field', () => {
+        it('When user clicks on Hyperlink option, then the Hyperlink popup should appear', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Hyperlink');
             utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogBox(), 'visible');
-            //To check that focus is inside input field 
-            utilities.verifyCSS(essayResponsePage.hyperlinkDialogboxDisplayTextInputField(), {
-                'border-color': css.color.activeButtons
-            });
         });
 
         it('Title of the popup should be \'Hyperlink\'', () => {

package/cypress/e2e/ILC/FeedbackScaleNew/editTabBasicSection.js

@@ -177,6 +177,7 @@ describe('Create item page: Feedback scale - Question instructions, Legend text,
         });
     });
 
+    //Failing due to https://redmine.zeuslearning.com/issues/573030
     describe('Scoring', () => {
         abortEarlySetup();
         before(() => {

package/cypress/e2e/ILC/FillInTheGapsDropdownNew/editTabBasicSection.js

@@ -44,9 +44,9 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             utilities.verifyElementCount(fillInTheGapsDropdownPage.responseArea(), 2);
         });
 
-        it('The dropdown should be displayed with numeric count and a close button in the question input field, dropdown settings button should not be displayed when "User specified width" is in selected state', () => {
+        it('The dropdown should be displayed with numeric count and a close button in the question input field, dropdown settings button should be displayed when "User specified width" is in selected state', () => {
             for (let index = 0; index < 2; index++) {
-                fillInTheGapsDropdownPage.steps.verifyResponseAreaContents(index, 'notExist')
+                fillInTheGapsDropdownPage.steps.verifyResponseAreaContents(index)
             };
         });
 
@@ -78,7 +78,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             fillInTheGapsDropdownPage.steps.verifyResponseAreaButtonEnabled();
             fillInTheGapsDropdownPage.steps.clickOnAddResponseAreaButton();
             utilities.verifyElementCount(fillInTheGapsDropdownPage.responseArea(), 3);
-            fillInTheGapsDropdownPage.steps.verifyResponseAreaContents(2, 'notExist');
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaContents(2);
             utilities.verifyElementCount(fillInTheGapsDropdownPage.dropdownOptionsTab(), 3);
             utilities.verifyElementCount(fillInTheGapsDropdownPage.dropdownSpecifyCorrectAnswerSection(), 3);
             fillInTheGapsDropdownPage.steps.expandAdditionalSettings();
@@ -92,7 +92,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             cy.log('Checking if 3rd dropdown gets removed from the question input field and the numeric counts get updated')
             utilities.verifyElementCount(fillInTheGapsDropdownPage.responseArea(), 2);
             for (let index = 0; index < 2; index++) {
-                fillInTheGapsDropdownPage.steps.verifyResponseAreaContents(index, 'notExist')
+                fillInTheGapsDropdownPage.steps.verifyResponseAreaContents(index)
             };
             utilities.verifyElementCount(fillInTheGapsDropdownPage.dropdownOptionsTab(), 2);
             utilities.verifyElementCount(fillInTheGapsDropdownPage.dropdownSpecifyCorrectAnswerSection(), 2);

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdownNew/dropdownOptionsSection.js

@@ -304,6 +304,7 @@ describe('Create item page - Fill in the gaps over image - dropdown: Dropdown op
             fillInTheGapsOverImageDropdownPage.steps.expandDropdownInPreviewTab(0);
             let optionsForDropdown1 = optionsForDropdown.slice(1, 4);
             fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsPreviewTab(optionsForDropdown1);
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown1[0]);
         });
 
         it('When user has adds another response area, then the newly added dropdown should be in disabled state in preview tab', () => {

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdownNew/editTabBasicSection.js

@@ -404,7 +404,20 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             fillInTheGapsOverImageDropdownPage.steps.verifyCanvasHeightInPreviewTab(432);
         });
 
-        fillInTheGapsOverImageDropdownPage.tests.verifyImageAlternativeTextPreviewTabFunctionality();
+        it('When user enters text in the \'Alternative text\' input field, then alternative text should be displayed in the \'Preview tab\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.enterAndVerifyImageAlternativeTextInInputField('This is Alternative text for image');
+            cy.log('Switching to Preview Tab');
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageAlternativeTextInPreviewTab('This is Alternative text for image');
+        });
+
+        it('When user clears text in the \'Alternative text\' input field, then default alternative text should not be displayed in the \'Preview tab\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.clearImageAlternativeTextInputFieldText();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyNoImageAlternativeTextPresentInPreviewTab();
+        });
 
         fillInTheGapsOverImageDropdownPage.tests.verifyImageNotExistPreviewTab();
     });

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdownNew/styleAndLayoutCutomization.js

@@ -0,0 +1,378 @@
+import { dialogBoxBase, fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const borderStyles = ["Dashed", "Dotted", "Solid", "None"];
+const connectorStyles = ["Circle", "Square", "Diamond", "None"];
+
+describe('Create Item page - Fill in the gaps over image with text: Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+    });
+
+
+    describe('Style and layout customization accordion: Text container section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Text container" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.componentContainerLabel(), 'Dropdown');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyFillColorSectionContents();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyBorderColorSectionContents();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyBorderStyleSectionContents('Solid');
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyFillColorTooltips();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyBorderColorTooltips();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyStyleAndLayoutCustomizationAccordionContentsCSSAndA11y('Solid');
+    });
+
+    describe('Fill color - Edit tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the canvas image should be the default selected color', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageFillColor(0, css.color.optionsBg);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the canvas image', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectColorBlock(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageFillColor(0, css.color.transparent);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the background color of the text containers in the canvas image should be the modified selected color', () => {
+            fillInTheGapsOverImageDropdownPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageFillColor(0, modifiedColor);
+        });
+
+        it('When the adds a new text container, then the background color of the newly added text container should be the modified selected color', () => {
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageFillColor(0, modifiedColor);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageFillColor(1, modifiedColor);
+        });
+    });
+
+    describe('Border color - Edit tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the canvas image should be the default selected color', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageBorderColor(0, `1px solid ${css.color.activeComponentBorder}`);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the canvas image', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectColorBlock(3);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageBorderColor(0, `1px solid ${css.color.transparent}`);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the background color of the text containers in the canvas image should be the modified selected color', () => {
+            fillInTheGapsOverImageDropdownPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageBorderColor(0, `1px solid ${modifiedColor}`);
+        });
+
+        it('When the adds a new text container, then the background color of the newly added text container should be the modified selected color', () => {
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageBorderColor(1, `1px solid ${modifiedColor}`);
+        });
+    });
+
+    describe('Border color - Preview tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the preview tab should be the default selected color', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownBorderColor(0, `1px solid ${css.color.activeComponentBorder}`);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectColorBlock(3);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownBorderColor(0, `1px solid ${css.color.transparent}`);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownBorderColor(0, `1px solid ${modifiedColor}`);
+        });
+
+        it('The background color of the text containers in the preview tab should be the modified selected color', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownBorderColor(1, `1px solid ${modifiedColor}`);
+        });
+    });
+
+    describe('Color popup functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user clicks on the \'Edit color\' present in an \'Text color\' popup, then a select color popup should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.editColor(0);
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        colorPopupComponent.tests.verifyColorPopupSelectColorTitle();
+
+        colorPopupComponent.tests.verifySaturationAndOpacityGradientPalette('rgb(255, 255, 255)');
+
+        colorPopupComponent.tests.verifyColorHuePaletteAndHexInputField('rgb(255, 0, 0)', '#ffffff');
+
+        colorPopupComponent.tests.verifyColorPopupFunctionality();
+    });
+
+    describe('Color popup - Updating the selected color', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette and the opacity value should not change', () => {
+            fillInTheGapsOverImageDropdownPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(121, 60, 60)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(119, 60, 60)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#793c3c');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(119, 60, 60)');
+        });
+
+        it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(60, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3c7979');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(60, 119, 119)');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(255, 0, 0)');
+        });
+    });
+
+    describe('Color popup - \'Cancel\' and \'Ok\' buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            fillInTheGapsOverImageDropdownPage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgb(245, 248, 255)');
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Ok\' button, then the popup should close, the color block should change to the new selected color and the modifications in the color popup should persist', () => {
+            cy.log('Pre-step: clicking on the edit color button')
+            fillInTheGapsOverImageDropdownPage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgba(255, 0, 0, 0.5)');
+        });
+    });
+
+    describe('Border style - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the "Dashed" border style is in selected state, then the border style of the text containers in the canvas image should be "Dashed"', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageBorderStyle(0, 'solid');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the text containers in the canvas image should update to ${style}`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageBorderStyle(0, style);
+            });
+        })
+    });
+
+    describe('Border style - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the "Dashed" border style is in selected state, then the border style of the text containers in the preview tab should be "Dashed"', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageBorderStyle(0, 'solid');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the text containers in the preview tab should update to ${style}`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+                fillInTheGapsOverImageDropdownPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaOverImageBorderStyle(0, style);
+            });
+        })
+    });
+
+    describe('Dropdown connector style contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Dropdown connector style" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.dropdownConnectorStyleLabel(), 'Dropdown connector style');
+        });
+
+        it('"Connector end point shape" label along with four icon buttons - "Circle", "Square", "Diamond" and "None" should be displayed. By default, "Circle" option should be in selected state', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.connectorEndPointShapeLabel(), 'Connector end point shape');
+            connectorStyles.forEach((option) => {
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.connectorEndPointShapeOptions(option.toLowerCase()), 'exist');
+            });
+            fillInTheGapsOverImageDropdownPage.steps.verifyConnectorStyleOptionSelected('circle')
+        });
+    });
+
+    describe('Dropdown connector style - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseAreaPointerStyle('left');
+        });
+
+        it('When the "Circle" connector style is in selected state, then the connector style of the text containers in the canvas image should be "Solid"', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaConnectorEndPointShape('Circle');
+        });
+
+        connectorStyles.forEach((button) => {
+            it(`When the user selects ${button}, then the connector style of the text containers in the canvas image should update to ${button}`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.selectEndPointShapeButton(button);
+                fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaConnectorEndPointShape(button);
+            });
+        })
+    });
+
+    describe('Dropdown connector style - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseAreaPointerStyle('left');
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the "Circle" connector style is in selected state, then the connector style of the text containers in the canvas image should be "Solid"', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab('Circle');
+        });
+
+        connectorStyles.forEach((button) => {
+            it(`When the user selects ${button}, then the connector style of the text containers in the canvas image should update to ${button}`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+                fillInTheGapsOverImageDropdownPage.steps.selectEndPointShapeButton(button);
+                fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageDropdownPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab(button);
+            });
+        })
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/Scoring/partialDifferentWeightsAlternativePointsGreaterThanCorrectPoints.js

@@ -22,7 +22,7 @@ describe('Create item page - Fill in the gaps over image with text: Partial diff
             fillInTheGapsOverImageTextPage.steps.addAlternativeAnswerAccordion(1);
             fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Petals' }, { responseIndex: 1, responseText: 'Leaves' }, { responseIndex: 2, responseText: 'Stem' }]);
             fillInTheGapsOverImageTextPage.steps.allotPartialDifferentWeightsPoints({ 0: 6, 1: 4, 2: 5 });
-             //fillInTheGapsOverImageTextPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            //fillInTheGapsOverImageTextPage.steps.checkAllowStudentToCheckAnswerCheckbox();
             fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
         });
 
@@ -203,9 +203,9 @@ describe('Create item page - Fill in the gaps over image with text: Partial diff
             fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Branch' }]);
             fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(10.4, 23);
             fillInTheGapsOverImageTextPage.steps.switchToGradingView();
-            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionIcon(0);
             fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionIcon(1);
-            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionIcon(2);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionIcon(2);
             fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
             fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Petals', 'Leaves', 'Stem']);
             fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/specifyCorrectAnswerSection.js

@@ -39,13 +39,14 @@ describe('Create Item page - Fill in the gaps over image - text: Specify correct
 
         it('When user has added points and given input in response accordion answer input field in the \'Correct\' accordion, then the user should be able to add alternative answer for the question using \'Add alternative answer\' button', () => {
             fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Petals' }]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 1, responseText: 'Flowers' }]);
             fillInTheGapsOverImageTextPage.steps.allotPoints(10);
             fillInTheGapsOverImageTextPage.steps.addAlternativeAnswerAccordion(1);
         });
 
         it('When user has added an alternate answer accordion, then the newly added alternate answer accordion should be in expanded state and the correct answer accordion should be in collapsed state', () => {
             fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerAccordionIsCollapsed();
-            fillInTheGapsOverImageTextPage.steps.verifyAlternateAnswerAccordionIsExpanded(1);
+            fillInTheGapsOverImageTextPage.steps.verifyAlternateAnswerAccordionIsExpanded(0);
         });
 
         fillInTheGapsOverImageTextPage.tests.verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Alternate');
@@ -59,6 +60,7 @@ describe('Create Item page - Fill in the gaps over image - text: Specify correct
         it('User should be able to remove alternative correct answer by clicking on the \'Delete\' icon button alongside alternative answer accordion and the name of the alternative answer accordions should get updated accordingly', () => {
             cy.log('Set correct answer and points in alternative 2 accordion, then switch to alternative 1 accordion and click delete icon button');
             fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Petals' }]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 1, responseText: 'Leaves' }]);
             fillInTheGapsOverImageTextPage.steps.allotPoints(5);
             fillInTheGapsOverImageTextPage.steps.deleteAlternativeAnswerAccordion(1);
             fillInTheGapsOverImageTextPage.steps.verifyAlternativeAnswerAccordionNotExists(2);