@jahia/cypress 7.4.0 → 8.1.0

package/src/page-object/baseComponent.ts

@@ -4,12 +4,12 @@ import Chainer = Cypress.Chainer;
 export type ComponentType<Component> = { new(p: Chainable<JQuery>, assertion?: (s: JQuery) => void): Component, defaultSelector: string };
 
 export class BaseComponent {
-    static defaultSelector = ''
-    static count = 0
+    static defaultSelector = '';
+    static count = 0;
 
-    element: Chainable<JQuery>
-    id: number
-    assertion?: (s: JQuery) => void
+    element: Chainable<JQuery>;
+    id: number;
+    assertion?: (s: JQuery) => void;
 
     constructor(element: Chainable<JQuery>, assertion?: (s: JQuery) => void) {
         this.id = BaseComponent.count++;
@@ -27,5 +27,5 @@ export class BaseComponent {
 
     should: Chainer<JQuery> = (arg, ...others) => {
         return cy.get('@component' + this.id, {log: false}).should(arg, ...others);
-    }
+    };
 }

package/src/page-object/html/iframe.ts

@@ -2,9 +2,9 @@ import {BaseComponent} from '../baseComponent';
 import Chainable = Cypress.Chainable;
 
 export class IFrame extends BaseComponent {
-    static defaultSelector = 'iframe'
+    static defaultSelector = 'iframe';
 
-    private body: JQuery<HTMLElement>
+    private body: JQuery<HTMLElement>;
 
     constructor(element: Chainable<JQuery>, assertion?: (s: JQuery) => void) {
         super(element, assertion);
@@ -13,7 +13,7 @@ export class IFrame extends BaseComponent {
                 const fr: HTMLFrameElement = f[0] as HTMLFrameElement;
                 expect(fr.contentWindow.location.href).not.equals('about:blank');
                 expect(fr.contentWindow.document.readyState).equals('complete');
-                // eslint-disable-next-line  no-unused-expressions
+                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
                 expect(fr.contentDocument.body).not.be.empty;
             })
             .its('0.contentDocument.body').as('framebody' + this.id);

package/src/page-object/material/muiinput.ts

@@ -2,7 +2,7 @@ import {BaseComponent} from '../baseComponent';
 import TypeOptions = Cypress.TypeOptions;
 
 export class MUIInput extends BaseComponent {
-    static defaultSelector = 'div'
+    static defaultSelector = 'div';
 
     clear(): MUIInput {
         this.get().clear();

package/src/page-object/material/muiradio.ts

@@ -1,7 +1,7 @@
 import {BaseComponent} from '../baseComponent';
 
 export class MUIRadio extends BaseComponent {
-    static defaultSelector = 'label'
+    static defaultSelector = 'label';
 
     click(): MUIRadio {
         this.get().click();

package/src/page-object/moonstone/accordion.ts

@@ -2,7 +2,7 @@ import {BaseComponent} from '../baseComponent';
 import Chainable = Cypress.Chainable;
 
 export class Accordion extends BaseComponent {
-    static defaultSelector = '.moonstone-accordion'
+    static defaultSelector = '.moonstone-accordion';
 
     click(itemName: string): Accordion {
         this.get().find(`section.moonstone-accordionItem header[aria-controls="${itemName}"]`).click();

package/src/page-object/moonstone/button.ts

@@ -1,7 +1,7 @@
 import {BaseComponent} from '../baseComponent';
 
 export class Button extends BaseComponent {
-    static defaultSelector = '.moonstone-button'
+    static defaultSelector = '.moonstone-button';
 
     click(): Button {
         this.get().click();

package/src/page-object/moonstone/collapsible.ts

@@ -1,7 +1,7 @@
 import {BaseComponent} from '../baseComponent';
 
 export class Collapsible extends BaseComponent {
-    static defaultSelector = '.moonstone-collapsible'
+    static defaultSelector = '.moonstone-collapsible';
 
     collapse(): Collapsible {
         this.get().children('div').then($child => {

package/src/page-object/moonstone/dropdown.ts

@@ -3,7 +3,7 @@ import {Menu} from './menu';
 import {getComponent} from '../utils';
 
 export class Dropdown extends BaseComponent {
-    static defaultSelector = '.moonstone-dropdown_container'
+    static defaultSelector = '.moonstone-dropdown_container';
 
     select(item: string): Dropdown {
         this.get().click();

package/src/page-object/moonstone/menu.ts

@@ -3,7 +3,7 @@ import {getComponentByRole} from '../utils';
 import Chainable = Cypress.Chainable;
 
 export class Menu extends BaseComponent {
-    static defaultSelector = '.moonstone-menu:not(.moonstone-hidden)'
+    static defaultSelector = '.moonstone-menu:not(.moonstone-hidden)';
     static overlaySelector = '.moonstone-menu_overlay';
 
     submenu(item: string, menu: string): Menu {

package/src/page-object/moonstone/pagination.ts

@@ -4,7 +4,7 @@ import Chainable = Cypress.Chainable;
 import {getComponentByRole} from '../utils';
 
 export class Pagination extends BaseComponent {
-    static defaultSelector = '.moonstone-tablePagination'
+    static defaultSelector = '.moonstone-tablePagination';
 
     clickNextPage(): Pagination {
         getComponentByRole(Button, 'table-pagination-button-next-page', this).click();

package/src/page-object/moonstone/primaryNav.ts

@@ -2,7 +2,7 @@ import {BaseComponent} from '../baseComponent';
 import Chainable = Cypress.Chainable;
 
 export class PrimaryNav extends BaseComponent {
-    static defaultSelector = '.moonstone-primaryNav'
+    static defaultSelector = '.moonstone-primaryNav';
 
     click(itemName: string): void {
         this.get().find(`.moonstone-primaryNavItem[role="${itemName}"]`).click();

package/src/page-object/moonstone/secondaryNav.ts

@@ -1,5 +1,5 @@
 import {BaseComponent} from '../baseComponent';
 
 export class SecondaryNav extends BaseComponent {
-    static defaultSelector = '.moonstone-secondaryNav_wrapper'
+    static defaultSelector = '.moonstone-secondaryNav_wrapper';
 }

package/src/page-object/moonstone/table.ts

@@ -3,7 +3,7 @@ import {Menu} from './menu';
 import {getComponent, getComponentByContent, getComponentByIndex, getComponentBySelector} from '../utils';
 
 export class Table extends BaseComponent {
-    static defaultSelector = '.moonstone-Table'
+    static defaultSelector = '.moonstone-Table';
 
     getRows(assertion?: (s: JQuery) => void): TableRow {
         return getComponent(TableRow, this, assertion);
@@ -19,7 +19,7 @@ export class Table extends BaseComponent {
 }
 
 export class TableRow extends BaseComponent {
-    static defaultSelector = '.moonstone-TableBody .moonstone-TableRow'
+    static defaultSelector = '.moonstone-TableBody .moonstone-TableRow';
 
     contextMenu(): Menu {
         this.get().rightclick();

package/src/support/apollo/apollo.ts

@@ -4,7 +4,9 @@
 /// <reference types="cypress" />
 
 import {ApolloClient, ApolloQueryResult, FetchResult, MutationOptions, QueryOptions} from '@apollo/client/core';
+import {DocumentNode} from '@apollo/client/core';
 import gql from 'graphql-tag';
+import {FieldNode, getOperationAST, print} from 'graphql';
 
 declare global {
     namespace Cypress {
@@ -15,8 +17,8 @@ declare global {
     }
 }
 
-export type FileQueryOptions = Partial<QueryOptions> & { queryFile?: string }
-export type FileMutationOptions = Partial<MutationOptions> & { mutationFile?: string }
+export type FileQueryOptions = Partial<QueryOptions> & { queryFile?: string; sourcePackage?: string }
+export type FileMutationOptions = Partial<MutationOptions> & { mutationFile?: string; sourcePackage?: string }
 export type ApolloOptions = (QueryOptions | MutationOptions | FileQueryOptions | FileMutationOptions) & Partial<Cypress.Loggable>;
 
 function isQuery(options: ApolloOptions): options is QueryOptions {
@@ -31,51 +33,112 @@ function isMutationFile(options: ApolloOptions): options is FileMutationOptions
     return (<FileMutationOptions>options).mutationFile !== undefined;
 }
 
+function getOperationLabel(doc: DocumentNode, opType: 'Query' | 'Mutation'): string {
+    const opDef = getOperationAST(doc);
+    if (opDef?.name?.value) {
+        return `[${opType}] ${opDef.name.value}`;
+    }
+
+    // Anonymous operation: traverse up to 2 selection levels for a meaningful label
+    const firstSel = opDef?.selectionSet?.selections?.[0];
+    if (firstSel?.kind === 'Field') {
+        const firstName = (firstSel as FieldNode).name.value;
+        const secondSel = (firstSel as FieldNode).selectionSet?.selections?.[0];
+        if (secondSel?.kind === 'Field') {
+            return `[${opType}] ${firstName} › ${(secondSel as FieldNode).name.value}`;
+        }
+
+        return `[${opType}] ${firstName}`;
+    }
+
+    return `[${opType}]`;
+}
+
+function getQueryBody(doc: DocumentNode): string {
+    return doc?.loc?.source?.body ?? print(doc);
+}
+
 // eslint-disable-next-line default-param-last, @typescript-eslint/no-shadow
 export const apollo = function (apollo: ApolloClient<any> = this.currentApolloClient, options: ApolloOptions): void {
     let result : ApolloQueryResult<any> | FetchResult;
     let logger : Cypress.Log;
+    let duration: number;
     const optionsWithDefaultCache: ApolloOptions = {fetchPolicy: 'no-cache', ...options};
 
     if (!apollo) {
         cy.apolloClient().apollo(optionsWithDefaultCache);
     } else if (isQueryFile(optionsWithDefaultCache)) {
-        const {queryFile, ...apolloOptions} = optionsWithDefaultCache;
+        const {queryFile, sourcePackage, ...apolloOptions} = optionsWithDefaultCache as FileQueryOptions & Partial<Cypress.Loggable>;
         cy.fixture(queryFile).then(content => {
-            cy.apollo({query: gql(content), ...apolloOptions});
+            const fileLabel = sourcePackage ? `${queryFile} @ ${sourcePackage}` : queryFile;
+            cy.apollo({query: gql(content), ...apolloOptions, _sourceFile: fileLabel} as ApolloOptions);
         });
     } else if (isMutationFile(optionsWithDefaultCache)) {
-        const {mutationFile, ...apolloOptions} = optionsWithDefaultCache;
+        const {mutationFile, sourcePackage, ...apolloOptions} = optionsWithDefaultCache as FileMutationOptions & Partial<Cypress.Loggable>;
         cy.fixture(mutationFile).then(content => {
-            cy.apollo({mutation: gql(content), ...apolloOptions});
+            const fileLabel = sourcePackage ? `${mutationFile} @ ${sourcePackage}` : mutationFile;
+            cy.apollo({mutation: gql(content), ...apolloOptions, _sourceFile: fileLabel} as ApolloOptions);
         });
     } else {
         const {log = true, ...apolloOptions} = optionsWithDefaultCache;
+
+        const doc = isQuery(apolloOptions) ?
+            (apolloOptions as QueryOptions).query :
+            (apolloOptions as MutationOptions).mutation;
+        const opType = isQuery(apolloOptions) ? 'Query' : 'Mutation';
+        const operationLabel = getOperationLabel(doc, opType);
+        const queryBody = getQueryBody(doc);
+        const variables = (apolloOptions as any).variables;
+        const sourceLabel = (optionsWithDefaultCache as any)._sourceFile ? ` (${(optionsWithDefaultCache as any)._sourceFile})` : '';
+        const variablesLabel = variables && Object.keys(variables).length > 0 ?
+            ` — ${JSON.stringify(variables)}` :
+            '';
+
         if (log) {
             logger = Cypress.log({
                 autoEnd: false,
                 name: 'apollo',
                 displayName: 'apollo',
-                message: isQuery(apolloOptions) ? `Execute Graphql Query: ${apolloOptions.query.loc.source.body}` : `Execute Graphql Mutation: ${apolloOptions.mutation.loc.source.body}`,
+                message: `${operationLabel}${sourceLabel}${variablesLabel}`,
                 consoleProps: () => {
+                    const errors = (result as any)?.errors ?? (result as any)?.graphQLErrors ?? null;
+                    const isCaughtError = result instanceof Error;
+                    const hasErrors = (errors?.length > 0) || isCaughtError;
                     return {
-                        Options: apolloOptions,
+                        Operation: operationLabel,
+                        Variables: variables ?? {},
+                        [`${opType} Body`]: queryBody,
+                        Duration: duration === undefined ? 'pending' : `${duration}ms`,
+                        Status: hasErrors ?
+                            `error${isCaughtError ? `: ${(result as unknown as Error).message}` : ''}` :
+                            'success',
+                        Data: (result as any)?.data ?? null,
+                        Errors: errors,
                         Yielded: result
                     };
                 }
             });
         }
 
-        cy.wrap({}, {log: true})
+        const startTime = Date.now();
+        cy.wrap({}, {log: false})
             .then(() => (isQuery(optionsWithDefaultCache) ? apollo.query(optionsWithDefaultCache).catch(error => {
-                cy.log(`Caught Graphql Query Error: ${JSON.stringify(error)}`);
+                cy.log(`Caught GraphQL query error: ${(error as any)?.message ?? JSON.stringify(error)}`);
                 return error;
             }) : apollo.mutate(optionsWithDefaultCache).catch(error => {
-                cy.log(`Caught Graphql Mutation Error: ${JSON.stringify(error)}`);
+                cy.log(`Caught GraphQL mutation error: ${(error as any)?.message ?? JSON.stringify(error)}`);
                 return error;
             }))
                 .then(r => {
                     result = r;
+                    duration = Date.now() - startTime;
+                    if (logger) {
+                        const errors = (r as any)?.errors ?? (r as any)?.graphQLErrors;
+                        const hasErrors = (r instanceof Error) || (errors?.length > 0);
+                        const prefix = hasErrors ? '❌ ' : '✅ ';
+                        logger.set('message', `${prefix}${operationLabel}${sourceLabel}${variablesLabel}`);
+                    }
+
                     logger?.end();
                     return r;
                 })

package/src/support/apollo/links.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import {HttpLink} from '@apollo/client/link/http';
 import fetch from 'cross-fetch';
 import {setContext} from '@apollo/client/link/context';
@@ -7,7 +6,7 @@ interface ApolloRequestInit extends RequestInit {
     formData?: FormData
 }
 
-export const formDataHttpLink = (baseUrl: string, headers: unknown) => {
+export const formDataHttpLink = (baseUrl: string, headers: Record<string, string>) => {
     return new HttpLink({
         uri: `${baseUrl}/modules/graphql`,
         headers,

package/src/support/browserHelper.ts

@@ -0,0 +1,186 @@
+/*
+ * Contains helpers for printing or clearing browser's storage and cookies.
+ * These are intended for interactive debugging and log full values by design.
+ * Use with caution in automated tests to avoid exposing sensitive data in logs.
+ */
+
+/**
+ * Prints cookie details in a structured format for debugging.
+ *
+ * Note: This helper logs the full cookie value by design.
+ * @param {Cypress.Cookie} cookie Cookie object returned by Cypress.
+ * @returns {void}
+ * @private
+ */
+const printCookieValues = (cookie: Cypress.Cookie): void => {
+    const cookieType = cookie.expiry ? 'Persistent' : 'Session';
+    const expiryDate = cookie.expiry ? new Date(cookie.expiry * 1000).toISOString() : 'Session only';
+    const daysUntilExpiry = cookie.expiry ? Math.round(((cookie.expiry * 1000) - Date.now()) / 1000 / 60 / 60 / 24) : null;
+
+    cy.log('-'.repeat(60));
+    cy.log(`Cookie: ${cookie.name}`);
+    cy.log('-'.repeat(60));
+    cy.log(`Type:       ${cookieType}`);
+    cy.log(`Value:      ${cookie.value}`);
+    cy.log(`Domain:     ${cookie.domain}`);
+    cy.log(`Path:       ${cookie.path}`);
+    cy.log(`Secure:     ${cookie.secure ? '✔ Yes' : '✘ No'}`);
+    cy.log(`HttpOnly:   ${cookie.httpOnly ? '✔ Yes' : '✘ No'}`);
+    cy.log(`SameSite:   ${cookie.sameSite || '(not set)'}`);
+
+    if (cookie.expiry) {
+        cy.log(`Expires:    ${expiryDate}`);
+        cy.log(`Days left:  ${daysUntilExpiry} days`);
+        cy.log(`Unix time:  ${cookie.expiry}`);
+    } else {
+        cy.log('Expires:    When browser closes (session cookie)');
+    }
+};
+
+/**
+ * Clears cookies based on their persistence type.
+ * @param {'session'|'persistent'} [type='session'] Cookie category to clear.
+ * @returns {Cypress.Chainable<void>} Cypress chainable resolved when clearing is complete.
+ */
+const clearCookiesByType = (type: 'session' | 'persistent' = 'session'): Cypress.Chainable<void> => {
+    return cy.getCookies().then(cookies => {
+        const cookiesToClear = cookies.filter(cookie => (type === 'session' ? !cookie.expiry : Boolean(cookie.expiry)));
+
+        cy.step(`🗑️ CLEAR ${cookiesToClear.length} ${type} cookie(s):`, () => {
+            cookiesToClear.forEach(cookie => {
+                const info = cookie.expiry ? `expires ${new Date(cookie.expiry * 1000).toISOString()}` : 'session only';
+                cy.log(` ... clearing ${cookie.name} (${info})`);
+                cy.clearCookie(cookie.name);
+            });
+        });
+    }).then(() => undefined);
+};
+
+/**
+ * Logs all available cookies with metadata and values.
+ *
+ * Intended for interactive debugging when full cookie visibility is needed.
+ * @returns {Cypress.Chainable<void>} Cypress chainable resolved when logging is complete.
+ */
+const logCookies = (): Cypress.Chainable<void> => {
+    return cy.getCookies().then(cookies => {
+        if (cookies.length === 0) {
+            cy.log('No cookies found');
+            return;
+        }
+
+        cy.step(`COOKIES REPORT - Total: ${cookies.length}`, () => {
+            const sessionCookies = cookies.filter(c => !c.expiry);
+            const persistentCookies = cookies.filter(c => Boolean(c.expiry));
+
+            cy.log(`Session Cookies: ${sessionCookies.length}`);
+            cy.log(`Persistent Cookies: ${persistentCookies.length}`);
+
+            cookies.forEach(cookie => {
+                printCookieValues(cookie);
+            });
+        });
+    }).then(() => undefined);
+};
+
+/**
+ * Logs a specific cookie by name in a detailed format.
+ *
+ * Intended for interactive debugging when full cookie visibility is needed.
+ * @param {string} cookieName Name of the cookie to read and print.
+ * @returns {Cypress.Chainable<void>} Cypress chainable resolved when logging is complete.
+ */
+const logCookie = (cookieName: string): Cypress.Chainable<void> => {
+    return cy.getCookie(cookieName).then(cookie => {
+        if (!cookie) {
+            cy.log(`Cookie "${cookieName}" not found`);
+            return;
+        }
+
+        printCookieValues(cookie);
+    }).then(() => undefined);
+};
+
+/**
+ * Clears Session cookies
+ * @returns {Cypress.Chainable<void>} Cypress chainable resolved when logging is complete.
+ */
+const clearSessionCookies = (): Cypress.Chainable<void> => {
+    return clearCookiesByType('session').then(() => undefined);
+};
+
+/**
+ * Clears Persistent cookies
+ * @returns {Cypress.Chainable<void>} Cypress chainable resolved when logging is complete.
+ */
+const clearPersistentCookies = (): Cypress.Chainable<void> => {
+    return clearCookiesByType('persistent').then(() => undefined);
+};
+
+/**
+ * Simulates a browser close by clearing session storage and cookies.
+ * Persistent cookies are kept intentionally.
+ * @returns {void}
+ */
+const simulateClose = (): void => {
+    cy.log('Simulating browser close...');
+
+    // Clear session storage
+    cy.clearAllSessionStorage();
+
+    // Clear session cookies only
+    clearSessionCookies();
+
+    cy.log('Browser close simulated (session storage and cookies are cleared)');
+};
+
+/**
+ * Resets browser state by clearing all storages and all cookies.
+ * Use this when a test needs a fully clean client-side state.
+ * @returns {void}
+ */
+const resetState = (): void => {
+    cy.log('Reset browser state...');
+
+    // Clear all storage
+    cy.clearAllLocalStorage();
+    cy.clearAllSessionStorage();
+
+    // Clear all cookies
+    cy.clearAllCookies();
+
+    cy.log('Browser reset is done (all storages and cookies cleared)');
+};
+
+/**
+ * Logs all sessionStorage entries grouped by origin.
+ * Intended for interactive debugging and logs full values.
+ * @returns {Cypress.Chainable<void>} Cypress chainable resolved when logging is complete.
+ */
+const logSessionStorage = (): Cypress.Chainable<void> => {
+    return cy.getAllSessionStorage().then(session => {
+        cy.log(`sessionStorage: ${JSON.stringify(session)}`);
+    }).then(() => undefined);
+};
+
+/**
+ * Logs all localStorage entries grouped by origin.
+ * Intended for interactive debugging and logs full values.
+ * @returns {Cypress.Chainable<void>} Cypress chainable resolved when logging is complete.
+ */
+const logLocalStorage = (): Cypress.Chainable<void> => {
+    return cy.getAllLocalStorage().then(local => {
+        cy.log(`localStorage: ${JSON.stringify(local)}`);
+    }).then(() => undefined);
+};
+
+export const BrowserHelper = {
+    logCookies,
+    logCookie,
+    logSessionStorage,
+    logLocalStorage,
+    clearSessionCookies,
+    clearPersistentCookies,
+    simulateClose,
+    resetState
+};

package/src/support/index.ts

@@ -5,3 +5,6 @@ export * from './logout';
 export * from './repeatUntil';
 export * from './testStep';
 export * from './jsErrorsLogger';
+export * from './jfaker';
+export * from './browserHelper';
+export * from './modSince';