cumulocity-cypress/lib/commands/highlight.d.ts

Cypress commands for Cumulocity IoT

import { C8yHighlightOptions } from "../../shared/types";
declare global {
    namespace Cypress {
        interface Chainable {
            /**
             * Highlights one or multiple DOM elements with custom css styles.
             *
             * If multiple elements are selected, the union area of all elements is
             * highlighted and the style is applied to a container element added to
             * the common parent of all elements. If only a single element is selected,
             * the style is applied directly to the element.
             *
             * Pass an object with CSS styles to apply to the element(s) with the keys
             * being the CSS property names. Use options to customize the highlight
             * behavior. If the width or height options are provided, the highlight
             * area is calculated based on the union area of all elements with the
             * width and height options applied. If the clear option is true, existing
             * highlights will be cleared before highlighting.
             *
             * Default highlight style:
             * ```json
             * {
             *   "outline": "2px",
             *   "outline-style": "solid",
             *   "outline-offset": "-2px",
             *   "outline-color": "#FF9300",
             * }
             *
             * @example
             * cy.get('button').highlight();
             * cy.get('button').highlight({ border: '1px solid red' });
             *
             * @param {Object} style - The CSS styles to apply to the DOM element
             * @param {Object} options - The options to customize the highlight behavior
             */
            highlight(style?: any, options?: HighlightOptions): Chainable<JQuery<HTMLElement>>;
            /**
             * Clears all existing highlights to revert the DOM elements to their
             * original state. This command is useful to clean up the DOM after
             * highlighting elements and before possibly highlighting new elements.
             */
            clearHighlights(): Chainable<void>;
        }
    }
    interface HighlightOptions extends Omit<C8yHighlightOptions, "styles" | "border"> {
    }
}
interface UnionDOMRectOptions {
    padding?: Cypress.ScreenshotOptions["padding"];
}
/**
 * Calculates the union DOM rect of multiple elements within a common parent. If no
 * parent is provided, the viewport is used for the calculation. The options object
 * can be used to provide padding around the union rect.
 *
 * The union rect is the smallest rectangle that contains all elements.
 *
 * @param {JQuery<HTMLElement>} elements - The elements to calculate the union rect for
 * @param {HTMLElement} parent - The parent element to calculate the union rect within
 * @param {Object} options - The options to customize the union rect calculation
 */
export declare function getUnionDOMRect(elements: JQuery<HTMLElement>, parent?: HTMLElement | UnionDOMRectOptions, options?: UnionDOMRectOptions): DOMRectReadOnly;
/**
 * Finds the common parent element of multiple elements
 * @param {JQuery<HTMLElement>} elements - The elements to find the common parent for
 * @returns {HTMLElement} - The common parent element
 */
export declare function findCommonParent($elements: JQuery<HTMLElement>): HTMLElement | undefined;
export {};