itemengine-cypress-automation 1.0.206-12thJuneFixesAndRepoUpdate-5fe2304.0 → 1.0.207-18thJuneRepoUpdate-460e9c8.0

package/cypress/e2e/ILC/ImageHighlight/imageHighlightStyle.js

@@ -109,6 +109,7 @@ describe('Create Item page - Image Highlight : Image selection style', () => {
             imageHighlightPage.steps.uploadFile('highlightImage.jpg');
             imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
             imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.checkShowAvailableOptionsToStudentsCheckbox();
             imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
             imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
             imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
@@ -120,7 +121,7 @@ describe('Create Item page - Image Highlight : Image selection style', () => {
             imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
             imageHighlightPage.steps.switchToPreviewTab();
             imageHighlightPage.steps.highlightARegionInPreviewTab(0);
-            imageHighlightPage.steps.verifyFillInHighlightRegionPreviewTabSection(3);
+            imageHighlightPage.steps.verifyFillInHighlightRegionPreviewTabSection(0);
             imageHighlightPage.steps.verifyDefaultHighlightRegionSpecifyCorrectAnswer(1);
             imageHighlightPage.steps.verifyDefaultHighlightRegionSpecifyCorrectAnswer(2);
             imageHighlightPage.steps.switchToEditTab();
@@ -131,7 +132,7 @@ describe('Create Item page - Image Highlight : Image selection style', () => {
             imageHighlightPage.steps.verifyToggleButtonSelected('Outline');
             imageHighlightPage.steps.switchToPreviewTab();
             imageHighlightPage.steps.highlightARegionInPreviewTab(0);
-            imageHighlightPage.steps.verifyOutlineHighlightRegionPreviewTabSection(3);
+            imageHighlightPage.steps.verifyOutlineHighlightRegionPreviewTabSection(0);
             imageHighlightPage.steps.verifyDefaultHighlightRegionSpecifyCorrectAnswer(1);
             imageHighlightPage.steps.verifyDefaultHighlightRegionSpecifyCorrectAnswer(2);
             imageHighlightPage.steps.switchToEditTab();
@@ -142,7 +143,7 @@ describe('Create Item page - Image Highlight : Image selection style', () => {
             imageHighlightPage.steps.verifyToggleButtonSelected('Pattern');
             imageHighlightPage.steps.switchToPreviewTab();
             imageHighlightPage.steps.highlightARegionInPreviewTab(0);
-            imageHighlightPage.steps.verifyPatternHighlightRegionPreviewTabSection(3);
+            imageHighlightPage.steps.verifyPatternHighlightRegionPreviewTabSection(0);
             imageHighlightPage.steps.verifyDefaultHighlightRegionSpecifyCorrectAnswer(1);
             imageHighlightPage.steps.verifyDefaultHighlightRegionSpecifyCorrectAnswer(2);
         });

package/cypress/pages/chartsBarPage.js

@@ -14,9 +14,9 @@ const selectors = {
     ...autoScoredScoringPreviewTab,
     ...correctIncorrectAnswerLabelComponent,
     ...chartsCommonComponent,
-    ...selectQuestionResourceToolPage,
     ...autoScoredSpecifyCorrectAnswerSection,
     ...layoutSectionComponent,
+    ...selectQuestionResourceToolPage,
 
     barDragHandle: () => cy.get('.bar-drag-handle'),
     bar: () => cy.get('.ngie-chart-point'),
@@ -51,6 +51,7 @@ const selectors = {
     barLabelHorizontalSelectChartType: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartGridstyle__ValueDiv"]'),
     selectChartTypeMaxXAndYLabel: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldLabel"]'),
     selectChartTypeMaxXAndYInputField: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldWrapper"] input'),
+    colorBlockBarTooltipSelectChartType: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartTooltipstyles__ColorBox"]'),
 
     //specify correct answer section
     specifyCorrectAnswerBarDragHandle: () => cy.get('.ngie-accordion .bar-drag-handle'),
@@ -68,6 +69,7 @@ const selectors = {
     previewTabBarTooltipColorBlock: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartTooltipstyles__ColorBox"]'),
     xAxisCoordinatePreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartGridstyle__HorizontalNameDiv"]'),
     barLabelHorizontalPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartGridstyle__ValueDiv"]'),
+    previewTabToolsAddBarButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button[aria-label="Add bar"]'),
 }
 
 const steps = {
@@ -84,6 +86,7 @@ const steps = {
     ...layoutSectionComponent.steps,
     ...chartsCommonComponent.steps,
     ...dialogBoxBase.steps,
+    ...selectQuestionResourceToolPage.steps,
     /**
      * @description set the bar height/value in the select chart type section chart
      * @param {Object} barProperties - The properties and changes to be done on the bar
@@ -120,7 +123,7 @@ const steps = {
      * @description updates height of bar once
      * @param {number} barIndex index of bar
      */
-    keyBoardUpBarInSelectChartType: (barIndex) => {
+    incrementBarValueUsingUpArrowSelectChartType: (barIndex) => {
         utilities.getNthElement(chartsBarPage.selectChartTypeBarDragHandle(), barIndex)
             .focus()
             .type('{upArrow}');
@@ -139,6 +142,77 @@ const steps = {
             .should('have.attr', 'height', barHeight);
     },
 
+    /**
+     * @description verify locked bar
+     * @param {Object} barProperties - The properties and changes to be done on the bar
+     * @param {number} barProperties.barIndex index of the bar
+     * @param {number} barProperties.barValue value of th bar as per Y axis
+     * @param {number} barProperties.range Maximum value of the axis on which bar value is determined
+     */
+    verifyLockedBarInSelectChartType: ({ barIndex, barValue, range }) => {
+        chartsBarPage.steps.verifyBarHeightInSelectChartType({ barIndex, barValue, range });
+        chartsBarPage.chartContainerSelectChartType()
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), barIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'visible');
+                        utilities.verifyElementVisibilityState(chartsBarPage.barDragHandle().find('svg'), 'notExist');
+                    });
+            });
+    },
+
+    /**
+     * @description verify unlocked bar
+     * @param {number} index index of the bar
+     */
+    verifyUnlockedBarInSelectChartType: (index) => {
+        chartsBarPage.chartContainerSelectChartType()
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), index)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'notExist');
+                        utilities.verifyElementVisibilityState(chartsBarPage.barDragHandle().find('svg'), 'visible');
+                    });
+            });
+        utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), index));
+        chartsBarPage.steps.verifyLockUnlockButtonIcon('Unlocked');
+        utilities.triggerMouseout(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), index));
+    },
+
+    /**
+    * Verify locked bar is uneditable 
+    * @param {number} barIndex index of the bar
+    */
+    verifyLockedBarIsNotEditableInSelectChartType: (barIndex) => {
+        utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex)
+            .invoke('attr', 'height')
+            .then((barValue) => {
+                let originalBarValue = barValue;
+                utilities.verifyElementVisibilityState(chartsBarPage.dragHandleButton(), 'notExist');
+                utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex)
+                    .should('have.attr', 'height', originalBarValue);
+            });
+    },
+
+    /**
+    * @param {number} barIndex index of the bar
+    */
+    decrementBarValueUsingDownArrowSelectChartType: (barIndex) => {
+        utilities.getNthElement(chartsBarPage.selectChartTypeBarDragHandle(), barIndex)
+            .focus()
+            .type('{downArrow}');
+    },
+
+    /**
+    * @description Delete bar
+    *@param {number} barIndex Index of the bar to be deleted
+    */
+    deleteBarInSelectChartType: (barIndex) => {
+        utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex))
+        chartsBarPage.barAndPointTooltipDeleteButton()
+            .click();
+    },
+
     /**
      * @description increase the bar height/value in the specify correct answer section chart
      * @description set the bar height/value in the specify correct answer section chart
@@ -176,7 +250,7 @@ const steps = {
      * @description updates height of bar once
      * @param {number} barIndex index of bar
      */
-    keyBoardUpBarInSpecifyCorrectAnswer: (barIndex) => {
+    increaseBarValueUsingUpArrowInSpecifyCorrectAnswer: (barIndex) => {
         utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBarDragHandle(), barIndex)
             .focus()
             .type('{upArrow}');
@@ -212,6 +286,23 @@ const steps = {
             });
     },
 
+    /**
+     * @description Unlock the bar in select chart type section chart
+     * @param {number} barIndex Index of the bar to be unlocked 
+     */
+    unlockBar: (barIndex) => {
+        utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex))
+        chartsBarPage.barAndPointTooltipLockUnlockButton()
+            .click();
+        chartsBarPage.barAndPointTooltipLockUnlockButton()
+            .should('have.attr', 'aria-label', 'unlocked bar');
+        utilities.triggerMouseout(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex));
+        utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'notExist');
+            });
+    },
+
     /**
     * @description Edit bar label in select chart type section chart
     * @param {number} barIndex Index of the bar to be edited
@@ -264,21 +355,6 @@ const steps = {
             });
     },
 
-    /**
-     * Verify the bar is locked in correct answer section
-     * @param {number} barIndex index of the bar
-     */
-    verifyBarIsLockedInSpecifyCorrectAnswer: (barIndex) => {
-        chartsBarPage.chartContainerSpecifyCorrectAnswer()
-            .within(() => {
-                utilities.getNthElement(chartsBarPage.bar(), barIndex)
-                    .within(() => {
-                        utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'visible');
-                        utilities.verifyElementVisibilityState(chartsBarPage.barDragHandle().find('svg'), 'notExist');
-                    });
-            });
-    },
-
     /**
    * Verify the correct/incorrect icon not exists for bar
    * @param {number} barIndex index of the bar 
@@ -302,15 +378,37 @@ const steps = {
      */
     verifyLockedBarInSpecifyCorrectAnswer: ({ barIndex, barValue, range }) => {
         chartsBarPage.steps.verifyBarHeightInSpecifyCorrectAnswer({ barIndex, barValue, range });
-        chartsBarPage.steps.verifyBarIsLockedInSpecifyCorrectAnswer(barIndex);
+        chartsBarPage.chartContainerSpecifyCorrectAnswer()
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), barIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'visible');
+                        utilities.verifyElementVisibilityState(chartsBarPage.barDragHandle().find('svg'), 'notExist');
+                    });
+            });
         chartsBarPage.steps.verifyBarCorrectIncorrectIconNotExistsInSpecifyCorrectAnswer(barIndex);
     },
 
     /**
-     * Verify locked bar is uneditable in preview tab
+    * @description verify unlocked bar
+    * @param {number} index index of the bar
+    */
+    verifyUnlockedBarInSpecifyCorrectAnswer: (index) => {
+        chartsBarPage.chartContainerSpecifyCorrectAnswer()
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), index)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'notExist');
+                        utilities.verifyElementVisibilityState(chartsBarPage.barDragHandle().find('svg'), 'visible');
+                    });
+            });
+    },
+
+    /**
+     * Verify locked bar is uneditable 
      * @param {number} barIndex index of the bar
      */
-    verifyLockedBarIsUneditableInSpecifyCorrectAnswer: (barIndex) => {
+    verifyLockedBarIsNotEditableInSpecifyCorrectAnswer: (barIndex) => {
         utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex)
             .invoke('attr', 'height')
             .then((barValue) => {
@@ -415,13 +513,13 @@ const steps = {
             });
     },
 
-    keyBoardUpBarInPreviewTab: (barIndex) => {
+    increaseBarValueUsingUpArrowInPreviewTab: (barIndex) => {
         utilities.getNthElement(chartsBarPage.previewTabBarDragHandle(), barIndex)
             .focus()
             .type('{upArrow}');
     },
 
-    keyBoardDownBarInPreviewTab: (barIndex) => {
+    decreaseBarValueUsingDownArrowInPreviewTab: (barIndex) => {
         utilities.getNthElement(chartsBarPage.previewTabBarDragHandle(), barIndex)
             .focus()
             .type('{downArrow}');
@@ -452,16 +550,6 @@ const steps = {
             .click();
     },
 
-    /**
-    * @description Delete bar in specify correct answer section
-    * @param {number} barIndex Index of the bar to be deleted
-     */
-    deleteBarInSpecifyCorrectAnswerSection: (barIndex) => {
-        utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex))
-        chartsBarPage.barAndPointTooltipDeleteButton()
-            .click();
-    },
-
     /**
      * Verify the bar height in correct answer section tab
      * @param {Object} barProperties - The properties of the bar
@@ -495,6 +583,21 @@ const steps = {
             });
     },
 
+    /**
+     * @description verify unlocked bar
+     * @param {number} index index of the bar
+     */
+    verifyUnlockedBarInPreviewTab: (index) => {
+        chartsBarPage.chartsContainerPreviewTab()
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), index)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'notExist');
+                        utilities.verifyElementVisibilityState(chartsBarPage.barDragHandle().find('svg'), 'visible');
+                    });
+            });
+    },
+
     /**
      * Verify the correct/incorrect icon of bar in preview tab
      * @param {number} barIndex index of the bar 
@@ -665,7 +768,27 @@ const steps = {
      * @param {number} max - The expected maximum value.
      */
     verifyMaxValueOnYAxis: (max) => {
-        chartsBarPage.selectChartTypeBarLabel()
+        chartsBarPage.yAxisCoordinate()
+            .eq(0)
+            .should('have.text', max);
+    },
+
+    /**
+     * Verifies the maximum value label on the y-axis
+     * @param {number} max - The expected maximum value.
+     */
+    verifyMaxValueOnYAxisSpecifyCorrectAnswer: (max) => {
+        chartsBarPage.yAxisCoordinateSpecifyCorrectAnswer()
+            .eq(0)
+            .should('have.text', max);
+    },
+
+    /**
+     * Verifies the maximum value label on the y-axis
+     * @param {number} max - The expected maximum value.
+     */
+    verifyMaxValueOnYAxisPreviewTab: (max) => {
+        chartsBarPage.previewTabYAxisCoordinate()
             .eq(0)
             .should('have.text', max);
     },
@@ -1088,9 +1211,9 @@ const tests = {
     ...autoScoredSpecifyCorrectAnswerSection.tests,
     ...autoScoredStudentViewSettings.tests,
     ...studentViewSettingsLabelComponent.tests,
+    ...layoutSectionComponent.tests,
     ...createQuestionBasePage.tests,
     ...commonComponents.tests,
-    ...layoutSectionComponent.tests,
 
     /**
      * Verify bar tooltip contents with css and a11y in preview tab
@@ -1245,6 +1368,60 @@ const tests = {
             utilities.verifyElementVisibilityState(chartsBarPage.barAndPointTooltipWrapper(), 'notExist');
         });
     },
+
+    /**
+    * Verify bar tooltip contents with css and a11y
+    * @param {number} barIndex index of the bar
+    * @param {string} barBackground rgb value of the bar background
+    * @param {string} barLabel label of the bar
+    */
+    verifyBarTooltipContentsCSSAndA11yInSelectChartType: (barIndex, barBackground, barLabel) => {
+        it('When user hovers over the bar, then bar tooltip should be displayed', () => {
+            utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex));
+            utilities.verifyElementVisibilityState(chartsBarPage.barAndPointTooltipWrapper(), 'visible');
+        });
+
+        it('The bar tooltip should contain lock bar button, bar background color block, bar label button, and delete button', () => {
+            utilities.verifyElementVisibilityState(chartsBarPage.barAndPointTooltipLockUnlockButton(), 'visible');
+            utilities.verifyCSS(chartsBarPage.colorBlockBarTooltipSelectChartType(), {
+                'background-color': barBackground
+            });
+            utilities.verifyInnerText(barAndLineChartComponent.barAndPointTooltipLabelButton(), barLabel);
+            utilities.verifyElementVisibilityState(barAndLineChartComponent.barAndPointTooltipDeleteButton(), 'visible');
+        });
+
+        it('By default, lock bar button should be in unlocked state', () => {
+            chartsBarPage.steps.verifyLockUnlockButtonIcon('Unlocked');
+        });
+
+        it('When user hovers on the lock bar button, then \'Unlocked bar\' tooltip should be displayed', () => {
+            chartsBarPage.steps.verifyTooltipInnerText(chartsBarPage.barAndPointTooltipLockUnlockButton, 'Unlocked bar');
+        });
+
+        it('When user hovers on the delete button, then \'Delete bar\' tooltip should be displayed', () => {
+            utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex));
+            chartsBarPage.barAndPointTooltipDeleteButton()
+                .verifyTooltip('Delete bar');
+        });
+
+        it('CSS of delete bar tooltip', { tags: 'css' }, () => {
+            utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex));
+            utilities.triggerMouseover(chartsBarPage.barAndPointTooltipDeleteButton());
+            barAndLineChartComponent.barAndPointTooltipDeleteButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+        });
+
+        it('Accessibility of delete bar tooltip', { tags: 'a11y' }, () => {
+            utilities.triggerMouseover(chartsBarPage.barAndPointTooltipDeleteButton());
+            cy.checkAccessibility(chartsBarPage.barAndPointTooltipWrapper());
+            utilities.triggerMouseout(chartsBarPage.barAndPointTooltipDeleteButton());
+        });
+
+        it('When user hovers away from the bar, then bar tooltip should be not be displayed', () => {
+            utilities.triggerMouseout(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex));
+            utilities.verifyElementVisibilityState(chartsBarPage.barAndPointTooltipWrapper(), 'notExist');
+        });
+    },
 }
 
 export const chartsBarPage = {

package/cypress/pages/chartsDotPlotPage.js

@@ -120,21 +120,6 @@ const steps = {
     ...selectQuestionResourceToolPage.steps,
     ...dialogBoxBase.steps,
 
-    /**
-     * @param {string} element denotes element
-     * @param {string} text denotes tooltip text
-     * @description function is used to hover over element and verify inner text of its tooltip
-     */
-    verifyTooltipInnerText: (element, text, index = null) => {
-        element()
-            .eq(index)
-            .trigger('mouseover', { force: true });
-        utilities.verifyInnerText(commonComponents.tooltipText(), text);
-        element()
-            .eq(index)
-            .trigger('mouseout', { force: true });
-    },
-
     //select chart type
     selectDotPlot: () => {
         chartsDotPlotPage.dotPlotToggleButton()
@@ -539,11 +524,11 @@ const steps = {
             });
     },
 
-      /**
-     * Verify the bar is unlocked 
-     * @param {number} index index of the bar
-     */
-      verifyDotColumnIsUnlockedInSelectChartType: ({ point, min, interval }) => {
+    /**
+   * Verify the bar is unlocked 
+   * @param {number} index index of the bar
+   */
+    verifyDotColumnIsUnlockedInSelectChartType: ({ point, min, interval }) => {
         const index = Math.round((point - min) / interval);
         utilities.getNthElement(chartsDotPlotPage.dotColumnSelectChartType(), index)
             .within(() => {
@@ -890,11 +875,11 @@ const steps = {
             .should('not.exist');
     },
 
-     /**
-     * Verify the bar is unlocked 
-     * @param {number} index index of the bar
-     */
-     verifyDotColumnIsUnlockedInSpecifyCorrectAnswer: ({ point, min, interval }) => {
+    /**
+    * Verify the bar is unlocked 
+    * @param {number} index index of the bar
+    */
+    verifyDotColumnIsUnlockedInSpecifyCorrectAnswer: ({ point, min, interval }) => {
         const index = Math.round((point - min) / interval);
         utilities.getNthElement(chartsDotPlotPage.dotColumnSpecifyCorrectAnswer(), index)
             .within(() => {

package/cypress/pages/components/barAndLineChartComponent.js

@@ -18,7 +18,7 @@ const selectors = {
     barAndPointTooltipWrapper: () => cy.get('.charts-tooltip-wrapper'),
     controlOptionsSelectChartType: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
-            return cy.get(`('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button[aria-label*="${toolOptionAriaLabel}"]`)
+            return cy.get(`[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button[aria-label*="${toolOptionAriaLabel}"]`)
         } else {
             return cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button')
         }
@@ -50,12 +50,13 @@ const selectors = {
             return cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button')
         }
     },
-    barAndPointTooltipWrapperSpecifyCorrectAnswer: () => cy.get('.ngie-accordion [class*="ChartTooltipstyles__ChartTooltipWrapper"]'), gridCellSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .grid-cell'),
+    barAndPointTooltipWrapperSpecifyCorrectAnswer: () => cy.get('.ngie-accordion [class*="ChartTooltipstyles__ChartTooltipWrapper"]'), 
+    gridCellSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .grid-cell'),
     yAxisCoordinateSpecifyCorrectAnswer: () => cy.get('.ngie-accordion [class*="ChartGridstyle__ValueDiv"]'),
     yAxisLabelSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail [class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
 
     //Preview tab
-    previewTabToolsAddBarOrPointButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(0),
+    previewTabToolsAddBarOrPointButton: (ariaLabel) => cy.get(`[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button[aria-label*="${ariaLabel}"]`),
     previewTabToolsUndoButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
     previewTabToolsRedoButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
     previewTabToolsResetButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(3),
@@ -84,6 +85,32 @@ const steps = {
             .should('have.attr', 'data-aria-pressed', 'true');
     },
 
+    unselectAddBarOrPointToolbarOption: () => {
+        barAndLineChartComponent.addBarOrPointOptionButton()
+            .click()
+        barAndLineChartComponent.addBarOrPointOptionButton()
+            .should('have.attr', 'data-aria-pressed', 'false');
+    },
+
+    verifyAddBarOrPointToolbarOptionSelected: () => {
+        barAndLineChartComponent.addBarOrPointOptionButton()
+            .should('have.attr', 'data-aria-pressed', 'true');
+    },
+
+    verifyAddBarOrPointToolbarOptionUnselected: () => {
+        barAndLineChartComponent.addBarOrPointOptionButton()
+            .should('have.attr', 'data-aria-pressed', 'false');
+    },
+
+    verifyAddBarOrPointToolbarOptionButton: () => {
+        barAndLineChartComponent.addBarOrPointOptionButton()
+            .find('.drag-item-flex-wrapper svg')
+            .should('exist');
+        barAndLineChartComponent.addBarOrPointOptionButton()
+            .find('[data-testid="drag-icon-wrapper"]')
+            .should('exist');
+    },
+
     addBarOrPointInChartInSelectChartTypeSection: () => {
         barAndLineChartComponent.selectChartTypeChartToolsAddBarOrPointButton()
             .click();
@@ -148,8 +175,12 @@ const steps = {
             .click();
     },
 
-    addBarOrPointInChartInPreviewTab: () => {
-        barAndLineChartComponent.previewTabToolsAddBarOrPointButton()
+    /**
+     * @description selects add bar or add point button
+     * @param {("Add bar"| "Add point")} ariaLabel ariaLabel holds aria-label for the element
+     */
+    addBarOrPointInChartInPreviewTab: (ariaLabel) => {
+        barAndLineChartComponent.previewTabToolsAddBarOrPointButton(ariaLabel)
             .click();
     },
 
@@ -312,6 +343,24 @@ const steps = {
         barAndLineChartComponent.gridCellPreviewTab()
             .should('have.css', 'border-top-width', '0px');
     },
+
+    /**
+     * @description verifies ock unlock icon
+     * @param {('Locked'|'Unlocked')} action 
+     */
+    verifyLockUnlockButtonIcon: (action) => {
+        if (action === 'Locked') {
+            barAndLineChartComponent.barAndPointTooltipLockUnlockButton()
+                .find('[id="Lock"]')
+        }
+        else if (action === 'Unlocked') {
+            barAndLineChartComponent.barAndPointTooltipLockUnlockButton()
+                .find('[id="Unlock"]')
+                .should('exist');
+        } else {
+            cy.log('Incorrect string')
+        }
+    }
 }
 
 export const barAndLineChartComponent = {

package/cypress/pages/components/chartsCommonComponent.js

@@ -214,7 +214,22 @@ const steps = {
             .blur();
         chartsCommonComponent.toleranceThresholdInputField()
             .should('have.value', value)
-    }
+    },
+
+    /**
+     * @param {string} element denotes element
+     * @param {string} text denotes tooltip text
+     * @description function is used to hover over element and verify inner text of its tooltip
+     */
+    verifyTooltipInnerText: (element, text, index = null) => {
+        element()
+            .eq(index)
+            .trigger('mouseover', { force: true });
+        utilities.verifyInnerText(commonComponents.tooltipText(), text);
+        element()
+            .eq(index)
+            .trigger('mouseout', { force: true });
+    },
 }
 
 const tests = {

package/cypress/pages/components/createQuestionBasePage.js

@@ -259,7 +259,7 @@ const tests = {
             createQuestionBasePage.steps.switchToPreviewTab();
             createQuestionBasePage.editTab()
                 .should('not.have.attr', 'aria-selected', 'true');
-            utilities.verifyElementVisibilityState(createQuestionBasePage.editTabWrapper(), 'hidden');
+            utilities.verifyElementVisibilityState(createQuestionBasePage.editTabWrapper(), 'notExist');
         });
 
         it('User should be able to switch back to the \'Edit\' tab', () => {

package/cypress/pages/components/figCommonStyleAndLayoutComponent.js

@@ -9,7 +9,7 @@ const selectors = {
     borderColorLabel: () => cy.get('.sub-section-label').eq(1),
     colorBlock: () => cy.get('.color-picker-block'),
     editColorButton: () => cy.get('button[aria-label="edit color"]'),
-    borderStyleLabel: () => cy.get('[class*="styles__LabelWrapper"].options-label'),
+    borderStyleLabel: () => cy.get('[class*="styles__LabelWrapper"].options-label').last(),
     dashedBorderStyleToggleButton: () => cy.get('[data-ngie-testid="dashed-toggle-button"]').eq(0),
     dottedBorderStyleToggleButton: () => cy.get('[data-ngie-testid="dotted-toggle-button"]').eq(0),
     solidBorderStyleToggleButton: () => cy.get('[data-ngie-testid="solid-toggle-button"]').eq(0),

package/cypress/pages/components/imageCanvasComponent.js

@@ -355,9 +355,9 @@ const steps = {
     },
 
     /**
-         * @param {"Insert dropzone"|"Insert text"|"Select dropzone"|"Insert text container"|"Select text container"} {String} button denotes selected button name
-         *@description function selects button
-         */
+    * @param {"Insert dropzone"|"Insert text"|"Select dropzone"|"Insert text container"|"Select text container"} {String} button denotes selected button name
+    *@description function selects button
+    */
     selectCanvasMenuButton: (button) => {
         if (button == 'Insert dropzone' || button == 'Insert text container' || button == 'Insert dropdown') {
             imageCanvasComponent.insertResponseAreaButton()