itemengine-cypress-automation 1.0.2

package/cypress/pages/videoResponsePage.js

@@ -0,0 +1,375 @@
+import utilities from "../support/helpers/utilities"
+import { additionalSettingsPanel, commonComponents, createQuestionBasePage, previewScoringAndShowCorrectAnswerComponent, questionInstructionsComponent, scoringSectionBase, maximumRecorderLengthComponent, playbackControlsBaseComponent } from "./components"
+import { dialogBoxBase } from "./dialogBoxBase";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...commonComponents,
+    ...scoringSectionBase,
+    ...additionalSettingsPanel,
+    ...questionInstructionsComponent,
+    ...scoringSectionBase,
+    ...dialogBoxBase,
+    ...previewScoringAndShowCorrectAnswerComponent,
+    ...maximumRecorderLengthComponent,
+    ...playbackControlsBaseComponent,
+    videoRecorderWrapper: () => cy.get('.video-recorder-wrapper'),
+    clickTapAnywhereArea: () => cy.get('.camera-permission'),
+    recordButton: () => cy.get('.rec-button'),
+    startRecordingText: () => cy.get('.record-text'),
+    recordingStatusText: () => cy.get('.recording-status-text'),
+    startRecordingCountDown: () => cy.get('.count-down-number'),
+    recordingTimer: () => cy.get('[class*="VideoRecorderstyle__RecordTimer"]'),
+    recordingStatusIcon: () => cy.get('.recording-wrapper svg'),
+    pauseButton: () => cy.get('button[aria-label="Pause recording"]'),
+    stopButton: () => cy.get('button[aria-label="Stop recording"]'),
+    resumeButton: () => cy.get('button[aria-label="Resume recording"]'),
+    recordAgainButton: () => cy.get('button[aria-label="Record again"]'),
+    playerTimer: () => cy.get('[class*="VideoRecorderstyle__PlayerTimerWrapper"]'),
+    playbackSpeedButton: () => cy.get('button[aria-label="Playback speed"]'),
+    fullScreenButton: () => cy.get('button[aria-label="Full screen"]'),
+    savedResponseText: () => cy.get('[class*="VideoRecorderstyle__ResponseTextWrapper"]'),
+    maxRecorderLengthInputField: () => cy.get('input[aria-label="Maximum recorder length"]'),
+    playbackSpeedOptionsList: () => cy.get('[class*="VideoRecorderstyle__PlaybackSpeedOptions"]'),
+    playbackSpeedOption: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.speed-option[aria-label="${ariaLabel}"]`)
+        } else {
+            return cy.get('.speed-option')
+        }
+    },
+    confirmRetakeButton: () => cy.get('.delete-action-btn-wrapper button').eq(1),
+    cancelRetakeButton: () => cy.get('.delete-action-btn-wrapper button').eq(0),
+    retakePopupContent: () => cy.get('.retake-popup-content'),
+    advancedPlaybackOptionsLabel: () => cy.get('.advanced-recorder-settings .ngie-toggle-button-title'),
+    playbackSpeedAdvancedPlaybackOptionButton: () => cy.get('button[data-ngie-testid="playback-speed-toggle-button"]'),
+    fullScreenAdvancedPlaybackOptionButton: () => cy.get('button[data-ngie-testid="full-screen-toggle-button"]'),
+    recordAgainAdvancedPlaybackOptionButton: () => cy.get('button[data-ngie-testid="record-again-toggle-button"]'),
+    advancedPlaybackOptionButtonSelectedIcon: () => cy.get('.ngie-toggle-button-tick-icon'),
+    advancedPlaybackOptionButtonLabel: () => cy.get('.customized_button_label'),
+    studentResponseAreaAndLayoutLabel: () => cy.get('.student-response-area-layout-warpper')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...scoringSectionBase.steps,
+    ...questionInstructionsComponent.steps,
+    ...maximumRecorderLengthComponent.steps,
+    ...additionalSettingsPanel.steps,
+    ...playbackControlsBaseComponent.steps,
+    /**
+     * @param {string} recordingStatus - The expected recording status, such as 'Allow access to your camera and microphone.',
+     * 'Preparing to record', 'Recording...', 'Recording paused', or 'Saving'.
+     * @throws {Error} Throws an error if an invalid recording status is provided.
+     * @description this function verifies the display of recording status and associated icons in the video response interface.
+     */
+    verifyRecordingStatus: (recordingStatus) => {
+        const statusIcon = videoResponsePage.recordingStatusIcon();
+
+        let expectedIconId = null;
+
+        switch (recordingStatus) {
+            case 'Allow access to your camera and microphone.':
+                expectedIconId = 'g#Ellipse_99';
+                break;
+            case 'Preparing to record':
+            case 'Recording...':
+                expectedIconId = 'g#Recording\\.\\.\\.';
+                break;
+            case 'Recording paused':
+                expectedIconId = 'path#pause';
+                break;
+            case 'Saving':
+                expectedIconId = 'g#Saving';
+                break;
+            default:
+                throw new Error('Invalid recording status');
+        }
+
+        statusIcon.find(`${expectedIconId}`).should('be.visible');
+        utilities.verifyInnerText(videoResponsePage.recordingStatusText(), recordingStatus);
+        utilities.verifyElementVisibilityState(videoResponsePage.recordingStatusText(), 'visible');
+    },
+
+    startRecording: () => {
+        videoResponsePage.clickTapAnywhereArea()
+            .click();
+    },
+
+    verifyPauseButtonDisabledState: () => {
+        videoResponsePage.pauseButton()
+            .should('be.disabled');
+    },
+
+    verifyPauseButtonEnabledState: () => {
+        videoResponsePage.pauseButton()
+            .should('be.enabled');
+    },
+
+    waitForRecordingToStart: () => {
+        utilities.verifyElementVisibilityState(videoResponsePage.recordingTimer(), 'visible');
+        videoResponsePage.recordingTimer()
+            .should('contain', '00:01 /')
+    },
+
+    pauseRecording: () => {
+        videoResponsePage.pauseButton()
+            .click();
+    },
+
+    resumeRecording: () => {
+        videoResponsePage.resumeButton()
+            .click();
+    },
+
+    stopRecording: () => {
+        videoResponsePage.stopButton()
+            .click();
+    },
+
+    recordAgain: () => {
+        videoResponsePage.recordAgainButton()
+            .click();
+    },
+
+    /**
+     * @description Records a video and saves it for a specified duration.
+     * @param {number} time - The duration (in milliseconds) for which the video should be recorded.
+     * @throws {Error} Throws an error if any step in the recording process fails.
+     */
+    recordAndSaveVideo: (time) => {
+        videoResponsePage.steps.startRecording();
+        utilities.verifyElementVisibilityState(videoResponsePage.startRecordingCountDown(), 'visible')
+        utilities.verifyElementVisibilityState(videoResponsePage.startRecordingCountDown(), 'notExist')
+        videoResponsePage.steps.waitForRecordingToStart()
+        videoResponsePage.steps.addWaitToRecord(time - 1000);
+        videoResponsePage.steps.stopRecording();
+    },
+
+    /**
+     * @param {string} time for recording a video
+     * @description this function adds a wait to record a video
+     */
+    addWaitToRecord: (time) => {
+        cy.wait(time)
+    },
+
+    /**
+     * @param {string} time of the recorded video
+     * @description this function is used to verify the recording time of a video
+     */
+    verifyRecordingTime: (time) => {
+        utilities.verifyInnerText(videoResponsePage.recordingTimer(), time);
+    },
+
+    /**
+     * @param {string} time playing time of the recorded video
+     * @description this function is used to verify the playing time of a recorded video
+     */
+    verifyVideoPlaybackTimer: (time) => {
+        videoResponsePage.playerTimer()
+            .should('have.text', time);
+    },
+
+    /**
+     * @description Waits for the video playback to begin and verifies the displayed time.
+     */
+    waitForPlaybackToBegin: () => {
+        videoResponsePage.playerTimer()
+            .should('contain', '00:01/');
+    },
+
+    /**
+     * @param {*} elementToHover selector of element whose tooltip CSS needs to be verified
+     * @description this function is used to verify tooltip CSS of an element in video response preview
+     * @example videoResponsePage.steps.verifyTooltipCSS(videoResponsePage.pauseButton())
+     */
+    verifyTooltipCSS: (elementToHover) => {
+        const tooltipStyles = {
+            'background-color': css.color.defaultBackground,
+            'color': css.color.helperText,
+            'font-size': css.fontSize.normal,
+            'font-weight': css.fontWeight.regular
+        };
+        elementToHover.trigger('mouseover');
+        utilities.verifyElementVisibilityState(videoResponsePage.tooltipText(), 'visible');
+        utilities.verifyCSS(videoResponsePage.tooltipText(), tooltipStyles);
+        elementToHover.trigger('mouseout');
+        utilities.verifyElementVisibilityState(videoResponsePage.tooltipText(), 'notExist');
+    },
+
+    stopAndVerifySavingAndRecordingLength: () => {
+        videoResponsePage.recordingTimer()
+            .invoke('text')
+            .then(text => {
+                const recordedTime = text.split('/')[0]
+                videoResponsePage.steps.stopRecording();
+                videoResponsePage.steps.verifyRecordingStatus('Saving');
+                videoResponsePage.playerTimer()
+                    .invoke('text')
+                    .then(text => {
+                        const playbackTime = text.split('/')[1]
+                        expect(playbackTime).to.be.eq(recordedTime)
+                    });
+            });
+    },
+
+    /**
+     * @param {*} elementToHover selector of element whose tooltip accessibility needs to be verified
+     * @description this function is used to verify accessibility of tooltip of an element in video response preview
+     * @example videoResponsePage.steps.verifyTooltipAccessibility(videoResponsePage.pauseButton())
+     */
+    verifyTooltipAccessibility: (elementToHover) => {
+        elementToHover.trigger('mouseover');
+        utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible');
+        cy.checkAccessibility(commonComponents.tooltipText());
+        elementToHover.trigger('mouseout');
+        utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+    },
+
+    hoverOnPlaybackSpeedButton: () => {
+        videoResponsePage.playbackSpeedButton()
+            .trigger('mouseover');
+    },
+
+    verifyPlaybackSpeedListOptions: () => {
+        const playbackSpeedOptions = ['1x', '1.25x', '1.5x', '2x'];
+        for (let index = 0; index < 4; index++) {
+            utilities.verifyInnerText(videoResponsePage.playbackSpeedOption().eq(index), playbackSpeedOptions[index]);
+        }
+    },
+
+    /**
+     * @description Selects a playback speed option for the video player.
+     * @param {string} playbackSpeed - The desired playback speed to be selected from "1x", "1.25x" "1.5x", "2x".
+     * @throws {Error} Throws an error if the specified playback speed option is not found.
+     */
+    selectPlaybackSpeed: (playbackSpeed) => {
+        videoResponsePage.playbackSpeedOption(playbackSpeed)
+            .click();
+    },
+
+    /**
+     * @description Verifies that the current playback time on the video player matches the expected time.
+     * This function extracts the elapsed time from the video player, calculates the total elapsed time in seconds,
+     * and then compares it to the expected time.
+     * @param {number} time - The expected playback time in seconds.
+     * @throws {Error} Throws an error if the actual playback time does not match the expected time.
+     */
+    verifyPlaybackElapsedTime: (time) => {
+        videoResponsePage.playerTimer()
+            .invoke('text')
+            .then(text => {
+                let elapsedTime = text.split('/')[0]
+                let currentElapsedTimerMinutes = Number(elapsedTime.split(':')[0])
+                let currentElapsedTimerSeconds = Number(elapsedTime.split(':')[1])
+                let currentTotalElapsedTimerSeconds = currentElapsedTimerMinutes * 60 + currentElapsedTimerSeconds
+                currentTotalElapsedTimerSeconds.should.equal(time)
+            });
+    },
+
+    /**
+     * @description Adds a waiting period in milliseconds before playing a video.
+     * This function pauses test execution for the specified duration to simulate waiting
+     * before initiating video playback.
+     * @param {number} time - The duration to wait in milliseconds before playing the video.
+     */
+    addWaitToPlayVideo: (time) => {
+        cy.wait(time);
+    },
+
+    recordAgain: () => {
+        videoResponsePage.recordAgainButton()
+            .click();
+    },
+
+    cancelRetake: () => {
+        videoResponsePage.cancelRetakeButton()
+            .click();
+    },
+
+    confirmRetake: () => {
+        videoResponsePage.confirmRetakeButton()
+            .click();
+    },
+
+    verifyPlaybackSpeedAdvancedPlaybackOptionSelectedState: () => {
+        videoResponsePage.playbackSpeedAdvancedPlaybackOptionButton()
+            .should('have.class', 'Mui-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(videoResponsePage.advancedPlaybackOptionButtonSelectedIcon(), 'visible');
+            });
+    },
+
+    verifyPlaybackSpeedAdvancedPlaybackOptionDeselectedState: () => {
+        videoResponsePage.playbackSpeedAdvancedPlaybackOptionButton()
+            .should('not.have.class', 'Mui-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(videoResponsePage.advancedPlaybackOptionButtonSelectedIcon(), 'notExist');
+            });
+    },
+
+    verifyFullScreenAdvancedPlaybackOptionSelectedState: () => {
+        videoResponsePage.fullScreenAdvancedPlaybackOptionButton()
+            .should('have.class', 'Mui-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(videoResponsePage.advancedPlaybackOptionButtonSelectedIcon(), 'visible');
+            });
+    },
+
+    verifyFullScreenAdvancedPlaybackOptionDeselectedState: () => {
+        videoResponsePage.fullScreenAdvancedPlaybackOptionButton()
+            .should('not.have.class', 'Mui-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(videoResponsePage.advancedPlaybackOptionButtonSelectedIcon(), 'notExist');
+            });
+    },
+
+    verifyRecordAgainAdvancedPlaybackOptionSelectedState: () => {
+        videoResponsePage.recordAgainAdvancedPlaybackOptionButton()
+            .should('have.class', 'Mui-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(videoResponsePage.advancedPlaybackOptionButtonSelectedIcon(), 'visible');
+            });
+    },
+
+    verifyRecordAgainAdvancedPlaybackOptionDeselectedState: () => {
+        videoResponsePage.recordAgainAdvancedPlaybackOptionButton()
+            .should('not.have.class', 'Mui-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(videoResponsePage.advancedPlaybackOptionButtonSelectedIcon(), 'notExist');
+            });
+    },
+
+    clickOnPlaybackSpeedAdvancedPlaybackOption: () => {
+        videoResponsePage.playbackSpeedAdvancedPlaybackOptionButton()
+            .click();
+    },
+
+    clickOnFullScreenAdvancedPlaybackOption: () => {
+        videoResponsePage.fullScreenAdvancedPlaybackOptionButton()
+            .click();
+    },
+
+    clickOnRecordAgainAdvancedPlaybackOption: () => {
+        videoResponsePage.recordAgainAdvancedPlaybackOptionButton()
+            .click();
+    }
+}
+
+const tests = {
+    ...questionInstructionsComponent.tests,
+    ...scoringSectionBase.tests,
+    ...previewScoringAndShowCorrectAnswerComponent.tests,
+    ...commonComponents.tests,
+    ...additionalSettingsPanel.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests,
+    ...maximumRecorderLengthComponent.tests
+}
+
+export const videoResponsePage = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/support/commands.js

@@ -0,0 +1,140 @@
+import crypto from 'crypto';
+import { v4 as uuidv4 } from 'uuid';
+import "cypress-real-events/support";
+import 'cypress-file-upload';
+require('cy-verify-downloads').addCustomCommand();
+import addContext from "mochawesome/addContext";
+
+const randomUser = (j, username, i) => ({
+    id: uuidv4(),
+    role: j,
+    serialNo: i,
+    userName: `${username} ${i}`,
+    firstName: `${username} ${i}`,
+    lastName: `${username} ${i}`,
+});
+
+const generateInitialSessionData = () => {
+    const users = [
+        randomUser(2, 'student', 1),
+        randomUser(2, 'student', 2),
+        randomUser(1, 'teacher', 1),
+    ];
+    const sessionData = { users, itemActivityMap: [] };
+    const sessionToken = crypto.randomBytes(4).toString('hex');
+    return {
+        sessionData,
+        sessionToken,
+    };
+};
+
+Cypress.Commands.add('loginAs', (roleName = 'admin') => {
+    if (roleName == 'admin') {
+        var username = `${Cypress.env('admin_username')}`;
+        var password = `${Cypress.env('admin_password')}`
+    };
+    cy.logout();
+    cy.request({
+        method: 'POST',
+        url: `${Cypress.env('AUTH_URL')}/login`,
+        form: true,
+        failOnStatusCode: false,
+        body: {
+            "username": username,
+            "password": password
+        },
+    }).then((response) => {
+        const atoken = response.headers["x-auth-token"];
+        const rtoken = response.headers["refresh-token"];
+        const firstName = response.body["givenName"];
+        const lastName = response.body["familyName"];
+        const userId = response.body["id"];
+        const userSettings = response.body["userSettings"];
+        const { sessionData, sessionToken } = generateInitialSessionData();
+        const { users } = sessionData;
+        const { itemActivityMap } = sessionData;
+        window.localStorage.setItem('ngie_roleId', '3');
+        window.localStorage.setItem('ngie_itemActivityMap', JSON.stringify(itemActivityMap));
+        window.localStorage.setItem('ngie_userToken', 'true');
+        window.localStorage.setItem('ngie_organisationId', 'undefined');
+        window.localStorage.setItem('ngie_accessToken', atoken);
+        window.localStorage.setItem('ngie_userId', userId);
+        window.localStorage.setItem('ngie_firstName', firstName);
+        window.localStorage.setItem('ngie_lastName', lastName);
+        window.localStorage.setItem('ngie_users', JSON.stringify(users));
+        window.localStorage.setItem('ngie_userRole', 'ADMIN');
+        window.localStorage.setItem('ngie_sessionId', 'undefined');
+        window.localStorage.setItem('ngie_sessionToken', sessionToken);
+        window.localStorage.setItem('ngie_refreshToken', rtoken);
+        window.localStorage.setItem('ngie_districtId', 'undefined');
+        window.localStorage.setItem('user-settings', JSON.stringify(userSettings));
+        window.localStorage.setItem('env-config', userSettings["envConfig"]);
+        window.localStorage.setItem('defaultItemId', userSettings["defaultItemId"]);
+    });
+    cy.saveLocalStorage();
+});
+
+Cypress.Commands.add('logout', () => {
+    const rtoken = window.localStorage.getItem('ngie_refreshToken');
+    if (rtoken !== null) {
+        const atoken = window.localStorage.getItem('ngie_accessToken');
+        cy.request({
+            headers: {
+                Authorization: `Bearer ${atoken}`,
+                'content-type': 'application/json',
+            },
+            method: 'POST',
+            url: `${Cypress.env('AUTH_URL')}/destroy/refresh-token`,
+            form: true,
+            failOnStatusCode: false,
+            body: {
+                "token": `${rtoken}`
+            },
+        });
+    };
+    const atoken = window.localStorage.getItem('ngie_accessToken');
+    if (atoken !== null) {
+        cy.clearLocalStorage();
+        cy.clearCookies();
+    };
+});
+
+Cypress.Commands.add('setGraphqlWait', () => {
+    cy.intercept({
+        method: 'POST',
+        url: `${Cypress.env('GRAPHQL_URL')}`,
+    }).as('graphql');
+});
+
+Cypress.Commands.add('pageLoadWait', (operationName = null) => {
+    if (operationName == null) {
+        cy.wait('@graphql');
+    } else {
+        cy.wait(`@${operationName}`);
+    }
+    cy.get('.MuiCircularProgress-svg')
+        .should('not.be.visible');
+});
+
+Cypress.Commands.add('interceptGraphql', (operationName) => {
+    cy.intercept('POST', /graphql/, (req) => {
+        if (req.body.hasOwnProperty('operationName') && req.body.operationName === operationName) {
+            req.alias = `${operationName}`;
+        }
+    });
+});
+
+Cypress.Commands.add('fill', { prevSubject: 'element' }, ($subj, text) => {
+    $subj.val(text);
+    return cy.wrap($subj).type('{enter}');
+});
+
+Cypress.Commands.add('addContext', (context) => {
+    cy.once('test:after:run', (test) => addContext({ test }, context));
+});
+
+Cypress.Commands.add('barsPreLoaderWait', () => {
+    cy.get('[id="question-item-instruction-loader"]')
+        .find('img')
+        .should('not.be.visible');
+});

package/cypress/support/e2e.js

@@ -0,0 +1,14 @@
+import './commands'
+import './helpers/localStorage';
+import 'cypress-mochawesome-reporter/register';
+import 'cypress-axe';
+import './helpers/cypressUtilities';
+import './helpers/accessibility';
+import './helpers/selectText';
+
+Cypress.on('uncaught:exception', () => {
+    return false
+});
+
+const registerCypressGrep = require('@cypress/grep')
+registerCypressGrep()

package/cypress/support/helpers/abortEarly.js

@@ -0,0 +1,19 @@
+function abortEarly() {
+    if (this.currentTest.state === 'failed') {
+        cy.task('shouldSkip', true);
+        console.log(this)
+    }
+    cy.task('shouldSkip').then(value => {
+        if (value) this.skip();
+    });
+};
+
+function abortEarlySetup() {
+    before(() => {
+        cy.task('resetShouldSkipFlag')
+    });
+    beforeEach(abortEarly);
+    afterEach(abortEarly);
+};
+
+export default abortEarlySetup;

package/cypress/support/helpers/accessibility.js

@@ -0,0 +1,34 @@
+import * as config from '../../fixtures/accessibilityConfig.json';
+
+function terminalLog(violations) {
+    const violationData = violations.map(
+        ({ id, impact, description, nodes }) => ({
+            elements: nodes.length,
+            id,
+            description,
+            impact,
+        })
+    );
+    violationData.forEach((violation) => {
+        cy.addContext(JSON.stringify(violation))
+    });
+    return null;
+};
+
+function checkAccessibility(cySelector = null) {
+    cy.wait(1000);
+    cy.injectAxe()
+        .then(() => {
+            if (cySelector === null) {
+                return cy.checkA11y(null, config, terminalLog);
+            } else {
+                cySelector.then(($element) => {
+                    return cy.checkA11y($element.selector, config, terminalLog);
+                });
+            };
+        });
+};
+
+Cypress.Commands.add('checkAccessibility', (cySelector = null) => {
+    return checkAccessibility(cySelector);
+});

package/cypress/support/helpers/cypressUtilities.js

@@ -0,0 +1,64 @@
+import { uploadResponsePage } from "../../pages"
+import { commonComponents } from "../../pages/components";
+
+Cypress.Commands.add('verifyCSS', { prevSubject: true }, (subject, color, fontSize, fontWeight) => {
+    cy.wrap(subject)
+        .should('have.css', 'color', color)
+        .and('have.css', 'font-size', fontSize)
+        .and('have.css', 'font-weight', fontWeight);
+    return cy.wrap(subject);
+});
+
+Cypress.Commands.add('verifyTooltip', { prevSubject: true }, (subject, tooltipText, parameters) => {
+    cy.wrap(subject)
+        .trigger('mouseover', parameters);
+    commonComponents.tooltipText()
+        .should('have.text', tooltipText)
+        .and('be.visible');
+    cy.wrap(subject)
+        .trigger('mouseout', parameters);
+    commonComponents.tooltipText()
+        .should('not.exist');
+});
+
+Cypress.Commands.add('verifyInnerText', { prevSubject: true }, (subject, innerText) => {
+    cy.wrap(subject)
+        .should(($element) => {
+            expect($element.get(0).innerText).to.deep.eq(innerText);
+        });
+    return cy.wrap(subject);
+});
+
+Cypress.Commands.add('verifyPseudoClassBeforeProperty', { prevSubject: true }, (subject, property, value) => {
+    cy.wrap(subject)
+        .then(($element) => {
+            const win = $element[0].ownerDocument.defaultView
+            const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+            const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue(property)
+            expect(CSSStyleDeclarationValue).to.deep.eq(value);
+        });
+    return cy.wrap(subject);
+});
+
+Cypress.Commands.add('verifyUploadFilePreviewDownload', (fileName) => {
+    cy.window().document().then(function (doc) {
+        doc.addEventListener('click', () => {
+            setTimeout(function () { doc.location.reload() }, 5000);
+        });
+        uploadResponsePage.uploadedFileWrapper()
+            .eq(0)
+            .within(() => {
+                uploadResponsePage.uploadedFileLink()
+                    .click();
+            });
+        return cy.verifyDownload(fileName);
+    });
+});
+
+Cypress.Commands.add('verifyInnerHTML', { prevSubject: true }, (subject, innerHTML) => {
+    cy.wrap(subject)
+        .then(($element) => {
+            expect($element.get(0).innerHTML).to.deep.eq(innerHTML);
+        });
+    return cy.wrap(subject);
+});

package/cypress/support/helpers/localStorage.js

@@ -0,0 +1,13 @@
+const LOCAL_STORAGE_MEMORY = {};
+
+Cypress.Commands.add('saveLocalStorage', () => {
+    Object.keys(localStorage).forEach((key) => {
+        LOCAL_STORAGE_MEMORY[key] = localStorage[key];
+    });
+});
+
+Cypress.Commands.add('restoreLocalStorage', () => {
+    Object.keys(LOCAL_STORAGE_MEMORY).forEach((key) => {
+        localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
+    });
+});