itemengine-cypress-automation 1.0.69 → 1.0.70

package/cypress/e2e/ILC/UploadResponse/uploadResponseAdditionalSettings.js

@@ -1,5 +1,6 @@
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import { uploadResponsePage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 
 describe('Create question page - Upload Response: Additional Settings', () => {
@@ -16,14 +17,16 @@ describe('Create question page - Upload Response: Additional Settings', () => {
         uploadResponsePage.tests.verifyAdditonalSettingsAccordionProperties();
 
         it('\'File settings and layout\' label should be displayed', () => {
-            uploadResponsePage.fileSettingsAndLayoutLabel()
-                .verifyInnerText('File settings and layout')
-                .and('be.visible');
+            utilities.verifyInnerText(uploadResponsePage.fileSettingsAndLayoutLabel(), 'File settings and layout');
+            utilities.verifyElementVisibilityState(uploadResponsePage.fileSettingsAndLayoutLabel(), 'visible');
         });
 
         it('CSS of \'File settings and layout\' section', { tags: 'css' }, () => {
-            uploadResponsePage.fileSettingsAndLayoutLabel()
-                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);
+            utilities.verifyCSS(uploadResponsePage.fileSettingsAndLayoutLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
         });
 
         it('Accessibility of \'File settings and layout\' section', { tags: 'a11y' }, () => {
@@ -41,21 +44,19 @@ describe('Create question page - Upload Response: Additional Settings', () => {
         });
 
         it('\'Allow students to capture photos\' checkbox label and checkbox should be displayed and by default it should be checked', () => {
-            uploadResponsePage.allowStudentsToCapturePhotosLabel()
-                .verifyInnerText('Allow students to capture photos');
-            uploadResponsePage.allowStudentsToCapturePhotosCheckbox()
-                .should('be.checked')
-                .parent()
-                .should('be.visible');
+            utilities.verifyInnerText(uploadResponsePage.allowStudentsToCapturePhotosLabel(), 'Allow students to capture photos');
+            uploadResponsePage.steps.verifyCapturePhotosCheckboxIsCheckedAndVisible();
         });
 
         it('CSS of \'Allow students to capture photos\' section - checked state', { tags: 'css' }, () => {
-            uploadResponsePage.allowStudentsToCapturePhotosLabel()
-                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
-            uploadResponsePage.allowStudentsToCapturePhotosCheckbox()
-                .parent()
-                .find('svg')
-                .should('have.css', 'color', css.color.activeButtons);
+            utilities.verifyCSS(uploadResponsePage.allowStudentsToCapturePhotosLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(uploadResponsePage.allowStudentsToCapturePhotosCheckbox().parent().find('svg'), {
+                'color': css.color.activeButtons
+            });
         });
 
         it('Accessibility of \'Allow students to capture photos\' section - checked state', { tags: 'a11y' }, () => {
@@ -64,37 +65,32 @@ describe('Create question page - Upload Response: Additional Settings', () => {
 
         it('When the \'Allow students to capture photos\' checkbox is checked then in the preview tab, the upload response area text should be \"Drag & Drop files here or browse files on your device, Google Drive or capture an image\"', () => {
             uploadResponsePage.steps.switchToPreviewTab();
-            uploadResponsePage.uploadCloudIcon()
-                .should('be.visible');
-            uploadResponsePage.dragAndDropFilesText()
-                .verifyInnerText('Drag & Drop files here');
-            uploadResponsePage.fileUploadOptionsLabel()
-                .should('have.text', 'or browse files on your device, Google Drive or capture an image');
+            utilities.verifyElementVisibilityState(uploadResponsePage.uploadCloudIcon(), 'visible');
+            utilities.verifyInnerText(uploadResponsePage.dragAndDropFilesText(), 'Drag & Drop files here');
+            uploadResponsePage.steps.verifyTextInUploadResponseArea('or browse files on your device, Google Drive or capture an image')
         });
 
         it('When the user unchecks the \'Allow students to capture photos\' checkbox, then in the Preview tab the upload response area text should be \"Drag & Drop files here or browse files on your device or Google Drive\"', () => {
             cy.log('Switching to Edit tab.');
             uploadResponsePage.steps.switchToEditTab();
-            uploadResponsePage.allowStudentsToCapturePhotosCheckbox()
-                .click()
-                .should('not.be.checked');
+            uploadResponsePage.steps.uncheckCapturePhotosCheckbox();
             cy.log('Switching to Preview tab.');
             uploadResponsePage.steps.switchToPreviewTab();
-            uploadResponsePage.dragAndDropFilesText()
-                .verifyInnerText('Drag & Drop files here');
-            uploadResponsePage.fileUploadOptionsLabel()
-                .should('have.text', 'or browse files on your device or Google Drive ');
+            utilities.verifyInnerText(uploadResponsePage.dragAndDropFilesText(), 'Drag & Drop files here');
+            uploadResponsePage.steps.verifyTextInUploadResponseArea('or browse files on your device or Google Drive ')
         });
 
         it('CSS of \'Allow students to capture photos\' section - unchecked state', { tags: 'css' }, () => {
             cy.log('Pre-step: Switching back to Edit tab.');
             uploadResponsePage.steps.switchToEditTab();
-            uploadResponsePage.allowStudentsToCapturePhotosLabel()
-                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
-            uploadResponsePage.allowStudentsToCapturePhotosCheckbox()
-                .parent()
-                .find('svg')
-                .should('have.css', 'fill', css.color.uncheckedCheckbox);
+            utilities.verifyCSS(uploadResponsePage.allowStudentsToCapturePhotosLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(uploadResponsePage.allowStudentsToCapturePhotosCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
             uploadResponsePage.steps.switchToPreviewTab();
         });
 
@@ -108,17 +104,13 @@ describe('Create question page - Upload Response: Additional Settings', () => {
         it('When the user checks the \'Allow students to capture photos\' checkbox again, then in the Preview tab the upload response area text should be \"Drag & Drop files here or browse files on your device or Google Drive or capture an image\"', () => {
             cy.log('Pre-step: Switching back to Edit tab.');
             uploadResponsePage.steps.switchToEditTab();
-            uploadResponsePage.allowStudentsToCapturePhotosCheckbox()
-                .click()
-                .should('be.checked');
+            uploadResponsePage.steps.checkCapturePhotosCheckbox();
             cy.log('Switching to Preview tab.');
             uploadResponsePage.steps.switchToPreviewTab();
-            uploadResponsePage.dragAndDropFilesText()
-                .verifyInnerText('Drag & Drop files here')
-                .and('be.visible');
-            uploadResponsePage.fileUploadOptionsLabel()
-                .should('have.text', 'or browse files on your device, Google Drive or capture an image')
-                .and('be.visible');
+            utilities.verifyInnerText(uploadResponsePage.dragAndDropFilesText(), 'Drag & Drop files here');
+            utilities.verifyElementVisibilityState(uploadResponsePage.dragAndDropFilesText(), 'visible');
+            uploadResponsePage.steps.verifyTextInUploadResponseArea('or browse files on your device, Google Drive or capture an image');
+            utilities.verifyElementVisibilityState(uploadResponsePage.fileUploadOptionsLabel(), 'visible');
         });
     });
 
@@ -131,9 +123,9 @@ describe('Create question page - Upload Response: Additional Settings', () => {
             uploadResponsePage.steps.expandAdditonalSettings();
         });
 
-        const fontsizes = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
-        const font = ['16px', '12px', '14px', '17px', '20px', '24px'];
-        const questionInstructionsTextFontSizes = { 'Default': '16px', 'Small': '12px', 'Normal': '14px', 'Large': '17px', 'Extra large': '20px', 'Huge': '24px' };
+        const fontsizes = ['Tiny', 'Small', 'Default', 'Normal', 'Big', 'Huge'];
+        const font = ['12px', '14px', '16px', '18px', '22px', '26px'];
+        const questionInstructionsTextFontSizes = { 'Tiny': '12px', 'Small': '14px','Default': '16px',  'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
         const dragAndDropFilesTextFontSizes = { 'Default': '24px', 'Small': '18px', 'Normal': '21px', 'Large': '25.5px', 'Extra large': '30px', 'Huge': '36px' };
         const fileUploadOptionsLabelFontSizes = { 'Default': '18px', 'Small': '13.5px', 'Normal': '15.75px', 'Large': '19.125px', 'Extra large': '22.5px', 'Huge': '27px' };
         const supportedFileFormatLabelFontSizes = { 'Default': '14px', 'Small': '10.5px', 'Normal': '12.25px', 'Large': '14.875px', 'Extra large': '17.5px', 'Huge': '21px' };
@@ -143,28 +135,30 @@ describe('Create question page - Upload Response: Additional Settings', () => {
 
         fontsizes.forEach((option, count) => {
             it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size for the entire question in the student player should be changed to ${option} in the \'Preview\' tab`, () => {
-                uploadResponsePage.fontSizeDropdown()
-                    .click();
-                uploadResponsePage.fontSizeListOptions(count)
-                    .click();
-                uploadResponsePage.fontSizeDropdown()
-                    .verifyInnerText(`${option}`);
+                uploadResponsePage.steps.selectFontSizeOptionFromFontSizeDropdown(count);
+                utilities.verifyInnerText(uploadResponsePage.fontSizeDropdown(), `${option}`);
                 cy.log('Switching to Preview tab.');
                 uploadResponsePage.steps.switchToPreviewTab();
-                uploadResponsePage.questionInstructionsText()
-                    .should('have.css', 'font-size', questionInstructionsTextFontSizes[option]);
-                uploadResponsePage.dragAndDropFilesText()
-                    .should('have.css', 'font-size', dragAndDropFilesTextFontSizes[option]);
-                uploadResponsePage.fileUploadOptionsLabel()
-                    .should('have.css', 'font-size', fileUploadOptionsLabelFontSizes[option]);
-                uploadResponsePage.supportedFileFormatLabel()
-                    .should('have.css', 'font-size', supportedFileFormatLabelFontSizes[option]);
-                uploadResponsePage.uploadedFileCount()
-                    .should('have.css', 'font-size', uploadedFileCountFontSizes[option]);
+                utilities.verifyCSS(uploadResponsePage.questionInstructionsText(), {
+                    'font-size': questionInstructionsTextFontSizes[option]
+                });
+                utilities.verifyCSS(uploadResponsePage.dragAndDropFilesText(), {
+                    'font-size': dragAndDropFilesTextFontSizes[option]
+                });
+                utilities.verifyCSS(uploadResponsePage.fileUploadOptionsLabel(), {
+                    'font-size': fileUploadOptionsLabelFontSizes[option]
+                });
+                utilities.verifyCSS(uploadResponsePage.supportedFileFormatLabel(), {
+                    'font-size': supportedFileFormatLabelFontSizes[option]
+                });
+                utilities.verifyCSS(uploadResponsePage.uploadedFileCount(), {
+                    'font-size': uploadedFileCountFontSizes[option]
+                });
                 cy.log('Uploading file to check font-size of the file name.')
                 uploadResponsePage.steps.fileUploadAndVerify(['sample.zip']);
-                uploadResponsePage.uploadedFileLink()
-                    .should('have.css', 'font-size', font[0]);
+                utilities.verifyCSS(uploadResponsePage.uploadedFileLink(), {
+                    'font-size': font[0]
+                });
                 cy.log('Post step: switching to edit tab to select another font size option')
                 uploadResponsePage.steps.switchToEditTab();
             });

package/cypress/e2e/ILC/UploadResponse/uploadResponseEditTabBasicSections.js

@@ -1,10 +1,10 @@
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import { uploadResponsePage } from "../../../pages";
 import { commonComponents } from "../../../pages/components";
+import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 
 let fileTypeList = ['Access', 'Assembly', 'C', 'C++', 'CSV', 'Excel', 'GIF', 'H', 'HEIC', 'HEIF', 'HEVC', 'JPG', 'LabVIEW', 'MATLAB', 'MP3', 'MP4', 'Open Office', 'PDF', 'PNG', 'Powerpoint', 'Publisher', 'Quartus', 'RTF', 'S', 'TXT', 'V', 'Verilog', 'Word', 'XPS', 'ZIP'];
-let indexOfDefaultSelectedFileTypes = [4, 5, 6, 11, 17, 18, 19, 20, 22, 24, 27, 28, 29];
 
 describe('Create question page - Upload Response: Question Instructions, Supported file types, Max Files dropdown', () => {
     before(() => {
@@ -40,27 +40,28 @@ describe('Create question page - Upload Response: Question Instructions, Support
         });
 
         it('\'Supported file types\' accordion should be displayed and it should be collapsed by default and next to \'Supported file types\' accordion menu, text \'13 selected\' should be displayed indicating number of selected file types and user should be able to expand and collapse this accordion', () => {
-            uploadResponsePage.supportedFileTypesAccordion()
-                .verifyInnerText('Supported file types');
-            uploadResponsePage.supportedFileTypesAccordionWrapper()
-                .should('have.attr', 'aria-expanded', 'false');
-            uploadResponsePage.selectedFileTypeCount()
-                .verifyInnerText('(13 selected)')
-                .and('be.visible');
+            utilities.verifyInnerText(uploadResponsePage.supportedFileTypesAccordion(), 'Supported file types');
+            uploadResponsePage.steps.verifySupportedFilesTypesAccordionCollapsedState();
+            utilities.verifyInnerText(uploadResponsePage.selectedFileTypeCount(), '(13 selected)');
+            utilities.verifyElementVisibilityState(uploadResponsePage.selectedFileTypeCount(), 'visible');
             cy.log('verifying if user is able to expand and collapse the \'Supported file types\' accordion')
-            uploadResponsePage.supportedFileTypesAccordionWrapper()
-                .click()
-                .should('have.attr', 'aria-expanded', 'true');
-            uploadResponsePage.supportedFileTypesAccordionWrapper()
-                .click()
-                .should('have.attr', 'aria-expanded', 'false');
+            uploadResponsePage.steps.clickOnSupportedFilesTypesAccordion();
+            uploadResponsePage.steps.verifySupportedFilesTypesAccordionExpandedState();
+            uploadResponsePage.steps.clickOnSupportedFilesTypesAccordion();
+            uploadResponsePage.steps.verifySupportedFilesTypesAccordionCollapsedState();
         });
 
         it('CSS of Supported file types section', { tags: 'css' }, () => {
-            uploadResponsePage.supportedFileTypesAccordion()
-                .verifyCSS(css.color.accordionLabel, css.fontSize.default, css.fontWeight.bold);
-            uploadResponsePage.selectedFileTypeCount()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.regular);
+            utilities.verifyCSS(uploadResponsePage.supportedFileTypesAccordion(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(uploadResponsePage.selectedFileTypeCount(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
         });
 
         it('Accessibility of Supported file types section', { tags: 'a11y' }, () => {
@@ -70,33 +71,23 @@ describe('Create question page - Upload Response: Question Instructions, Support
 
         it('When user expands the \'Supported file types\' accordion menu, all the file types should be listed and following file types should be selected - CSV, Excel, GIF, JPG, PDF, PNG, Powerpoint, Publisher, RTF, TXT, Word, XPS, ZIP', () => {
             cy.log('Pre-step: Expanding supported file types accordion');
-            uploadResponsePage.supportedFileTypesAccordionWrapper()
-                .click();
+            uploadResponsePage.steps.clickOnSupportedFilesTypesAccordion();
             fileTypeList.forEach((fileType, count) => {
-                uploadResponsePage.supportedFileTypesCheckboxWrapper(count)
-                    .find('.MuiFormControlLabel-label')
-                    .verifyInnerText(fileType)
-                    .and('be.visible');
-            });
-            indexOfDefaultSelectedFileTypes.forEach((selectedFileTypeIndex) => {
-                uploadResponsePage.supportedFileTypesCheckboxWrapper(selectedFileTypeIndex)
-                    .within(($element) => {
-                        uploadResponsePage.supportedFileTypeCheckbox()
-                            .should('be.checked');
-                        cy.wrap($element)
-                            .find('.MuiFormControlLabel-label')
-                            .verifyInnerText(fileTypeList[selectedFileTypeIndex])
-                    });
+                utilities.verifyInnerText(uploadResponsePage.supportedFileTypesCheckboxLabel(count), fileType);
+                utilities.verifyElementVisibilityState(uploadResponsePage.supportedFileTypesCheckboxLabel(count), 'visible');
             });
+            uploadResponsePage.steps.verifyDefaultSelectedFileTypes();
         });
 
         it('CSS of supported files accordion contents in expanded state', { tags: 'css' }, () => {
-            uploadResponsePage.supportedFileTypesCheckboxWrapper(4)
-                .find('svg g g')
-                .should('have.css', 'fill', css.color.activeButtons);
-            uploadResponsePage.supportedFileTypesCheckboxWrapper(0)
-                .find('.MuiFormControlLabel-label')
-                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
+            utilities.verifyCSS(uploadResponsePage.supportedFileTypesCheckboxWrapper(4).find('svg g g'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(uploadResponsePage.supportedFileTypesCheckboxWrapper(0).find('.MuiFormControlLabel-label'), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
         });
 
         it('Accessibility of supported files accordion contents in expanded state', { tags: 'a11y' }, () => {
@@ -105,37 +96,16 @@ describe('Create question page - Upload Response: Question Instructions, Support
 
         it('When the user deselects all the file types from the \'Supported file types\' accordion menu, then a validation text \'Error: Please select a file type.\' should be displayed', () => {
             cy.log('Deselecting all file types to get error message.');
-            indexOfDefaultSelectedFileTypes.forEach((selectedFileTypeIndex) => {
-                uploadResponsePage.supportedFileTypesCheckboxWrapper(selectedFileTypeIndex)
-                    .within(() => {
-                        uploadResponsePage.supportedFileTypeCheckbox()
-                            .uncheck()
-                            .should('not.be.checked');
-                    });
-            });
-            commonComponents.errorMessage()
-                .verifyInnerText('Error: Please select a file type.')
-                .and('be.visible');
+            uploadResponsePage.steps.uncheckDefaultSelectedFileTypes();
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please select a file type.');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
         });
 
-        it('CSS of \'Error: Please select a file type.\' error message', { tags: 'css' }, () => {
-            commonComponents.errorMessage()
-                .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
-        });
+        uploadResponsePage.tests.verifyCSSAnda11yOfErrorMessage();
 
-        it('Accessibility of \'Error: Please select a file type.\' error message', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(commonComponents.errorMessage());
-        });
-
-        it('When the user reselects any file type from the \'Supported file types\' accordion menu, then the validation text \'Error: Please select a file type\' should disappear', () => {
-            uploadResponsePage.supportedFileTypesCheckboxWrapper(0)
-                .within(() => {
-                    uploadResponsePage.supportedFileTypeCheckbox()
-                        .check()
-                        .should('be.checked');
-                });
-            commonComponents.errorMessage()
-                .should('not.exist');
+        it('When the user re-selects any file type from the \'Supported file types\' accordion menu, then the validation text \'Error: Please select a file type\' should disappear', () => {
+            uploadResponsePage.steps.checkSupportedFileTypeCheckbox(0);
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
     });
 
@@ -149,14 +119,23 @@ describe('Create question page - Upload Response: Question Instructions, Support
 
         it('CSS of Max Files dropdown in default state', { tags: 'css' }, () => {
             cy.log('Max files label')
-            uploadResponsePage.maxFilesLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            utilities.verifyCSS(uploadResponsePage.maxFilesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
             cy.log('default state of max file dropdown, default selected list option and chevron icon')
+            utilities.verifyCSS(uploadResponsePage.maxFilesDropdown(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.defaultDropdownBorder}`
+            });
+            utilities.verifyCSS(uploadResponsePage.maxFilesDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
             uploadResponsePage.maxFilesDropdown()
-                .should('have.css', 'background-color', css.color.secondaryBtnBg)
-                .and('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
                 .find('.dropdown-label-text')
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
                 .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
         });
 
@@ -166,33 +145,34 @@ describe('Create question page - Upload Response: Question Instructions, Support
         });
 
         it('\'Max files\' label and dropdown should be displayed and in \'Max files\' dropdown option \'15\' should be selected by default', () => {
-            uploadResponsePage.maxFilesLabel()
-                .verifyInnerText('Maximum number of files')
-                .and('be.visible');
-            uploadResponsePage.maxFilesDropdown()
-                .verifyInnerText('15')
-                .and('be.visible');
+            utilities.verifyInnerText(uploadResponsePage.maxFilesLabel(), 'Maximum number of files');
+            utilities.verifyElementVisibilityState(uploadResponsePage.maxFilesLabel(), 'visible');
+            utilities.verifyInnerText(uploadResponsePage.maxFilesDropdown(), '15');
+            utilities.verifyElementVisibilityState(uploadResponsePage.maxFilesDropdown(), 'visible');
         });
 
         it('Clicking on Max files dropdown should open a list of options from 1 to 15', () => {
             cy.log('Opening the max files dropdown list');
-            uploadResponsePage.maxFilesDropdown()
-                .click();
+            uploadResponsePage.steps.expandMaxFilesDropdown();
             for (let maxFilesIndex = 1; maxFilesIndex < 16; maxFilesIndex++) {
-                uploadResponsePage.maxFilesDropdownListOptions(maxFilesIndex - 1)
-                    .should('have.text', maxFilesIndex);
+                utilities.verifyInnerText(uploadResponsePage.maxFilesDropdownListOptions(maxFilesIndex - 1), `${maxFilesIndex}`)
             };
         });
 
         it('CSS of Max files dropdown and dropdown content in active state', { tags: 'css' }, () => {
-            uploadResponsePage.maxFilesDropdown()
-                .should('have.css', 'background-color', css.color.secondaryBtnBg)
-                .and('have.css', 'border', `1px solid ${css.color.secondaryBtnActive}`);
-            uploadResponsePage.maxFilesDropdownListOptions(13)
-                .should('have.css', 'background-color', css.color.transparent);
-            uploadResponsePage.maxFilesDropdownListOptions(14)
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
-                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            utilities.verifyCSS(uploadResponsePage.maxFilesDropdown(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.secondaryBtnActive}`
+            });
+            utilities.verifyCSS(uploadResponsePage.maxFilesDropdownListOptions(13), {
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(uploadResponsePage.maxFilesDropdownListOptions(14), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
         });
 
         it('Accessibility of Max files dropdown and dropdown content in active state', { tags: 'a11y' }, () => {
@@ -201,26 +181,25 @@ describe('Create question page - Upload Response: Question Instructions, Support
         });
 
         it('When user selects option \'15\' from the Max files dropdown, then in the Preview tab user should be able to upload maximum 15 files and count in the file limit section should update accordingly', () => {
-            uploadResponsePage.maxFilesDropdownListOptions(14)
-                .click();
+            uploadResponsePage.steps.selectOptionFromMaxFilesDropdown(14);
             cy.log(`Switching to preview tab and uploading 15 files`);
             uploadResponsePage.steps.switchToPreviewTab();
             uploadResponsePage.steps.fileUploadAndVerify(['sample.csv', 'sample.xlsx', 'sample.gif', 'sample.jpg', 'sample.pdf', 'image.png', 'sample.ppt', 'sample.pub', 'sample.rtf', 'sample.txt', 'sample.doc', 'sample.xps', 'sample.zip', 'sample1.jpg', 'sample2.jpg'])
-            uploadResponsePage.uploadedFileCount()
-                .verifyInnerText('15/15 File Limit');
+            utilities.verifyInnerText(uploadResponsePage.uploadedFileCount(), '15/15 File Limit');
         });
 
         it('When the user tries to add more files than max file limit, file limit error message - \'Error: You have reached the maximum number of files that can be uploaded.\ should be displayed', () => {
             cy.log('Pre-step: Uploading one more file above limit');
-            uploadResponsePage.inputTypeFile()
-                .attachFile('uploads/sample.jpg');
-            commonComponents.errorMessage()
-                .verifyInnerText('Error: You have reached the maximum number of files that can be uploaded.');
+            uploadResponsePage.steps.uploadFile('uploads/sample.jpg')
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: You have reached the maximum number of files that can be uploaded.');
         });
 
         it('CSS of \'File limit error\' message', { tags: 'css' }, () => {
-            commonComponents.errorMessage()
-                .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+            utilities.verifyCSS(commonComponents.errorMessage(), {
+                'color': css.color.errorText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
         });
 
         it('Accessibility of \'File limit error\' message', { tags: 'a11y' }, () => {
@@ -232,17 +211,13 @@ describe('Create question page - Upload Response: Question Instructions, Support
         it('When user selects option \'1\' from the Max files dropdown, then in the Preview tab user should be able to upload only 1 file and when user tries to upload more than permitted number of files, then the user should get file limit error message', () => {
             cy.log('Pre-step: Switching to Edit Tab, opening max files dropdown and selecting 1 as Max File Limit.');
             uploadResponsePage.steps.switchToEditTab();
-            uploadResponsePage.maxFilesDropdown()
-                .click();
-            uploadResponsePage.maxFilesDropdownListOptions(0)
-                .click();
+            uploadResponsePage.steps.expandMaxFilesDropdown();
+            uploadResponsePage.steps.selectOptionFromMaxFilesDropdown(0);
             cy.log('Switching to preview tab')
             uploadResponsePage.steps.switchToPreviewTab();
             uploadResponsePage.steps.fileUploadAndVerify(['sample.csv']);
-            uploadResponsePage.inputTypeFile()
-                .attachFile('uploads/sample1.jpg');
-            commonComponents.errorMessage()
-                .verifyInnerText('Error: You have reached the maximum number of files that can be uploaded.');
+            uploadResponsePage.steps.uploadFile('uploads/sample1.jpg')
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: You have reached the maximum number of files that can be uploaded.');
         });
 
         uploadResponsePage.tests.verifyErrorMessageDisappear();

package/cypress/e2e/ILC/UploadResponse/uploadResponseHeaderSection.js

@@ -1,6 +1,6 @@
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import { uploadResponsePage, dialogBoxBase } from "../../../pages";
-import { commonComponents } from "../../../pages/components";
+import utilities from "../../../support/helpers/utilities";
 
 describe('Create question page - Upload Response: Header section and Saving question', () => {
     before(() => {
@@ -45,28 +45,14 @@ describe('Create question page - Upload Response: Header section and Saving ques
             dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
 
             it('Validation error messages should be displayed below required input fields', () => {
-                uploadResponsePage.questionInstructionsLabelEditTab()
-                    .parents('.edit-question-instruction-wrapper')
-                    .within(() => {
-                        commonComponents.errorMessage()
-                            .verifyInnerText('Error: Question instructions are required.')
-                            .and('be.visible');
-                    });
-                uploadResponsePage.pleaseEnterPointsErrorMessage()
-                    .verifyInnerText('Error: Please enter points.');
+                uploadResponsePage.steps.verifyQuestionInstructionsErrorMessage();
+                utilities.verifyInnerText(uploadResponsePage.pleaseEnterPointsErrorMessage(), 'Error: Please enter points.');
             });
 
             it('Validation error messages should disappear when required input fields are filled', () => {
                 uploadResponsePage.steps.addQuestionInstructions();
-                uploadResponsePage.questionInstructionsLabelEditTab()
-                    .parents('.edit-question-instruction-wrapper')
-                    .within(() => {
-                        commonComponents.errorMessage()
-                            .should('not.exist');
-                    });
                 uploadResponsePage.steps.allotPoints(20);
-                uploadResponsePage.pleaseEnterPointsErrorMessage()
-                    .should('not.exist');
+                uploadResponsePage.steps.verifyErrorMessageIsNotDisplayed();
             });
         });