itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.190-7thMayFixes-fcaf7b8.0

package/cypress/pages/components/optionsWrapperComponent.js

@@ -6,7 +6,7 @@ import { equationEditorFlyout } from "./equationEditorFlyout";
 const css = Cypress.env('css');
 
 const selectors = {
-    optionsLabel: () => cy.get('.options-label'),
+    optionsLabel: () => cy.get('.options-label-wrapper .options-label'),
     optionsSectionWrapper: () => cy.get('[data-rbd-droppable-id="assessment-option-item-options"]'),
     optionWrapper: () => cy.get('[data-rbd-draggable-id*="option-draggable"]'),
     addOptionButton: () => cy.get('.add-option-wrapper-cls button').contains('Add option'),
@@ -140,6 +140,17 @@ const steps = {
             .should('have.text', '​​​​​​​This is a bold option');
     },
 
+    /**
+    * @param {number} index of the option input field
+    * @description this function add input to options input field which contains an image
+    */
+    addTextInputToOptionsInputFieldWithImage: (index) => {
+        optionsWrapperComponent.optionsInputField()
+            .eq(index)
+            .type('Petals')
+            .should('have.text', '​​​​​​​Petals');
+    },
+
     /**
      * @param {number} index of option
      * @description this function verifies bold text in options input fields
@@ -416,7 +427,7 @@ const tests = {
                     utilities.triggerMouseover(commonComponents.dragHandleButton());
                 });
             utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible')
-            cy.checkAccessibility(commonComponents.tooltipText());
+            cy.checkAccessibility(commonComponents.nextGenCreateItemWrapper());
             optionsWrapperComponent.optionWrapper()
                 .eq(0)
                 .within(() => {

package/cypress/pages/components/playbackControlsBaseComponent.js

@@ -174,10 +174,13 @@ const steps = {
             .should('be.disabled');
     },
 
-    verifyPlaybackSpeedListOptions: () => {
-        const playbackSpeedOptions = ['1x', '1.25x', '1.5x', '2x'];
+    /**
+     * Verify the playback speed list options
+     * @param {string[]} playbackSpeedOptions Array of playback speed list options
+     */
+    verifyPlaybackSpeedListOptions: (playbackSpeedOptions) => {
         playbackSpeedOptions.forEach((option, optionIndex) => {
-            utilities.verifyInnerText(utilities.getNthElement(playbackControlsBaseComponent.playbackSpeedOption(), optionIndex), option);
+            utilities.verifyInnerText(utilities.getNthElement(playbackControlsBaseComponent.playbackSpeedOption(), optionIndex), `${option}x`);
         });
     },
 
@@ -188,7 +191,7 @@ const steps = {
      */
     verifyPlaybackSpeedOptionSelectedState: (speed) => {
         playbackControlsBaseComponent.playbackSpeedOption(speed)
-            .should('have.class', 'selected-speed-option')
+            .should('have.attr', 'aria-label', `${speed} selected`);
     },
 
     /**
@@ -272,30 +275,34 @@ const tests = {
         });
     },
 
-    verifyPlaybackSpeedContents: () => {
-        it('When the user hovers overs the playback button, a list of 4 playback speed options - 1x, 1.25x, 1.5x, 2x should be displayed and by default 1x should be in selected state', () => {
+    /**
+     * Verify the contents of playback speed list and button
+     * @param {string[]} playbackSpeedOptions Array of playback speed list options
+     */
+    verifyPlaybackSpeedContents: (playbackSpeedOptions) => {
+        it(`When the user hovers overs the playback button, a list of ${playbackSpeedOptions.length} playback speed options - ${playbackSpeedOptions.join(' ')} should be displayed and by default 1x should be in selected state`, () => {
             playbackControlsBaseComponent.playbackSpeedButton()
                 .trigger('mouseover');
-            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.playbackSpeedOptionsList(), 'visible');
-            utilities.verifyElementCount(playbackControlsBaseComponent.playbackSpeedOption(), 4);
-            playbackControlsBaseComponent.steps.verifyPlaybackSpeedListOptions();
+            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.playbackSpeedOption(), 'visible');
+            utilities.verifyElementCount(playbackControlsBaseComponent.playbackSpeedOption(), playbackSpeedOptions.length);
+            playbackControlsBaseComponent.steps.verifyPlaybackSpeedListOptions(playbackSpeedOptions);
             playbackControlsBaseComponent.steps.verifyPlaybackSpeedOptionSelectedState('1x');
             playbackControlsBaseComponent.steps.selectPlaybackSpeed('1x');
         });
 
         it('CSS of playback speed options', { tags: 'css' }, () => {
             utilities.hoverOverElement(playbackControlsBaseComponent.playbackSpeedButton());
-            utilities.verifyCSS(playbackControlsBaseComponent.playbackSpeedButton().find('[id="playback-speed"] path'), {
+            utilities.verifyCSS(playbackControlsBaseComponent.playbackSpeedButton().find('path').eq(1), {
                 'fill': css.color.activeButtons
             });
-            utilities.verifyCSS(utilities.getNthElement(playbackControlsBaseComponent.playbackSpeedOption(), 0), {
+            utilities.verifyCSS(playbackControlsBaseComponent.playbackSpeedOption().contains('1x'), {
                 'color': css.color.liText,
                 'background-color': css.color.liTextSelectedBg,
                 'font-size': css.fontSize.small
             });
-            utilities.verifyCSS(utilities.getNthElement(playbackControlsBaseComponent.playbackSpeedOption(), 1), {
+            utilities.verifyCSS(playbackControlsBaseComponent.playbackSpeedOption().last(), {
                 'color': css.color.liText,
-                'background-color': css.color.defaultBackground,
+                'background-color': css.color.transparent,
                 'font-size': css.fontSize.small
             });
         });

package/cypress/pages/components/questionInputFieldComponent.js

@@ -138,7 +138,8 @@ const tests = {
             questionInputFieldComponent.steps.clearQuestionInputField();
             questionInputFieldComponent.steps.verifyQuestionInputFieldPlaceholder();
             questionInputFieldComponent.steps.addInputToQuestionInputField('Lorem Ipsum');
-            utilities.verifyTextContent(questionInputFieldComponent.questionInputField(), '​​​​​​​Lorem Ipsum');
+            questionInputFieldComponent.questionInputField()
+                .contains('Lorem Ipsum');
             questionInputFieldComponent.steps.verifyQuestionInputFieldPlaceholderNotDisplayed();
         });
     },

package/cypress/pages/components/questionInstructionsComponent.js

@@ -82,29 +82,13 @@ const tests = {
             questionInstructionsComponent.steps.verifyQuestionInstructionsPlaceholderText();
         });
 
-        it('When user focus in and out of the \'Question Instructions\' input field without typing anything, an error message should be thrown', () => {
+        it('When user focus in and out of the \'Question Instructions\' input field without typing anything, an error message should not be thrown', () => {
             questionInstructionsComponent.steps.focusInAndOutOfQuestionInstructionsInputField();
-            questionInstructionsComponent.steps.verifyQuestionInstructionsErrorMessage()
+            questionInstructionsComponent.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed()
         });
 
-        it('CSS of question instructions error message', { tags: 'css' }, () => {
-            questionInstructionsComponent.questionInstructionsWrapper()
-                .within(() => {
-                    utilities.verifyCSS(commonComponents.errorMessage(), {
-                        'color': css.color.errorText,
-                        'font-size': css.fontSize.small,
-                        'font-weight': css.fontWeight.regular
-                    });
-                });
-        });
-
-        it('Accessibility of question instructions error message', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(questionInstructionsComponent.questionInstructionsWrapper());
-        });
-
-        it('The user should be able to add the Question Instructions and \'Error :Question Instructions are required.\' error message should disappear', () => {
+        it('The user should be able to add the Question Instructions', () => {
             questionInstructionsComponent.steps.addTextInQuestionInstructionsInputField('Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
-            questionInstructionsComponent.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed();
         });
 
         it('When user adds Question instruction the placeholder text should not be displayed', () => {

package/cypress/pages/components/resetPopupComponent.js

@@ -20,14 +20,18 @@ const steps = {
 }
 
 const tests = {
-    verifyResetPopupContentWithCSSAndA11y: () => {
+    /**
+     * @description Verify reset popup content with css and accessibility
+     * @param {("graph"|"chart")} representation
+     */
+    verifyResetPopupContentWithCSSAndA11y: (representation) => {
         it('When the user clicks on the \'Reset\' button then a dialog box should appear with title \'Reset\'', () => {
             utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'exist');
             utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Reset');
         });
 
-        it('The dialog box should have content \'Are you sure you want to reset the graph? This will clear all objects and revert all settings to their default values.\' with \'Cancel\' and \'Confirm reset\' buttons should be displayed', () => {
-            utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), 'Are you sure you want to reset the graph? This will clear all objects and revert all settings to their default values.');
+        it(`The dialog box should have content \'Are you sure you want to reset the ${representation}? This will clear all objects and revert all settings to their default values.\' with \'Cancel\' and \'Confirm reset\' buttons should be displayed`, () => {
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), `Are you sure you want to reset the ${representation}? This will clear all objects and revert all settings to their default values.`);
             utilities.verifyInnerText(resetPopupComponent.resetPopupConfirmResetButton(), 'Confirm reset');
             utilities.verifyInnerText(resetPopupComponent.resetPopupCancelButton(), 'Cancel');
         });

package/cypress/pages/components/scoringSectionBaseEditTab.js

@@ -123,7 +123,10 @@ const steps = {
     },
 
     verifyPointsFieldErrorMessageIsNotDisplayed: () => {
-        utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
+        scoringSectionBaseEditTab.pointsWrapper()
+            .within(() => {
+                utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
+            });
     },
 
     /**
@@ -248,25 +251,11 @@ const tests = {
             scoringSectionBaseEditTab.pointsInputField()
                 .focus()
                 .blur();
-            utilities.verifyInnerText(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'Error: Please enter points.');
-            utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'visible');
-        });
-
-        it('CSS of points field error message', { tags: 'css' }, () => {
-            utilities.verifyCSS(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), {
-                'color': css.color.errorText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.regular
-            });
-        });
-
-        it('Accessibility of points field error message', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(commonComponents.errorMessage());
+            utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
         });
 
-        it('When the user enters point in Points input field then the \'Please enter points.\' validation text should disappear', () => {
+        it('User should be able to enter points in the points input fields', () => {
             scoringSectionBaseEditTab.steps.allotPoints(10);
-            utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
         });
     },
 

package/cypress/pages/components/singleMultipleSelectionModeComponent.js

@@ -0,0 +1,16 @@
+const selectors = {
+    multipleSelectionToggleButton: () => cy.get('.response-toggle-wrapper button[aria-label*="Multiple selection"]'),
+    singleSelectionToggleButton: () => cy.get('.response-toggle-wrapper button[aria-label*="Single selection"]'),
+}
+
+const steps = {
+    selectMultipleSelectionToggle: () => {
+        singleMultipleSelectionModeComponent.multipleSelectionToggleButton()
+            .click();
+    }
+}
+
+export const singleMultipleSelectionModeComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/styleAndLayoutCustomizationAccordionComponent.js

@@ -0,0 +1,46 @@
+import utilities from "../../support/helpers/utilities";
+
+const css = Cypress.env('css');
+
+const selectors = {
+    styleAndLayoutCustomizationAccordion: () => cy.get('.style-and-layout-customization-wrapper .MuiAccordionSummary-root'),
+}
+
+const steps = {
+    expandStyleAndLayoutCustomizationAccordion: () => {
+        styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+}
+
+const tests = {
+    verifyStyleAndLayoutCustomizationAccordionProperties: () => {
+        it('By default \'Style and layout customization\' accordion should be collapsed and by clicking on the \'Style and layout customization\' accordion, user should be able to expand the accordion', () => {
+            styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion()
+                .should('have.attr', 'aria-expanded', 'false');
+            styleAndLayoutCustomizationAccordionComponent.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('CSS of \'Style and layout customization\' accordion', { tags: 'css' }, () => {
+            utilities.verifyCSS(styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion().find('.accordion_label'), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Style and layout customization\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion().parents('.style-and-layout-customization-wrapper'));
+        });
+    }
+}
+
+export const styleAndLayoutCustomizationAccordionComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/toolSettingsComponent.js

@@ -13,6 +13,7 @@ const selectors = {
     toolLabel: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__ButtonLabel"]'),
     toolDragHandleButton: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__DragIconWrapper"]'),
     toolEditIcon: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__ItemContainer"] .icon-pencil'),
+    okButton: () => cy.get('.action-button').eq(1)
 }
 
 const steps = {
@@ -87,6 +88,11 @@ const steps = {
     clickOnToolEditIcon: (toolIndex) => {
         utilities.getNthElement(toolSettingsComponent.toolEditIcon(), toolIndex)
             .click();
+    },
+
+    clickOnOkButton: () => {
+        toolSettingsComponent.okButton()
+            .click();
     }
 }
 

package/cypress/pages/contentBlocksPage.js

@@ -6,6 +6,7 @@ const css = Cypress.env('css');
 const selectors = {
     ...commonComponents,
     ...createQuestionBasePage,
+    ...createItemPage,
     headerLabel: () => cy.get('[class*="ContentBlocksstyles__LabelContent"]'),
     titleLabel: () => cy.get('.inline-text-property-label').eq(0),
     titleInputField: () => cy.get('.input-field input').eq(0),
@@ -55,7 +56,7 @@ const selectors = {
     groupDividerPreviewTab: () => cy.get('.content-wrapper .group-divider'),
     previousPageButton: () => cy.get('.pagination-button[data-at="previous"]'),
     nextPageButton: () => cy.get('.pagination-button[data-at="next"]'),
-    noPreviewText: () => cy.get('[class*="PassagePreviewstyles__NoPreview"]'),
+    noPreviewText: () => cy.get('[class*="__NoPreview"]'),
     paginationText: () => cy.get('.pagination-text'),
     previewWrapper: () => cy.get('[class*="TabsComponentstyles__PreviewWrapper"]'),
     sliderButtonPreviewTab: () => cy.get('.slider-indicators button'),
@@ -591,10 +592,25 @@ const steps = {
             .within(() => {
                 utilities.verifyInnerText(createItemPage.questionTitle().eq(questionIndex), questionTitle);
                 utilities.verifyElementVisibilityState(createItemPage.questionTitle().eq(questionIndex), 'visible');
-                utilities.verifyInnerText(contentBlocksPage.contentWrapperPreviewTab().eq(questionIndex), questionInstructions);
-                utilities.verifyElementVisibilityState(contentBlocksPage.contentWrapperPreviewTab().eq(questionIndex), 'visible');
+                utilities.verifyInnerText(contentBlocksPage.contentWrapperPreviewTab(), questionInstructions);
+                utilities.verifyElementVisibilityState(contentBlocksPage.contentWrapperPreviewTab(), 'visible');
             });
     },
+
+    /**
+    * @param {number} panel denotes panel number
+    * @param {string} questionInstruction denotes question instruction
+    * @description verify question content
+    */
+    verifyContentBlockContentsPreviewPreviewTab: ({ questionInstructions, panel = 0 }) => {
+        createItemPage.panelWrapper()
+            .eq(panel)
+            .within(() => {
+                utilities.verifyElementVisibilityState(createItemPage.questionTitle(), 'notExist');
+                utilities.verifyInnerText(contentBlocksPage.contentWrapperPreviewTab(), questionInstructions);
+                utilities.verifyElementVisibilityState(contentBlocksPage.contentWrapperPreviewTab(), 'visible');
+            });
+    }
 }
 
 export const contentBlocksPage = {

package/cypress/pages/createItemPage.js

@@ -21,6 +21,7 @@ const selectors = {
     rowQuestionWrapper: () => cy.get('[class*="Widgetstyles__RowWrapper"]'),
     columnQuestionWrapper: () => cy.get('[class*="ColumnComponentstyles__WidgetsWrapper"]'),
     panelWrapper: () => cy.get('.column-tab-without-scroll'),
+    itemContainer: () => cy.get('.item-layout-columns-wrapper-without-scroll'),
     questionTitle: () => cy.get('.question-type-text'),
     sectionsTitleWrapper: () => cy.get('[class*="TabsComponentstyles__TabListWrapper"]'),
     sectionsTitleBoxWrapper: () => cy.get('[class*="TabsComponentstyles__TabListWrapper"] .ngie-tablist-box-wrapper'),
@@ -29,6 +30,7 @@ const selectors = {
     selectedSectionUnderline: () => cy.get('[class*="MuiTabs-indicator"]').eq(1),
     sectionsNumber1Label: () => cy.get('.tablist-numbered-label').eq(0),
     sectionsNumber2Label: () => cy.get('.tablist-numbered-label').eq(1),
+    noPreviewText: () => cy.get('[class*="__NoPreview"]')
 }
 
 const steps = {
@@ -166,22 +168,39 @@ const steps = {
             .click();
     },
 
+    /**
+    * @param {number} panel denotes panel number
+    * @param {number} questionNumber denotes question number
+    * @param {string} questionTitle denotes question title
+    * @param {string} questionInstruction denotes question instruction
+    * @description verify question content
+    */
+    verifyBasicQuestionContentsPreview: ({ questionIndex, questionTitle, questionInstructions, panel = 0 }) => {
+        createItemPage.panelWrapper()
+            .eq(panel)
+            .within(() => {
+                utilities.verifyInnerText(createItemPage.questionTitle().eq(questionIndex), questionTitle);
+                utilities.verifyElementVisibilityState(createItemPage.questionTitle().eq(questionIndex), 'visible');
+                utilities.verifyInnerText(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), questionInstructions);
+                utilities.verifyElementVisibilityState(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), 'exist');
+            });
+    },
+
     /**
      * @param {number} panel denotes panel number
-     * @param {number} questionNumber denotes question number
-     * @param {string} questionTitle denotes question title
+     * @param {number} questionIndex denotes question number
+     * @param {string} totalPoints denotes total points
      * @param {string} questionInstruction denotes question instruction
      * @description verify question content
      */
 
-    verifyBasicQuestionContentsPreview: ({ questionIndex, questionTitle, questionInstructions, panel = 0 }) => {
+    verifyBasicQuestionContentsPreviewPreviewTab: ({ questionIndex, questionInstructions, panel = 0 }) => {
         createItemPage.panelWrapper()
             .eq(panel)
             .within(() => {
-                utilities.verifyInnerText(createItemPage.questionTitle().eq(questionIndex), questionTitle);
-                utilities.verifyElementVisibilityState(createItemPage.questionTitle().eq(questionIndex), 'visible');
+                utilities.verifyElementVisibilityState(createItemPage.questionTitle(), 'notExist');
                 utilities.verifyInnerText(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), questionInstructions);
-                utilities.verifyElementVisibilityState(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), 'visible');
+                utilities.verifyElementVisibilityState(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), 'exist');
             });
     },
 
@@ -433,9 +452,9 @@ const steps = {
 
     verifyNumberedSectionNavigationStyle: () => {
         utilities.verifyInnerText(createItemPage.sectionsNumber1Label(), '1');
-        utilities.verifyElementVisibilityState(createItemPage.sectionsNumber1Label(), 'visible');
+        utilities.verifyElementVisibilityState(createItemPage.sectionsNumber1Label(), 'exist');
         utilities.verifyInnerText(createItemPage.sectionsNumber2Label(), '2');
-        utilities.verifyElementVisibilityState(createItemPage.sectionsNumber2Label(), 'visible');
+        utilities.verifyElementVisibilityState(createItemPage.sectionsNumber2Label(), 'exist');
     },
 
     /**
@@ -504,7 +523,55 @@ const steps = {
             });
     },
 
+    /**
+     * This function verifies the Panel width is half of the item width
+     * @param {number} panelIndex index of the panel 
+     */
+    verifyPanelWidthIsHalfOfItemWidth: (panelIndex) => {
+        createItemPage.itemContainer()
+            .then(($el) => {
+                const itemWidth = $el[0].clientWidth;
+                const expectedPanelWidth = itemWidth / 2
+                createItemPage.panelWrapper()
+                    .eq(panelIndex)
+                    .then(($el) => {
+                        const panelWidth = $el[0].clientWidth;
+                        expect(expectedPanelWidth).to.be.closeTo(Math.floor(panelWidth), 1);
+                    });
+            });
+    },
 
+    verifyPanelWidthEqualToItemWidth: () => {
+        createItemPage.itemContainer()
+            .then(($el) => {
+                const itemWidth = $el[0].clientWidth;
+                createItemPage.panelWrapper()
+                    .then(($el) => {
+                        const panelWidth = $el[0].clientWidth;
+                        expect(itemWidth).to.be.eq(panelWidth);
+                    });
+            });
+    },
+
+    verifyPanelWidthAndSectionWidthEqualToItemWidth: () => {
+        createItemPage.itemContainer()
+            .then(($item) => {
+                const itemWidth = $item[0].clientWidth;
+                let panelWidth = 0;
+                let sectionWidth = 0;
+                cy.get('[class*="ColumnComponentstyles__TabsComponentWrapper"]')
+                    .then(($section) => {
+                        sectionWidth = $section[0].clientWidth;
+                    })
+                cy.get('[class*="ColumnComponentstyles__WidgetsWrapper"]')
+                    .then(($panelWidth) => {
+                        panelWidth = $panelWidth[0].clientWidth;
+                    })
+                    .then(() => {
+                        expect(panelWidth + sectionWidth).to.be.closeTo(itemWidth, 1);
+                    });
+            });
+    }
 }
 
 export const createItemPage = {

package/cypress/pages/dialogBoxBase.js

@@ -6,8 +6,8 @@ const selectors = {
     dialogBox: () => cy.get('[aria-labelledby="alert-dialog-title"]'),
     dialogBoxTitle: () => cy.get('.dialog-title'),
     dialogBoxContent: () => cy.get('[class*="dialog-content"]'),
-    buttonReject: () => cy.get('.save-action-btn-wrapper button').eq(0),
-    buttonAccept: () => cy.get('.save-action-btn-wrapper button').eq(1),
+    buttonReject: () => cy.get('[data-testid="reject-button"]'),
+    buttonAccept: () => cy.get('[data-testid="accept-button"]'),
     buttonClose: () => cy.get('[aria-label="CLOSE"]')
 }
 

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -28,21 +28,20 @@ const selectors = {
     cellSubheadingTextArea: () => cy.get('.heading-field-wrapper [role="textbox"]'),
     cellTextTextArea: () => cy.get('.matrix-text-field [role="textbox"]'),
     tableCellContainer: () => cy.get('[class*="DragAndDropTablestyles__CellContainer"]'),
-    //Note: remove :visible after https://redmine.zeuslearning.com/issues/556304 gets fixed
-    dropzoneCellSpecifyCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__CellContainer"][class*="dropzone-cell"]:visible'),
+    dropzoneCellSpecifyCorrectAnswerSection: () => cy.get('[class*="CellDropZonestyles__CellContainer"][class*="dropzone-cell"]'),
     //Note: Items render twice in student view, need to remove .first()
-    dropzoneCellPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DragAndDropMatrixstyles__CellContainer"][class*="dropzone-cell"]'),
+    dropzoneCellPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="CellDropZonestyles__CellContainer"][class*="dropzone-cell"]'),
     dropzoneCellNumeration: () => cy.get('.answer-numeration-number-box'),
-    correctAnswerDropzoneCell: () => cy.get('[class*="DragAndDropMatrixstyles__AnswerCell"]'),
-    correctAnswerDropzoneCellTickIcon: () => cy.get('[class*="DragAndDropMatrixstyles__GreenBlock"]'),
+    correctAnswerDropzoneCell: () => cy.get('[class*="Matrixstyles__AnswerCell"]'),
+    correctAnswerDropzoneCellTickIcon: () => cy.get('[class*="Matrixstyles__GreenBlock"]'),
     correctAnswersLabel: () => cy.get('.correct-answers-label'),
-    correctAnswerOption: () => cy.get('[class*="DragAndDropMatrixstyles__AnswerWrapper"]'),
+    correctAnswerOption: () => cy.get('[class*="Matrixstyles__AnswerWrapper"]'),
     //Note: Items render twice in student view, need to remove .first()
-    categoryGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DragAndDropMatrixstyles__TableWrapper"]').first(),
-    optionsWrapper: () => cy.get('[class*="DragAndDropMatrixstyles__DraggableItemWrapper"]'),
+    categoryGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__TableWrapper"]').first(),
+    optionsWrapper: () => cy.get('[class*="CellDropZonestyles__DraggableItemWrapper"]'),
     correctIncorrectAnswerBlock: () => cy.get('[class*="correct-answer-block"]'),
-    correctIncorrectStatusMessageText: () => cy.get('[class*="DragAndDropMatrixstyles__AnswerStatusText"]'),
-    correctIncorrectAnswerLabel: () => cy.get('[class*="DragAndDropMatrixstyles__CorrectIncorrectLabel"]'),
+    correctIncorrectStatusMessageText: () => cy.get('[class*="Matrixstyles__AnswerStatusText"]'),
+    correctIncorrectAnswerLabel: () => cy.get('[class*="Matrixstyles__CorrectIncorrectLabel"]'),
     correctAnswerContainer: () => cy.get('[class*="_CorrectAnswerWrapper"]'),
 
     //Specify columns and rows
@@ -57,8 +56,8 @@ const selectors = {
     rightArrowNavigationButton: () => cy.get('[class*="DragAndDropTablestyles__PaginationRightControl"]'),
 
     //Specify correct answer matrix
-    tableCellContainerSpecifyCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__CellContainer"]'),
-    tableRowContainerSpecifyCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__RowContainer"]'),
+    tableCellContainerSpecifyCorrectAnswerSection: () => cy.get('[class*="Matrixstyles__CellContainer"]'),
+    tableRowContainerSpecifyCorrectAnswerSection: () => cy.get('[class*="Matrixstyles__RowContainer"]'),
     leftArrowNavigationButtonSpecifyCorrectAnswerSection: () => cy.get('.classification-set-correct-answer-wrapper [aria-label="Left Pagination Button"]'),
     rightArrowNavigationButtonSpecifyCorrectAnswerSection: () => cy.get('.classification-set-correct-answer-wrapper [aria-label="Right Pagination Button"]'),
     tableCellLabel: () => cy.get('.cell-label'),
@@ -67,11 +66,11 @@ const selectors = {
     dropzoneAriaLabelInputField: () => cy.get('[type="text"][aria-label*="Enter ARIA label"]'),
 
     //Preview tab table
-    tableRowContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DragAndDropMatrixstyles__RowContainer"]'),
-    leftArrowNavigationButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-label="Left Pagination Button"][class*="DragAndDropMatrixstyles__PaginationControl"]'),
-    rightArrowNavigationButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-label="Right Pagination Button"][class*="DragAndDropMatrixstyles__PaginationControl"]'),
-    cellContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DragAndDropMatrixstyles__CellContainer"]'),
-    cellContainerSpecifyCorrectAnswer: () => cy.get('[class*="DragAndDropMatrixstyles__CellContainer"]'),
+    tableRowContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__RowContainer"]'),
+    leftArrowNavigationButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-label="Left Pagination Button"][class*="Matrixstyles__PaginationControl"]'),
+    rightArrowNavigationButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-label="Right Pagination Button"][class*="Matrixstyles__PaginationControl"]'),
+    cellContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__CellContainer"]'),
+    cellContainerSpecifyCorrectAnswer: () => cy.get('[class*="Matrixstyles__CellContainer"]'),
     incorrectOptionWrapper: () => cy.get('[class*="question-preview-wrapper"] .incorrect-answer-item'),
     correctOptionWrapper: () => cy.get('[class*="question-preview-wrapper"] .correct-answer-item'),
     perDropzoneRadioButton: () => cy.get('input[aria-label="per dropzone"]'),
@@ -88,10 +87,9 @@ const selectors = {
     penaltyPointsForIncorrectOptionInputField: () => cy.get('input[aria-label="penalty points for each incorrect option"]'),
     penaltyPointsForEachIncorrectOptionOrDropzoneLabel: () => cy.get('[class*="PenaltyScoreForEachIncorrectstyles__PointsLabel"]'),
     tableOuterBorder: () => cy.get('.table-border'),
-    categoryGridSpecifyCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__TableWrapper"]'),
-    maxLimitInEachDropzoneHelpText: () => cy.get('[class*="DragAndDropMatrixstyles__MaxLimitWrapper"]'),
-    dropzoneGridSpecifyCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__TableWrapper"]'),
-    dropzoneGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DragAndDropMatrixstyles__TableWrapper"]'),
+    maxLimitInEachDropzoneHelpText: () => cy.get('[class*="Matrixstyles__MaxLimitWrapper"]'),
+    dropzoneGridSpecifyCorrectAnswerSection: () => cy.get('[class*="Matrixstyles__TableWrapper"]'),
+    dropzoneGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__TableWrapper"]'),
 }
 
 const steps = {
@@ -618,7 +616,7 @@ const steps = {
         dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
             .eq(0)
             .within(($element) => {
-                utilities.verifyElementCount(cy.wrap($element).find('[class*="DragAndDropMatrixstyles__CellContainer"]'), numberOfColumns);
+                utilities.verifyElementCount(cy.wrap($element).find('[class*="Matrixstyles__CellContainer"]'), numberOfColumns);
             });
     },
 
@@ -638,7 +636,7 @@ const steps = {
         dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
             .eq(0)
             .within(($element) => {
-                utilities.verifyElementCount(cy.wrap($element).find('[class*="DragAndDropMatrixstyles__CellContainer"]'), numberOfColumns);
+                utilities.verifyElementCount(cy.wrap($element).find('[class*="Matrixstyles__CellContainer"]'), numberOfColumns);
             });
     },
 
@@ -1149,7 +1147,7 @@ const steps = {
     },
 
     clickAndDropOptionFromDropzoneToOptionContainerSpecifyCorrectAnswerSection: (optionText) => {
-        dragAndDropIntoCategoriesPage.categoryGridSpecifyCorrectAnswerSection()
+        dragAndDropIntoCategoriesPage.dropzoneGridSpecifyCorrectAnswerSection()
             .within(() => {
                 draggableOptionContainer.draggableOption()
                     .contains(optionText)