itemengine-cypress-automation 1.0.340-IEI-5539-0eefd17.0 → 1.0.341-IEI-5600-IEI-5708-defa90b.0

package/cypress/fixtures/theme/ilc.json

@@ -1,5 +1,6 @@
 {
     "color": {
+        "boxShadow": "rgba(82, 0, 255, 0.1)",
         "primaryBtn": "rgb(255, 255, 255)",
         "primaryBtnBg": "rgb(82, 0, 255)",
         "primaryBtnBorder": "rgb(0, 0, 124)",
@@ -20,6 +21,7 @@
         "text": "rgb(0, 0, 46)",
         "textAreaErrorBg": "rgb(255, 244, 241)",
         "errorText": "rgb(209, 51, 51)",
+        "desmosErrorText": "rgb(164, 93, 0)",
         "labelText": "rgba(0, 0, 48, 0.87)",
         "optionsText": "rgb(0, 0, 73)",
         "optionsSelectedText": "rgb(82, 0, 255)",
@@ -122,6 +124,7 @@
         "lightThemeBtnBorder": "rgb(94, 110, 255)",
         "geoGebraCanvasBorder": "rgb(102, 102, 102)",
         "geoGebraHttpsBg": "rgb(233, 238, 255)",
+        "desmosHttpsBg": "rgba(255, 251, 214, 0.4)",
         "enabledSwitchBg": "rgb(48, 160, 79)",
         "disabledSwitchBg": "rgb(0, 0, 124)",
         "gridCellHoverStateBg": "rgba(186, 201, 255, 0.6)",
@@ -155,7 +158,19 @@
         "newFontColor": "rgb(128, 25, 0)",
         "newResponseFieldColor": "rgb(119, 60, 60)",
         "blackText": "rgb(0, 0, 0)",
-        "blackTextBoxText":"rgba(0, 0, 0, 0.38)"
+        "blackTextBoxText":"rgba(0, 0, 0, 0.38)",
+        "whiteColor": "rgba(255, 255, 255, 1)",
+        "phasesSectionBorderColor": "rgba(186, 201, 255, 1)",
+        "optionColor": "rgb(13, 71, 161)",
+        "borderColor": "rgb(205, 205, 206)",
+        "buttonHoverColor": "rgb(68, 0, 211)",
+        "tableRowHoverColor": "rgba(0, 0, 0, 0.04)",
+        "dialogBoxBoxShadow": "rgba(0, 0, 0, 0.25)",
+        "desktopMobileViewtoggleButtonSelectedBg": "rgb(227, 242, 253)",
+        "progressBarBackgroundColor": "rgba(0, 0, 46, 0.7)",
+        "questionInstructionBG": "rgb(235, 239, 255)",
+        "deletePageColor": "rgb(124, 0, 0)",
+        "dropdownDefaultBG": "rgb(227, 240, 237)"
     },
     "fontSize": {
         "extraSmall": "10px",

package/cypress/pages/audioPlayerPage.js

@@ -14,11 +14,11 @@ const selectors = {
     uploadAudioFileUploadLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(0),
     uploadAudioFileNameLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(1),
     deleteAudioFileButton: () => cy.get('[aria-label="Delete"]'),
-    sourceUrlLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(0),
-    sourceUrlInputField: () => cy.get('input[aria-label="Source URL"]'),
+    sourceUrlLabel: () => cy.get('[class*="AudioPlayerFormstyles__TextFieldLabel"]').eq(0),
+    sourceUrlInputField: () => cy.get('[class*="AudioPlayerFormstyles__Text"] input[type="text"]'),
     uploadAudioChooseFileButton: () => cy.get('.choose-file-upload-button'),
     uploadAudioNoFileChosenLabel: () => cy.get('[aria-label="No file chosen"]').eq(0),
-    uploadedFileNameLabel: () => cy.get('.selected-file').eq(0),
+    uploadedFileNameLabel: () => cy.get('[class*="AudioPlayerFormstyles__FileInputWrapper"] .selected-file-wrapper').eq(0),
     audioFileUploadProgressBar: () => cy.get('[class*="AudioPlayerstyles__ProgressBar-"]').eq(0),
     inputTypeFile: () => cy.get('input[type="file"]'),
     audioPlayerStyleLabel: () => cy.get('.player-style-label'),
@@ -28,7 +28,7 @@ const selectors = {
     standardStyleToggleButtonLabel: () => cy.get('[data-ngie-testid="standard-toggle-button"] .ngie-toggle-button-label'),
     barStyleToggleButtonLabel: () => cy.get('[data-ngie-testid="bar-toggle-button"] .ngie-toggle-button-label'),
     compactStyleToggleButtonLabel: () => cy.get('[data-ngie-testid="compact-toggle-button"] .ngie-toggle-button-label'),
-    compactPlayerOptionsLabel: () => cy.get('.options-label'),
+    compactPlayerOptionsLabel: () => cy.get('.compact-player-wrapper .options-label'),
     defaultPlayerOptionButton: () => cy.get('[data-ngie-testid="default-toggle-button"]'),
     textPlayerOptionButton: () => cy.get('[data-ngie-testid="text-toggle-button"]'),
     imagePlayerOptionButton: () => cy.get('[data-ngie-testid="image-toggle-button"]'),
@@ -45,28 +45,28 @@ const selectors = {
     customizePlayerLayoutProgressIndicatorButton: () => cy.get('[data-ngie-testid="progressbar-toggle-button"]'),
     customizePlayerLayoutToggleButtonLabel: () => cy.get('[class*="ToggleButtonMUI5style__ButtonLabelWrapper"]'),
     uncheckAllButton: () => cy.get('[class*="AudioPlayerstyles__UncheckButton"]'),
-    uploadTranscriptFileLabel: () => cy.get('[class*="RadioGroupMUI5styles__RadioOptionContainer"] .ngie-radio-label').eq(2),
-    uploadTranscriptFileRadioButton: () => cy.get('.ngie-radio-btn input').eq(2),
-    typeInTranscriptLabel: () => cy.get('[class*="RadioGroupMUI5styles__RadioOptionContainer"] .ngie-radio-label').eq(3),
-    typeInTranscriptRadioButton: () => cy.get('.ngie-radio-btn input').eq(3),
-    transcriptInputField: () => cy.get('[role="textbox"][title="Transcript"]'),
-    allowStudentsToDownloadAudioLabel: () => cy.get('[data-ngie-testid="allow-students-to-download-the-audio-checkbox"] .MuiFormControlLabel-label'),
-    allowStudentsToDownloadAudioCheckbox: () => cy.get('[data-ngie-testid="allow-students-to-download-the-audio-checkbox"] input'),
-    limitPlayAttemptsLabel: () => cy.get('[data-ngie-testid="limit-play-attempts-checkbox"] .MuiFormControlLabel-label'),
-    limitPlayAttemptsCheckbox: () => cy.get('[data-ngie-testid="limit-play-attempts-checkbox"] input'),
+    uploadTranscriptFileLabel: () => cy.get('.upload-transcript-opt-label'),
+    uploadTranscriptFileRadioButton: () => cy.get('.upload-transcript-opt-label input'),
+    typeInTranscriptLabel: () => cy.get('.type-in-transcript-opt-label'),
+    typeInTranscriptRadioButton: () => cy.get('[aria-label="Type in transcript"][type="radio"]'),
+    transcriptInputField: () => cy.get('[title="Transcript"]'),
+    allowStudentsToDownloadAudioLabel: () => cy.get('.allow-students-to-download-audio .MuiFormControlLabel-label').eq(0),
+    allowStudentsToDownloadAudioCheckbox: () => cy.get('.allow-students-to-download-audio input'),
+    limitPlayAttemptsLabel: () => cy.get('.allow-students-to-download-audio .MuiFormControlLabel-label').eq(1),
+    limitPlayAttemptsCheckbox: () => cy.get('.allow-students-to-download-audio input').eq(1),
     playAttemptsLimitLabel: () => cy.get('.playback-limit-wrapper [class*="Label"]'),
-    playAttemptsLimitInputField: () => cy.get('.playback-limit-wrapper input'),
+    playAttemptsLimitInputField: () => cy.get('.freeResponseAudioFormTextInput input'),
     studentViewSettingsLabel: () => cy.get('[class*="AudioPlayerstyles__TranscriptLabelWrapper"]').eq(0),
     audioOverviewLabel: () => cy.get('.additional-settings-label'),
     audioOverviewInputField: () => cy.get('[title="Description"]'),
-    transcriptLabel: () => cy.get('.audio-resource-label-wrapper').eq(1),
+    transcriptLabel: () => cy.get('.freeResponseAudioFormTextInput .transcript-label'),
     uploadTranscriptUploadLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(2),
     uploadTranscriptFileNameLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(3),
     uploadTranscriptChooseFileButton: () => cy.get('.upload-audio-file-input-wrapper button').eq(1),
     uploadTranscriptNoFileChosenLabel: () => cy.get('[aria-label="No file chosen"]').eq(1),
-    transcriptInputTypeFile: () => cy.get('input[type="file"]').eq(1),
-    uploadedTranscriptFileNameLabel: () => cy.get('.selected-file').eq(1),
-    transcriptFileUploadProgressBar: () => cy.get('[class*="AudioPlayerstyles__ProgressBar-"]').eq(1),
+    transcriptInputTypeFile: () => cy.get('.upload-transcript-file input[type="file"]'),
+    uploadedTranscriptFileNameLabel: () => cy.get('.upload-transcript-file .selected-file-wrapper'),
+    transcriptFileUploadProgressBar: () => cy.get('.audio-player-form-progressbar'),
     transcriptInputFieldLabel: () => cy.get('.additional-settings-label').eq(1),
     deleteTranscriptButton: () => cy.get('[aria-label*="Delete"]'),
 
@@ -788,14 +788,14 @@ const steps = {
         audioPlayerPage.audioOverviewInputField()
             .find('[data-widget="ngie_equation"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            //  .contains(constants.CKEditorInputFieldEnteredEquationText);
+        //  .contains(constants.CKEditorInputFieldEnteredEquationText);
     },
 
     verifyEquationInAudioOverviewPreviewTab: () => {
         audioPlayerPage.audioOverviewPreviewTab()
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            //  .contains(constants.CKEditorInputFieldEnteredEquationText);
+        //  .contains(constants.CKEditorInputFieldEnteredEquationText);
     },
 
     verifyLinkInAudioOverviewInputField: () => {
@@ -896,14 +896,14 @@ const steps = {
         audioPlayerPage.transcriptInputField()
             .find('[data-widget="ngie_equation"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            //  .contains(constants.CKEditorInputFieldEnteredEquationText);
+        //  .contains(constants.CKEditorInputFieldEnteredEquationText);
     },
 
     verifyEquationInTranscriptPreviewTab: () => {
         audioPlayerPage.transcriptContentPreviewTab()
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            //  .contains(constants.CKEditorInputFieldEnteredEquationText);
+        //  .contains(constants.CKEditorInputFieldEnteredEquationText);
     },
 
     verifyLinkInTranscriptInputField: () => {

package/cypress/pages/brainingCampManipulativePage.js

@@ -20,7 +20,7 @@ const selectors = {
     selectAManipulativeLabel: () => cy.get('[class*="SelectManipulativeWrapper"] [class*="BrainingcampManipulativestyle__WrapperSubHeader"]'),
     enterAShareCodeLabel: () => cy.get('[class*="EnterShareCodeWrapper"] [class*="BrainingcampManipulativestyle__WrapperSubHeader"]'),
     enterAShareCodeInputField: () => cy.get('[class*="EnterShareCodeWrapper"] input'),
-    previewTabCanvas: () => cy.get('.canvas'),
+    previewTabCanvas: () => cy.get('.bcm-inner'),
 }
 
 const steps = {

package/cypress/pages/chartsLinePage.js

@@ -130,11 +130,11 @@ const steps = {
         chartsLinePage.barAndPointTooltipLockUnlockButton()
             .should('have.attr', 'aria-label', 'unlocked bar');
         utilities.triggerMouseout(utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex));
-        cy.wait(500); // Add a small delay to ensure the tooltip is hidden
         utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex)
             .within(() => {
                 utilities.verifyElementVisibilityState(chartsLinePage.pointLockIcon(), 'notExist');
             });
+        cy.wait(500); // Add a small delay to ensure the tooltip is hidden
         utilities.hoverAwayFromElement();
     },
 

package/cypress/pages/components/additionalSettingsPanel.js

@@ -23,8 +23,8 @@ const selectors = {
             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'),
+    fontSizeListOptionLabels: () => cy.get('[aria-labelledby*="Font-Size-dropdown-label"] li[role="option"] .dropdown-label-text'),
+    fontSizesLabels: () => cy.get('[aria-labelledby*="Font-Size-dropdown-label"] li[role="option"] .dropdown-post-label-text'),
 }
 
 const steps = {
@@ -69,6 +69,7 @@ const steps = {
 
     expandFontSizeDropdown: () => {
         additionalSettingsPanel.fontSizeDropdown()
+            .trigger('mouseover')
             .click();
     }
 }

package/cypress/pages/components/autoScoredScoringPreviewTab.js

@@ -149,6 +149,12 @@ const steps = {
     checkManuallyScoredScoringLabel: () => {
         autoScoredScoringPreviewTab.scoringTypeLabelPreviewTab()
             .should('have.text', 'Manually scored');
+    },
+
+    checkNonScoredScoringLabel: () => {
+        //Need to update once https://weldnorthed.atlassian.net/browse/IEI-5618 is resolved
+        autoScoredScoringPreviewTab.scoringTypeLabelPreviewTab()
+            .contains('Non scored', { matchCase: false });
     }
 }
 
@@ -161,7 +167,7 @@ const tests = {
                 .should('be.checked');
             autoScoredScoringPreviewTab.gradingViewRadioButton()
                 .should('not.be.checked');
-            autoScoredScoringPreviewTab.steps.verifyPreviewScore(0, 0);
+            autoScoredScoringPreviewTab.steps.checkManuallyScoredScoringLabel();
             autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectIconsNotExist();
         });
 

package/cypress/pages/components/autoScoredScoringSectionMultiResponseType.js

@@ -76,6 +76,7 @@ const steps = {
 
     expandPenaltyScoringDropdown: () => {
         autoScoredScoringSectionMultiResponseType.penaltyScoringDropdown()
+            .trigger('mouseover')
             .click();
         cy.wait(500);
         utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.penaltyScoringDropdownListOptions(), 'visible');
@@ -147,6 +148,7 @@ const steps = {
 
     expandRoundingDropdown: () => {
         autoScoredScoringSectionMultiResponseType.roundingDropdown()
+            .trigger('mouseover')
             .click();
     },
 

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -141,7 +141,7 @@ const steps = {
     checkAlternativeButtonEnabled: () => {
         autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
             .should('be.enabled');
-    }
+    },
 }
 
 const tests = {
@@ -326,65 +326,31 @@ const tests = {
                 .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
         });
 
-        it('If user has not selected correct answer in the correct accordion, the user should get a warning popup', () => {
-            autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
-            dialogBoxBase.steps.allFieldsRequiredWarningPopupContents();
-        });
-
-        it('CSS of warning popup', { tags: 'css' }, () => {
-            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
-                'color': css.color.flyoutTitle,
-                'font-size': css.fontSize.heading,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(dialogBoxBase.buttonClose().find('svg'), {
-                'fill': css.color.closeIcon
-            });
-        });
-
-        it('Accessibility of warning popup', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(dialogBoxBase.dialogBox());
-        });
-
-        it('Warning popup should close on clicking the Close icon button', () => {
-            dialogBoxBase.steps.closeWarningPopup();
-            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
-        });
-
-        it('\'Error: Please set a correct answer.\' validation error messages should be displayed in the correct accordion, points error message should not be displayed', () => {
-            autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
-                .within(() => {
-                    utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
-                });
-            scoringSectionBaseEditTab.pointsWrapper()
-                .within(() => {
-                    utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
-                });
-            if (questionType != 'list ordering' && questionType != 'short text response' && questionType != 'text entry math' && questionType != 'text selection' && questionType != 'fill in the gaps with text' && questionType != 'fill in the gaps over image text') {
-                steps.verifySpecifyCorrectAnswerErrorMessage();
-            }
-            else if (questionType === 'short text response' || questionType === 'fill in the gaps with text' || questionType === 'fill in the gaps over image text' || questionType === 'text entry math') {
-                utilities.verifyInnerText(utilities.getNthElement(commonComponents.errorMessage(), -1), 'Error: Answer is required.');
-            } else if (questionType === 'text selection') {
-                utilities.verifyInnerText(commonComponents.alertMessage(), 'Error: Please set a correct answer.');
-            }
+        it('If user has not selected correct answer in the correct accordion, then the Add alternative answer button should be in disabled state', () => {
+            utilities.verifyElementDisabled(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
         });
     },
 
     verifyWarningPopupAndAccordionNavigationWhenNoPointsAddedInAlternativeAccordion: () => {
-        it('When user tries to expand correct accordion when all the mandatory fields are not filled in the alternative accordion, then a warning popup should be displayed and on closing the popup, alternative 2 accordion should be in expanded state', () => {
+        it('When user tries to expand correct accordion when all the mandatory fields are not filled in the alternative accordion, then correct answer accordion should be expanded and alternative 2 accordion should be in collapsed state', () => {
+            autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                .click();
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                .eq(1)
+                .should('have.attr', 'aria-expanded', 'false');
             autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                .should('have.attr', 'aria-expanded', 'true');
+        });
+
+        it('When user tries to expand alternative accordion when all the mandatory fields are not filled in the correct accordion, then correct answer accordion should be collapsed and alternative 2 accordion should be in expanded state', () => {
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                .eq(1)
                 .click();
-            dialogBoxBase.steps.allFieldsRequiredWarningPopupContents();
-            dialogBoxBase.steps.closeWarningPopup();
             autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
                 .eq(1)
                 .should('have.attr', 'aria-expanded', 'true');
+            autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                .should('have.attr', 'aria-expanded', 'false');
         });
     }
 }

package/cypress/pages/components/backgroundImageUploadComponent.js

@@ -59,29 +59,7 @@ const steps = {
 }
 
 const tests = {
-    verifyBackgroundImageSectionContentWithCSSAndA11y: (questionType = null) => {
-        it('\'Background image\' label should be visible', () => {
-            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');
-            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadLabel(), 'visible');
-            utilities.verifyInnerText(backgroundImageUploadComponent.chooseFileButton(), 'Choose file');
-            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.chooseFileButton(), 'visible');
-        });
-
-        it('\'File name\' label should be displayed and by default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
-            utilities.verifyInnerText(backgroundImageUploadComponent.fileNameLabel(), 'File name');
-            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.fileNameLabel(), 'visible');
-            utilities.verifyInnerText(backgroundImageUploadComponent.noFileChosenLabel(), 'No file chosen');
-            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.noFileChosenLabel(), 'visible');
-        });
-
+    verifyCSSAndA11yBeforeUpload: () => {
         it('CSS of upload section', { tags: 'css' }, () => {
             utilities.verifyCSS(backgroundImageUploadComponent.uploadLabel(), {
                 'color': css.color.labels,
@@ -109,12 +87,13 @@ const tests = {
         it('Accessibility of  Upload section before uploading image', { tags: 'a11y' }, () => {
             cy.checkAccessibility(backgroundImageUploadComponent.uploadLabel().parents('.edit-question-edit-tab-wrapper'));
         });
+    },
 
+    verifyImageUploadFunctionality: (questionType = null) => {
         it('When the user adds the image file and file upload is inprogress, file name and progress bar should be displayed below \'File name\' label. Progress bar should disappear once file is uploaded and uploaded image should be displayed', () => {
             backgroundImageUploadComponent.steps.uploadFile('highlightImage.jpg');
-            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'visible');
             backgroundImageUploadComponent.steps.verifyFileNameLabel('highlightImage.jpg');
-            if (questionType !== 'graphing' && questionType !== 'grid fill' && questionType !== 'image highlight') {
+            if (!['graphing', 'grid fill', 'image highlight', 'thinkSphere'].includes(questionType)) {
                 imageCanvasComponent.steps.verifyImageIsUploaded();
             }
         });
@@ -129,6 +108,34 @@ const tests = {
         });
     },
 
+    verifyBackgroundImageSectionContentWithCSSAndA11y: (questionType = null) => {
+        it('\'Background image\' label should be visible', () => {
+            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');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadLabel(), 'visible');
+            utilities.verifyInnerText(backgroundImageUploadComponent.chooseFileButton(), 'Choose file');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.chooseFileButton(), 'visible');
+        });
+
+        it('\'File name\' label should be displayed and by default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
+            utilities.verifyInnerText(backgroundImageUploadComponent.fileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.fileNameLabel(), 'visible');
+            utilities.verifyInnerText(backgroundImageUploadComponent.noFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.noFileChosenLabel(), 'visible');
+        });
+
+        tests.verifyCSSAndA11yBeforeUpload();
+
+        tests.verifyImageUploadFunctionality(questionType);
+    },
+
     verifyDeleteImagePopupContentAndFunctionality: () => {
         it('When the user hovers on \'Delete\' button, \'Delete image\' text should be displayed in tooltip', () => {
             backgroundImageUploadComponent.deleteImageIcon()