itemengine-cypress-automation 1.0.132 → 1.0.133

package/cypress/pages/components/additionalSettingsPanel.js

@@ -1,6 +1,9 @@
+import utilities from "../../support/helpers/utilities";
 import { commonComponents } from "./commonComponents";
 const css = Cypress.env('css');
 
+const fontSizesOptions = ['Tiny', 'Small', 'Default', 'Normal', 'Big', 'Huge'];
+
 const selectors = {
     //Comment: added .first() because in fill in the gap questions, multiple accordions are created inside additional settings panel according to number of responses
     additionalSettingsPanel: () => cy.get('.additional-settings-container .MuiAccordionSummary-root').eq(0),
@@ -15,24 +18,29 @@ const selectors = {
     //Font-size dropdown
     fontSizeLabel: () => cy.get('#Font-Size-dropdown-label'),
     fontSizeDropdown: () => cy.get('#Font-Size-select'),
-    fontSizeListOptions: (optionIndex) => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"]').eq(optionIndex),
+    fontSizeListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Font-Size-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Font-Size-dropdown-label"] [role="option"]')
+        }
+    },
     fontSizeListOptionLabels: () => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"] .dropdown-label-text'),
     fontSizesLabels: () => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"] .dropdown-post-label-text'),
 }
 
 const steps = {
     //Enhancement: Remove this step, (this has incorrect spelling)
-    expandAdditonalSettings: () => {
+    expandAdditionalSettings: () => {
         additionalSettingsPanel.additionalSettingsPanel()
             .click()
             .should('have.attr', 'aria-expanded', 'true');
     },
 
     //V3 - Need to be updated in all files
-    selectFontSizeOptionFromFontSizeDropdown: (dropdownOptionIndex) => {
-        additionalSettingsPanel.fontSizeDropdown()
-            .click();
-        additionalSettingsPanel.fontSizeListOptions(dropdownOptionIndex)
+    selectFontSizeOptionFromFontSizeDropdown: (dropdownOption) => {
+        additionalSettingsPanel.steps.expandFontSizeDropdown();
+        additionalSettingsPanel.fontSizeListOptions(dropdownOption)
             .click();
     },
 
@@ -41,8 +49,6 @@ const steps = {
             .click()
             .type(teacherGuidelinesText)
             .blur();
-        additionalSettingsPanel.additionalSettingsTeacherGuidelinesInputField()
-            .should('have.text', teacherGuidelinesText);
     },
 
     enterTextInSampleAnswerInputField: (sampleAnswer) => {
@@ -50,8 +56,6 @@ const steps = {
             .click()
             .type(sampleAnswer)
             .blur();
-        additionalSettingsPanel.additionalSettingsSampleAnswerInputField()
-            .should('have.text', sampleAnswer);
     },
 
     enterTextInAcknowledgementsInputField: (acknowledgements) => {
@@ -59,8 +63,6 @@ const steps = {
             .click()
             .type(acknowledgements)
             .blur();
-        additionalSettingsPanel.additionalSettingsAcknowledgementsInputField()
-            .should('have.text', acknowledgements);
     },
 
     expandAdditionalSettings: () => {
@@ -68,127 +70,131 @@ const steps = {
             .click()
             .should('have.attr', 'aria-expanded', 'true');
     },
+
+    expandFontSizeDropdown: () => {
+        additionalSettingsPanel.fontSizeDropdown()
+            .click();
+    }
 }
 
 const tests = {
     verifyDetailsSection: () => {
-        it('CSS of \'Details\' section', { tags: 'css' }, () => {
-            additionalSettingsPanel.additionalSettingsDetailsLabel()
-                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);
-            additionalSettingsPanel.additionalSettingsTeacherGuidelinesLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            additionalSettingsPanel.additionalSettingsSampleAnswerLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            additionalSettingsPanel.additionalSettingsAcknowledgementsLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-        });
-
-        //Note: a11y is covered for the entire additional settings section
-
         it('\'Details\' label should be displayed', () => {
-            additionalSettingsPanel.additionalSettingsDetailsLabel()
-                .should('have.text', 'Details');
+            utilities.verifyInnerText(additionalSettingsPanel.additionalSettingsDetailsLabel(), 'Details');
         });
 
         it('\'Teacher scoring guidelines\' label and input field should be displayed and user should be able to enter \'Teacher scoring guidelines\'', () => {
-            additionalSettingsPanel.additionalSettingsTeacherGuidelinesLabel()
-                .verifyInnerText('Teacher scoring guidelines');
-            additionalSettingsPanel.additionalSettingsTeacherGuidelinesInputField()
-                .type('Teacher scoring guidelines')
-                .should('have.text', 'Teacher scoring guidelines');
+            utilities.verifyInnerText(additionalSettingsPanel.additionalSettingsTeacherGuidelinesLabel(), 'Teacher scoring guidelines');
+            additionalSettingsPanel.steps.enterTextInTeacherGuidelinesInputField('Teacher scoring guidelines');
+            utilities.verifyTextContent(additionalSettingsPanel.additionalSettingsTeacherGuidelinesInputField(), 'Teacher scoring guidelines');
         });
 
         it('\'Sample answer\' label and input field should be displayed and user should be able to enter \'Sample answer\'', () => {
-            additionalSettingsPanel.additionalSettingsSampleAnswerLabel()
-                .verifyInnerText('Sample answer');
-            additionalSettingsPanel.additionalSettingsSampleAnswerInputField()
-                .type('Sample Answer')
-                .should('have.text', 'Sample Answer');
+            utilities.verifyInnerText(additionalSettingsPanel.additionalSettingsSampleAnswerLabel(), 'Sample answer');
+            additionalSettingsPanel.steps.enterTextInSampleAnswerInputField('Sample answer');
+            utilities.verifyTextContent(additionalSettingsPanel.additionalSettingsSampleAnswerInputField(), 'Sample answer');
         });
 
         it('\'Acknowledgements & reference\' label and input field should be displayed and user should be able to enter \'Acknowledgements\'', () => {
-            additionalSettingsPanel.additionalSettingsAcknowledgementsLabel()
-                .verifyInnerText('Acknowledgements and references');
-            additionalSettingsPanel.additionalSettingsAcknowledgementsInputField()
-                .type('Acknowledgements')
-                .should('have.text', 'Acknowledgements');
+            utilities.verifyInnerText(additionalSettingsPanel.additionalSettingsAcknowledgementsLabel(), 'Acknowledgements and references');
+            additionalSettingsPanel.steps.enterTextInAcknowledgementsInputField('Acknowledgements');
+            utilities.verifyTextContent(additionalSettingsPanel.additionalSettingsAcknowledgementsInputField(), 'Acknowledgements');
         });
 
-        it('CSS of added text in input field of the Details Section', { tags: 'css' }, () => {
-            additionalSettingsPanel.additionalSettingsTeacherGuidelinesInputField()
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-            additionalSettingsPanel.additionalSettingsSampleAnswerInputField()
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-            additionalSettingsPanel.additionalSettingsAcknowledgementsInputField()
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        it('CSS of \'Details\' section', { tags: 'css' }, () => {
+            const labelCSS = {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            };
+            const inputFieldCSS = {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            }
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsDetailsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsTeacherGuidelinesLabel(), labelCSS);
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsTeacherGuidelinesInputField(), inputFieldCSS);
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsSampleAnswerLabel(), labelCSS);
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsSampleAnswerInputField(), inputFieldCSS);
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsAcknowledgementsLabel(), labelCSS);
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsAcknowledgementsInputField(), inputFieldCSS);
         });
+
+        //Note: a11y is covered for the entire additional settings section
     },
 
-    verifyAdditonalSettingsAccordionProperties: () => {
-        it('CSS of \'Additonal Settings\' accordion', { tags: 'css' }, () => {
-            additionalSettingsPanel.additionalSettingsPanel()
-                .find('.additional-settings')
-                .verifyCSS(css.color.accordionLabel, css.fontSize.default, css.fontWeight.bold);
+    verifyAdditionalSettingsAccordionProperties: () => {
+        it('By default \'Additional Settings\' accordion should be collapsed and by clicking on the \'Additional Settings\' accordion, user should be able to expand the accordion', () => {
             additionalSettingsPanel.additionalSettingsPanel()
-                .find('svg')
-                .should('have.css', 'fill', css.color.activeButtons);
+                .should('have.attr', 'aria-expanded', 'false');
+            additionalSettingsPanel.steps.expandAdditionalSettings();
         });
 
-        it('Accessibility of \'Additional Settings\' accordion', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(additionalSettingsPanel.additionalSettingsPanel().parents('.additional-settings-container'));
+        it('CSS of \'Additional Settings\' accordion', { tags: 'css' }, () => {
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsPanel().find('.additional-settings'), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsPanel().find('svg'), {
+                'fill': css.color.activeButtons
+            });
         });
 
-        it('By default \'Additional Settings\' accordion should be collapsed and by clicking on the \'Additional Settings\' accordion, user should be able to expand the accordion', () => {
-            additionalSettingsPanel.additionalSettingsPanel()
-                .should('have.attr', 'aria-expanded', 'false');
-            additionalSettingsPanel.steps.expandAdditonalSettings();
+        it('Accessibility of \'Additional Settings\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(additionalSettingsPanel.additionalSettingsPanel().parents('.additional-settings-container'));
         });
     },
 
     verifyFontSizeSectionContents: () => {
         const fontSizes = { 'Tiny': '12 px', 'Small': '14 px', 'Default': '16 px', 'Normal': '18 px', 'Big': '22 px', 'Huge': '26 px' };
         it('CSS of \'Font Size\' dropdown - default state', { tags: 'css' }, () => {
-            additionalSettingsPanel.fontSizeLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            additionalSettingsPanel.fontSizeDropdown()
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+            utilities.verifyCSS(additionalSettingsPanel.fontSizeLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(additionalSettingsPanel.fontSizeDropdown(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
         });
 
         // Note: a11y is covered for the entire additional settings section
 
         it('\'Font Size\' label and dropdown should be displayed and in \'Font Size\' dropdown \'Default\' option should be selected by default', () => {
-            additionalSettingsPanel.fontSizeLabel()
-                .verifyInnerText('Font size');
-            additionalSettingsPanel.fontSizeDropdown()
-                .verifyInnerText('Default');
+            utilities.verifyInnerText(additionalSettingsPanel.fontSizeLabel(), 'Font size');
+            utilities.verifyInnerText(additionalSettingsPanel.fontSizeDropdown(), 'Default');
         });
 
         it(`Clicking on \'Font size\' dropdown should open a list of ${Object.keys(fontSizes).length} options - ${Object.keys(fontSizes).join(',')}`, () => {
-            additionalSettingsPanel.fontSizeDropdown()
-                .realClick();
-            additionalSettingsPanel.fontSizeListOptions(0)
-                .should('be.visible');
+            additionalSettingsPanel.steps.expandFontSizeDropdown();
+            utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'visible');
             Object.keys(fontSizes).forEach((size, index) => {
-                additionalSettingsPanel.fontSizeListOptionLabels()
-                    .eq(index)
-                    .verifyInnerText(size);
-                additionalSettingsPanel.fontSizesLabels()
-                    .eq(index)
-                    .verifyInnerText(fontSizes[size]);
+                utilities.verifyInnerText(utilities.getNthElement(additionalSettingsPanel.fontSizeListOptionLabels(), index), size);
+                utilities.verifyInnerText(utilities.getNthElement(additionalSettingsPanel.fontSizesLabels(), index), fontSizes[size]);
             });
             cy.get('body')
                 .click();
         });
 
         it('CSS of Font size dropdown - active state', { tags: 'css' }, () => {
-            cy.log('Pre step: Clicking on Font size dropdown')
-            additionalSettingsPanel.fontSizeDropdown()
-                .click();
-            additionalSettingsPanel.fontSizeListOptions(2)
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
-                .should('have.css', 'background-color', css.color.liTextSelectedBg);
-            additionalSettingsPanel.fontSizeListOptions(1)
-                .should('have.css', 'background-color', css.color.transparent);
+            additionalSettingsPanel.steps.expandFontSizeDropdown();
+            utilities.verifyCSS(additionalSettingsPanel.fontSizeListOptions('Default'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(additionalSettingsPanel.fontSizeListOptions('Small'), {
+                'background-color': css.color.transparent
+            });
             cy.log('Post step: Closing the Font size dropdown')
             cy.get('body')
                 .click();
@@ -196,8 +202,7 @@ const tests = {
 
         it('Accessibility of Font size dropdown in active state', { tags: 'a11y' }, () => {
             cy.log('Pre step: Clicking on Font size dropdown')
-            additionalSettingsPanel.fontSizeDropdown()
-                .click();
+            additionalSettingsPanel.steps.expandFontSizeDropdown();
             cy.checkAccessibility(commonComponents.dropdownList());
             cy.log('Post step: Closing the Font size dropdown')
             cy.get('body')

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -13,7 +13,7 @@ const selectors = {
     alternativeAnswerAccordion: () => cy.get('[data-ngie-testid*="alternate"][data-ngie-testid*="accordion"]'),
     //TODO: Need to update the selector of correct answer accordion once a unique selector is made available
     correctAnswerAccordionLabel: () => cy.get('[class*="AnswerAccordionstyles__Label"]').eq(0),
-    alternativeAnswerAccordionLabel: () => cy.get('[class*="AnswerAccordionstyles__Label"]'),
+    alternativeAnswerAccordionLabel: () => cy.get('[data-ngie-testid*="alternate"] [class*="AnswerAccordionstyles__Label"]'),
     deleteAlternateAccordionButton: () => cy.get('.answer-accordion-label button'),
     specifyCorrectAnswerErrorIcon: () => cy.get('[id="Icon_material-error"]'),
     pointsLabelAnswerAccordion: () => cy.get('[class*="AnswerAccordionstyles__PointsLabel"]'),
@@ -33,7 +33,7 @@ const steps = {
      */
     addAlternativeAnswerAccordion: (accordionIndex) => {
         autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
-        utilities.verifyInnerText(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion(), `Alternative ${accordionIndex}`);
+        utilities.verifyInnerText(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordionLabel(), `Alternative ${accordionIndex}`);
     },
 
     verifySpecifyCorrectAnswerErrorIconNotExists: () => {
@@ -117,7 +117,7 @@ const steps = {
      * @description - This function checks if the label of the alternative answer accordion matches the expected value.
      */
     verifyAlternativeAnswerAccordionLabel: (accordionIndex) => {
-        utilities.verifyInnerText(utilities.getNthElement(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion().find('.answer-accordion-label'), accordionIndex), `Alternative ${accordionIndex}`);
+        utilities.verifyInnerText(utilities.getNthElement(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion().find('.answer-accordion-label'), accordionIndex), `Alternative ${accordionIndex + 1}`);
     },
 
     /**
@@ -201,6 +201,9 @@ const tests = {
                 case 'fill in the gaps over image - drag and drop':
                     helpText = 'You can set the correct answer by dragging the correct answer(s) in the dropzone(s).';
                     break;
+                case 'graphing':
+                    helpText = 'You can set the correct answer by entering the correct answer(s) in the response area(s)';
+                    break;
                 default:
                     throw new Error('Invalid question type');
             }
@@ -216,7 +219,7 @@ const tests = {
             utilities.verifyCSS(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerHelpText(), {
                 'color': css.color.helperText,
                 'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.regular
+                'font-weight': css.fontWeight.medium
             });
             utilities.verifyCSS(autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordionLabel(), {
                 'color': css.color.activeButtons,
@@ -251,7 +254,6 @@ const tests = {
                     });
             } else {
                 autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
-                    .eq(1)
                     .within(() => {
                         autoScoredSpecifyCorrectAnswerSection.steps.verifySpecifyCorrectAnswerErrorIconIsVisible();
                     });
@@ -306,7 +308,7 @@ const tests = {
             utilities.verifyCSS(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), {
                 'color': css.color.activeButtons,
                 'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
+                'font-weight': css.fontWeight.medium
             });
             autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
                 .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
@@ -365,7 +367,7 @@ const tests = {
             dialogBoxBase.steps.allFieldsRequiredWarningPopupContents();
             dialogBoxBase.steps.closeWarningPopup();
             autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
-                .eq(2)
+                .eq(1)
                 .should('have.attr', 'aria-expanded', 'true');
         });
     },

package/cypress/pages/components/backgroundImageUploadComponent.js

@@ -7,14 +7,14 @@ const css = Cypress.env('css');
 const selectors = {
     backgroundImageLabel: () => cy.get('[class*="Background"][class*="LabelWrapper"]'),
     inputTypeFile: () => cy.get('input[type="file"]'),
-    uploadLabel: () => cy.get('[class*="UploadImagestyles__LabelWrapper"]').eq(0),
-    fileNameLabel: () => cy.get('[class*="UploadImagestyles__LabelWrapper"]').eq(1),
+    uploadLabel: () => cy.get('[class*="__LabelWrapper"][class*="Upload"]').eq(0),
+    fileNameLabel: () => cy.get('[class*="__LabelWrapper"][class*="Upload"]').eq(1),
     fileUploadSection: () => cy.get('.file-input-wrapper'),
     chooseFileButton: () => cy.get('.choose-file-button'),
     noFileChosenLabel: () => cy.get('[aria-label="No file chosen"]'),
     uploadImageProgressBar: () => cy.get('[class*="ProgressBar"]'),
-    uploadedFileNameLabel: () => cy.get('[class*="UploadImagestyles__SelectedFileWithIcon"]'),
-    deleteImageIcon: () => cy.get('[aria-label="Delete image"]'),
+    uploadedFileNameLabel: () => cy.get('[class*="styles__SelectedFileWithIcon"][class*="Upload"]'),
+    deleteImageIcon: () => cy.get('[aria-label*="Delete image"]'),
     deleteImagePopupButtonCancel: () => cy.get('.delete-action-btn-wrapper button').eq(0),
     deleteImagePopupButtonDelete: () => cy.get('.delete-action-btn-wrapper button').eq(1)
 }
@@ -59,10 +59,14 @@ const steps = {
 }
 
 const tests = {
-    verifyBackgroundImageSectionContentWithCSSAndA11y: () => {
+    verifyBackgroundImageSectionContentWithCSSAndA11y: (questionType = null) => {
         it('\'Background image\' label should be visible', () => {
-            utilities.verifyInnerText(backgroundImageUploadComponent.backgroundImageLabel(), 'Background image');
-        })
+            if (questionType === 'graphing') {
+                utilities.verifyInnerText(backgroundImageUploadComponent.backgroundImageLabel(), 'Background');
+            } else {
+                utilities.verifyInnerText(backgroundImageUploadComponent.backgroundImageLabel(), 'Background image');
+            }
+        });
 
         it('\'Upload\' label and \'Choose file\' button should be displayed', () => {
             utilities.verifyInnerText(backgroundImageUploadComponent.uploadLabel(), 'Upload');
@@ -110,15 +114,15 @@ const tests = {
             backgroundImageUploadComponent.steps.uploadFile('highlightImage.jpg');
             utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'visible');
             backgroundImageUploadComponent.steps.verifyFileNameLabel('highlightImage.jpg');
-            utilities.verifyElementVisibilityState( imageCanvasComponent.canvasImage(), 'visible');
-            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'notExist');
-            imageCanvasComponent.steps.verifyImageIsUploaded();
+            if (questionType != 'graphing') {
+                imageCanvasComponent.steps.verifyImageIsUploaded();
+            }
         });
 
         it('Delete button should appear beside uploaded file\'s name', () => {
             utilities.verifyElementVisibilityState(backgroundImageUploadComponent.deleteImageIcon(), 'visible');
         });
-        
+
         it('When user clicks on \'Choose file\' button again and upload another image file, previously uploaded image file should get replaced with new image file', () => {
             backgroundImageUploadComponent.steps.uploadFile('sample1.jpg');
             backgroundImageUploadComponent.steps.verifyFileNameLabel('sample1.jpg');
@@ -158,7 +162,7 @@ const tests = {
             utilities.verifyCSS(dialogBoxBase.dialogBox(), {
                 'background-color': css.color.defaultBackground,
             });
-            utilities.verifyCSS(dialogBoxBase.dialogBoxContent().find('[class*="UploadImagestyles__DeletePopupWrapper"]'), {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent().find('[class*="DeletePopupWrapper"]'), {
                 'color': css.color.sectionHeading,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular
@@ -184,7 +188,6 @@ const tests = {
             backgroundImageUploadComponent.steps.clickOnCancelButtonInDeleteImagePopup();
             utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
             utilities.verifyInnerText(backgroundImageUploadComponent.uploadedFileNameLabel(), 'sample1.jpg');
-            utilities.verifyElementVisibilityState(imageCanvasComponent.canvasImage(), 'visible');
         });
 
         it('When user clicks on \'Delete image\' button, then popup should close and image inside the canvas should be deleted', () => {
@@ -192,7 +195,6 @@ const tests = {
             backgroundImageUploadComponent.steps.clickOnDeleteButtonInDeleteImagePopup();
             utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
             utilities.verifyInnerText(backgroundImageUploadComponent.noFileChosenLabel(), 'No file chosen');
-            imageCanvasComponent.steps.verifyCanvasImageNotExist();
         });
     }
 }

package/cypress/pages/components/colorPopupComponent.js

@@ -34,9 +34,8 @@ const steps = {
      * @description this function is used to verify color on the saturation palette
      */
     verifySaturationPaletteColor: (color) => {
-        utilities.verifyCSS(colorPopupComponent.colorSaturationPicker(), {
-            'background-color': color
-        });
+        colorPopupComponent.colorSaturationPicker()
+            .should('have.attr', 'style', `background-color: ${color};`);
     },
 
     /**
@@ -44,9 +43,8 @@ const steps = {
      * @description this function is used to verify color on the hue palette
      */
     verifyHuePaletteColor: (color) => {
-        utilities.verifyCSS(colorPopupComponent.colorHuePicker(), {
-            'background-color': color
-        });
+        colorPopupComponent.colorHuePicker()
+            .should('have.attr', 'style', `background-color: ${color};`);
     },
 
     /**
@@ -253,9 +251,8 @@ const steps = {
      * @description this function is used to verify color on the hue palette
      */
     verifyOpacityGradientPaletteColor: (color) => {
-        utilities.verifyCSS(colorPopupComponent.opacityGradientPicker(), {
-            'background-color': color
-        });
+        colorPopupComponent.opacityGradientPicker()
+            .should('have.attr', 'style', `background-color: ${color};`);
     },
 
     clickOnOpacityGradientHuePalette: () => {
@@ -332,10 +329,10 @@ const tests = {
         });
     },
 
-     /**
-     * @param {string} hueColor value of color hue palette in Rgb
-     * @param {string} hexColor value of hex input field in hex code
-     */
+    /**
+    * @param {string} hueColor value of color hue palette in Rgb
+    * @param {string} hexColor value of hex input field in hex code
+    */
     verifyColorHuePaletteAndHexInputField: (hueColor, hexColor) => {
         it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
             colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
@@ -381,10 +378,10 @@ const tests = {
         });
     },
 
-     /**
-     * @param {string} hueColor value of color hue palette in Rgb
-     * @param {string} hexColor value of hex input field in hex code
-     */
+    /**
+    * @param {string} hueColor value of color hue palette in Rgb
+    * @param {string} hexColor value of hex input field in hex code
+    */
     verifyColorHuePaletteAndHexInputField: (hueColor, hexColor) => {
         it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
             colorPopupComponent.steps.verifyColorHuePaletteAndPicker();

package/cypress/pages/components/commonComponents.js

@@ -4,7 +4,7 @@ const css = Cypress.env('css');
 
 const selectors = {
     previewTabQuestionWrapper: () => cy.get('.edit-question-preview-wrapper'),
-    tooltipText: () => cy.get('[class*="MuiTooltip-tooltip"]'),
+    tooltipText: () => cy.get('[class*="MuiTooltip-tooltip"]:visible'),
     snackbar: () => cy.get('.MuiSnackbarContent-message'),
     snackbarCloseButton: () => cy.get('.MuiSnackbarContent-action'),
     errorMessage: () => cy.get('.error-text-message'),

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -44,7 +44,7 @@ const selectors = {
     dropdownWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-dropdown-wrapper'),
     dropdownPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-haspopup="listbox"]'),
     dropdownNumerationPreviewTab: () => cy.get('.answer-numeration-number-box'),
-    correctAnswersLabel: () => cy.get('[class*="question-preview-wrapper"] [class*="correct-answer-label"]'),
+    correctAnswersLabel: () => cy.get('[class*="question-preview-wrapper"] [class*="correct-answers-label"]'),
     correctAnswerResponseNumeration: () => cy.get('.answer-numeration-number-box'),
     tickIconWrapper: () => cy.get('.tick-icon-wrapper [data-name*="Rectangle"]'),
 

package/cypress/pages/components/imageCanvasComponent.js

@@ -43,9 +43,9 @@ const selectors = {
     fillImageToCanvasLabel: () => cy.get('[data-ngie-testid="fill-image-to-canvas-checkbox"] .MuiFormControlLabel-label'),
     fillImageToCanvasCheckbox: () => cy.get('[data-ngie-testid="fill-image-to-canvas-checkbox"] input'),
     imageAlignmentLabel: () => cy.get('.image-alignment-wrapper [class*="OptionsContainerstyles__LabelWrapper"]'),
-    topLeftAlignmentButton: () => cy.get('[data-ngie-testid="top-left-toggle-button"]'),
-    centerAlignmentButton: () => cy.get('.image-alignment-wrapper [data-ngie-testid="center-toggle-button"]'),
-    topRightAlignmentButton: () => cy.get('[data-ngie-testid="top-right-toggle-button"]'),
+    topLeftAlignmentButton: () => cy.get('[data-ngie-testid="top-left-toggle-button"], [data-testid="top-left-toggle-button"]'),
+    centerAlignmentButton: () => cy.get('[data-ngie-testid="center-toggle-button"], [data-testid="center-toggle-button"]'),
+    topRightAlignmentButton: () => cy.get('[data-ngie-testid="top-right-toggle-button"], [data-testid="top-right-toggle-button"]'),
     canvasWidthLabel: () => cy.get('.common-text-wrapper .additional-settings-label').eq(0),
     canvasWidthInputField: () => cy.get('.common-text-wrapper .text-field').eq(0),
     canvasHeightLabel: () => cy.get('.common-text-wrapper .additional-settings-label').eq(1),

package/cypress/pages/components/index.js

@@ -11,7 +11,6 @@ export * from './autoScoredAdditionalSettings';
 export * from './autoScoredSetCorrectAnswerSection';
 export * from './autoScoredScoringSectionMultipleResponsesType';
 export * from './autoScoredScoringSection';
-export * from './fillInTheGapsCommonComponents';
 export * from './optionsWrapperComponent';
 export * from './specialCharactersFlyoutComponent';
 export * from './specialAndCustomSpecialCharactersComponent';
@@ -54,4 +53,5 @@ export * from './imageActionsComponent';
 export * from './createCustomCategoryFlyout';
 export * from './customizeMathCharacterComponent';
 export * from './fillInTheGapsDragAndDropCommonComponents';
-export * from './responseAreaSettingsPopupComponent';
+export * from './additionalSettingsAccessibilitySectionComponent';
+export * from './responseAreaSettingsPopupComponent';

package/cypress/pages/components/opacityComponent.js

@@ -79,7 +79,7 @@ const tests = {
         });
 
         it('Accessibility of opacity section', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(opacityComponent.opacityLabel().parents('.MuiGrid-root'));
+            cy.checkAccessibility(opacityComponent.opacityLabel().parents('[class*="OpacityWrapper"]'));
         });
     }
 }

package/cypress/pages/components/scoringSectionBaseEditTab.js

@@ -353,6 +353,7 @@ const tests = {
         it('When the user focuses in and out of the empty Minimum points input field, no error message should be displayed', () => {
             scoringSectionBaseEditTab.minimumPointsInputField()
                 .focus()
+                .clear()
                 .blur();
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
@@ -382,6 +383,23 @@ const tests = {
         it('When the user has selected \'Non scored\' option from the \'Scoring type\' dropdown, \'Minimum scoring\' dropdown should not be displayed', () => {
             utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.minimumScoringDropdown(), 'notExist');
         });
+    },
+
+    verifyCSSAndA11yOfDisabledPointsInputField: () => {
+        it('CSS of disabled points input field', { tags: 'css' }, () => {
+            utilities.verifyCSS(scoringSectionBaseEditTab.pointsInputField(), {
+                'opacity': '1'
+            });
+            utilities.verifyCSS(scoringSectionBaseEditTab.pointsInputField().next('fieldset'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of disabled Points field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(scoringSectionBaseEditTab.pointsInputField().parents('.points-container'));
+        });
     }
 }
 

package/cypress/pages/components/studentResponseAreaAndLayoutComponent.js

@@ -2,7 +2,7 @@ import utilities from "../../support/helpers/utilities";
 const css = Cypress.env('css');
 
 const selectors = {
-    studentResponseAreaAndLayoutLabel: () => cy.get('.additional-settings-heading-label').eq(0),
+    studentResponseAreaAndLayoutLabel: () => cy.get('[class*="AdditionalOptionstyles__LayoutWrapper"] .additional-settings-heading-label').eq(0),
 }
 
 const tests = {

package/cypress/pages/dialogBoxBase.js

@@ -5,7 +5,7 @@ const css = Cypress.env('css');
 const selectors = {
     dialogBox: () => cy.get('[aria-labelledby="alert-dialog-title"]'),
     dialogBoxTitle: () => cy.get('.dialog-title'),
-    dialogBoxContent: () => cy.get('div[id="alert-dialog-description"]'),
+    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),
     buttonClose: () => cy.get('[aria-label="CLOSE"]')