// Generated by dts-bundle-generator v7.2.0 import { CypressImageSnapshotOptions } from '@simonsmith/cypress-image-snapshot/types'; import { StringMatcher } from 'cypress/types/net-stubbing'; import { SinonStub } from 'cypress/types/sinon'; import { HTMLAttributes } from 'react'; import { StubbedInstance as GenericStubbedInstance } from 'ts-stubber'; export type SnapshotOptions = { index?: number; dataTestID?: string; } & CypressImageSnapshotOptions; declare class CypressHelperOptions { /** * default data attribute for elements selection */ defaultDataAttribute?: string; /** * slot dataTestID suffix (only relevant when handleSlotShadowDOM is set to true) */ shadowSlotSuffix?: string; /** * when set to true, cypress helper will automatically find the assigned dom element of elements with dataTestID * with `defaultShadowSlotSuffix` suffix */ handleSlotShadowDOM?: boolean; /** * when set to true, waits until elements are loaded before returning them */ waitForElementsToLoad?: boolean; /** * when set to true, injects Axe (A11y test tool) before all tests */ injectA11yChecker?: boolean; } declare class CypressHelper { private readonly options; /** * * @param [options = { * defaultDataAttribute : "data-cy" , * shadowSlotSuffix : "slot", * handleSlotShadowDOM : true}] */ constructor(options?: CypressHelperOptions); /** @private */ private isGetter; /** @private */ private isSetter; /** @private */ private waitUntilLoadBeforeInvocation; /** @private */ private getShadowSlotElement; /** @private */ private getShadowSlotParent; /** @private */ private shouldHandleShadowDomSlot; beforeAndAfter: () => void; /** * @property given - The given property will hold methods which will allow us to set pre-conditions before something takes place. * This is a classic place to have methods which will set the inputs which are going to be passed down to our component. */ given: { /** * Use interceptAndMockResponse to stub and intercept HTTP requests and responses. * @example * ```ts * // adds token to response header * helper.given.interceptAndMockResponse({ * url: '** /sysmgmt/2015/bmc/session', * response: { * headers:{ * 'XSRF-Token': 'token', * }, * }, * alias: 'login' * }) * ``` * @example * ```ts * // mocks response to login request * helper.given.interceptAndMockResponse({ * method: "POST", * url: "** /login", * alias: "login", * response : { * token: 'token' * } * }) * ``` * * @example * ```ts * // mocks network error * helper.given.interceptAndMockResponse({ * method: "POST", * url: "** /avamars", * alias: "avamar", * response : { * forceNetworkError: true * } * }) * ``` * @example * ```ts * // mocks missing image * helper.given.interceptAndMockResponse({ * method: "POST", * url: "** /image.png", * alias: "image", * response: { statusCode: 404 } * }) * ``` * @example * ```ts * // using a fixture * helper.given.interceptAndMockResponse({ * url: "** /shellygo/whatever**", * response: { fixture: "user.json" }, * alias: "whatever" * }); * ``` */ interceptAndMockResponse: (options: { url: StringMatcher; response?: Object; alias?: string; method?: string; }) => void; /** Use intercept() to intercept HTTP requests and responses * @example * ```ts * helper.given.intercept("/streets/sprite.png", "streetSprite"); * ``` */ intercept: (url: StringMatcher, alias: string, method?: string) => void; /** * Sets specific environment variable's value * @example * // Changing an environment variable * * ```ts * helper.given.env("password", "changeMe@1"); * ``` */ env: (key: string, value: any) => void; /** * Load a fixture * @param filename * @param alias * @example * ```ts * let { given, when, get } = new CypressHelper(); * it("should get fixture", () => { * given.fixture("user.json", "user"); * then(get.fixture("user")).shouldDeepNestedInclude({ * name: "Jane Doe", * id: "1234", * nested: { * attr1: "something", * attr2: "the other thing" * } * }); *}); * ``` */ fixture: (filename: string, alias: string) => Cypress.Chainable; /** * Creates a new object with the given functions as the prototype and stubs all implemented functions. * * @example * ```ts * const serviceMock = helper.given.stubbedInstance(Service); * ``` * @example * ```ts * class Service { * public func1() {...} * public get prop1() {...} * } * const serviceMock = helper.given.stubbedInstance(Service, {prop1: 3}); * ``` * @example * ```ts * helper.given.stubbedInstance(Router, { events: new Observable() }) * ``` * @example * ```ts * helper.given.stubbedInstance( * PokemonService, * { * pokemonTypes: new BehaviorSubject([]), * pokemons: new BehaviorSubject([]), * } * ) * ``` */ stubbedInstance: (constructor: new (...args: any[]) => T, overrides?: Partial) => GenericStubbedInstance> & T; /** * Creates a new object with the given functions as the prototype and stubs all functions. * * @example * ```ts * const serviceMock = helper.given.stubbedInterface("IService"); * ``` * @example * ```ts * interface IService { * propertyFunc: (int: number) => number * get prop1() : number * } * const serviceMock = helper.given.stubbedInterface("IService", {prop1: 3}); * ``` */ stubbedInterface: (interfaceName: string, overrides?: Partial) => GenericStubbedInstance> & T_1; /** * Replace a function, record its usage and control its behavior. * @example * ```ts * given.stub("alias"); * then(get.spy("alias")).shouldHaveBeenCalled(); * ``` */ stub: (alias?: string) => Cypress.Agent>; /** * Stub an object's method and create an alias for the stub * @param obj object containing function to stub * @param method function to stub * @example * ```ts * //stubbing a service method * helper.given.stubObjectMethod(serviceMock, "functionName").returns(3); * * //stubbing setters and getters * helper.given.stubObjectMethod(serviceMock, "count").get(() => 3).set(() => {}); * ``` */ stubObjectMethod: (obj: T_2, method: keyof T_2) => Cypress.Omit, "withArgs"> & Cypress.SinonSpyAgent> & SinonStub; /** * Returns a new spy function, and creates an alias for the newly created spy * @param name - spy name */ spy: (name: string) => Cypress.Omit, "withArgs"> & Cypress.SinonSpyAgent> & import("cypress/types/sinon").SinonSpy; /** * Spy on a method and create an alias for the spy * @param obj object containing function to spy on * @param method function to spy on * @example * ```ts * given.spyOnObject(window, "alert"); * alert("whatever"); * then(helper.get.spyFromFunction(window.alert)).shouldHaveBeenCalledWith("whatever"); * // Or * then(helper.get.spy("alert")).shouldHaveBeenCalledTimes(1); * ``` * @example * ```ts * given.spyOnObject(serviceMock, "functionName"); * serviceMock.functionName(); * then(helper.get.spyFromFunction(serviceMock.functionName)).shouldHaveBeenCalledTimes(1); * ``` */ spyOnObject: (obj: T_3, method: keyof T_3) => Cypress.Omit, "withArgs"> & Cypress.SinonSpyAgent> & import("cypress/types/sinon").SinonSpy; /** * * @param width * @param height * Set viewport to the given resolution. * * @example * * // Set viewport to 550px x 750px * given.viewport(550, 750) */ viewport: (width: number, height: number) => void; }; /** * @property when - The when property will hold methods of “events” which will take place like render, click, hover, etc. */ when: { /** * Visit a given url */ visit: (url: string) => void; /** * Wait for a number of milliseconds. */ wait: (ms: number) => Cypress.Chainable; /** * Wait for a specific request to complete. * @param alias */ waitForResponse: (alias: string) => Cypress.Chainable>; /** * Wait for multiples requests to complete. * @param alias */ waitForResponses: (alias: string, responses: number) => Cypress.Chainable[]>; /** * Wait for a last request to complete. */ waitForLastCall: (alias: string, timeout?: number) => Cypress.Chainable | undefined>; /** * Wait for something to happen in the DOM. * Note! you should not have any asserts in the callback function. From cypress-wait-until documentation: * you cannot put assertions inside checkFunction. There is no way to avoid a test failure if an assertion throws an error. * You must manually check what the assertions would check for you. * The most common case is checking that an element exists or not * @example * ```ts * helper.when.waitUntil(() => * helper.get.elementByTestId('element-test-id', index) * ); * ``` */ waitUntil: (checkFunction: () => ReturnType_1 | Cypress.Chainable | PromiseLike, options?: WaitUntilOptions) => Cypress.Chainable; /** * Fires native system click event. * * @example * ```ts * * helper.when.realClick('move-right') * ``` */ realClick: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Click a DOM element. * * @example * ```ts * * helper.when.click('move-right') * ``` */ click: (dataTestID: string, index?: number) => Cypress.Chainable>; /** Fires when your app calls the global window.alert() method. * The alert will be closed. */ closeAlert: () => Cypress.Cypress; /** * * Fires when your app calls the global window.confirm() method. * The confirmation will be accepted. */ acceptConfirm: () => import("eventemitter2").EventEmitter2 | import("eventemitter2").Listener; /** * * Fires when your app calls the global window.confirm() method. * The confirmation will be canceled. */ cancelConfirm: () => Cypress.Cypress; /** * * Fires when your app calls the global window.prompt() method. * The prompt will be cancelled. */ cancelPrompt: () => import("eventemitter2").EventEmitter2 | import("eventemitter2").Listener; /** * * Double-click a DOM element. */ dblclick: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Right click a DOM element. * @param dataTestID * @param [index] */ rightclick: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * overrides native global functions related to time * allowing them to be controlled synchronously via helper.when.tick() * This includes controlling: * setTimeout * clearTimeout * setInterval * clearInterval * Date Objects * The clock starts at the unix epoch (timestamp of 0). * This means that when you instantiate new Date in your application, it will have a time of January 1st, 1970. */ clock: () => Cypress.Chainable; /** * Fires native hover event. Yes, it can test :hover preprocessor. * @example * ```ts * helper.when.hover('consent-terms-agree') * ``` */ hover: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Move time after overriding a native time function with helper.when.clock(). * helper.when.clock() must be called before helper.when.tick() * @example * ```ts * helper.when.clock(); * helper.when.click('login-button'); * helper.when.tick(2000); * ``` */ tick: (ms: number) => Cypress.Chainable; /** * Focus on a DOM element. * @example * ```ts * helper.when.focus('credentials-password') * ``` */ focus: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Blur a focused element. * This element must currently be in focus. * If you want to ensure an element is focused before blurring, * try using helper.when.focus() before helper.when.blur(). */ blur: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Clear the value of an input or textarea */ clear: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Type into a DOM element, not including special characters * @example * ```ts * helper.when.type('credentials-password', 'new password') * ``` */ type: (dataTestID: string, keys: string, index?: number) => Cypress.Chainable>; /** * Type into a DOM element, including special characters * @example * ```ts * helper.when.typeSpecialChar('credentials-password', '{backspace}') * ``` */ typeSpecialCharacter: (dataTestID: string, keys: string, index?: number) => Cypress.Chainable>; /** * Runs a sequence of native press event (via cy.press) Type event is global. Make sure that it is not attached to any field. */ realType: (dataTestID: string, keys: string, index?: number) => Cypress.Chainable; /** * Scroll to the bottom. */ scrollToBottom: () => Cypress.Chainable; /** * Scroll to the top. */ scrollToTop: () => Cypress.Chainable; /** * Check checkbox(es) or radio(s). * This element must be an html input element with type checkbox or radio. */ check: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Uncheck checkbox(es). */ uncheck: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * * Toggle radio(s) by dataTestID * This element must be an html input element with type radio. */ toggleRadioBySelector: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * * Check radio(s). * This element must be an html input element with type radio. */ toggle: (index: number) => Cypress.Chainable>; /** * Select an option with specific text, value, or index within a select html element. * @example * ```html * * ``` * ```ts * helper.when.selectOption('fruit-selection', 0).should('have.value', '456') * helper.when.selectOption('fruit-selection', 'oranges').should('have.value', '457') * helper.when.selectOption('fruit-selection', 458).should('have.value', '458') * ``` */ selectOption: (dataTestID: string, option: string | number, index?: number) => Cypress.Chainable>; /** * Drag an element and drop it in target element * @example * ```ts * helper.when.dragAndDrop( * helper.get.elementByTestId('selected-item', 2), * helper.get.elementByTestId('available-items') * ) * ``` * @param element element to be dragged * @param targetElement target of drag operation */ dragAndDrop: (element: Cypress.Chainable>, targetElement: Cypress.Chainable>) => void; /** * Scopes the execution of a function within an element * @example * helper.when.within(() => when.click('button-test-id'), 'button-row', 2) * @deprecated The method should not be used anymore. Use helper.when.doWithin instead. */ within: (fn: () => void, dataTestID: string, index?: number) => Cypress.Chainable>; /** * Scopes the execution of a function within an element * @example * helper.when.doWithin(() => when.click('button-test-id'), 'button-row', 2) */ doWithin: (fn: () => void, dataTestID: string, index?: number) => Cypress.Chainable>; }; /** * @property get - The get property will hold methods which will give our tests access to the “output” of the component in a “black box” fashion */ get: { /** * Get one or more DOM elements by selector. * @example * Get an element with shape="filter-grid" * ```ts * * helper.get.bySelector("filter-grid", "shape") * ``` * @param selector * @param [attribute = defaultDataAttribute (default is "data-cy")] */ bySelector: (selector: string, attribute?: string) => Cypress.Chainable>; /** * Get one or more DOM elements by selector. * Same as bySelector * @example * Get an element with shape="filter-grid" * ```ts * * helper.get.elementBySelector("filter-grid", "shape") * ``` * @param selector * @param [attribute = defaultDataAttribute (default is "data-cy")] */ elementBySelector: (selector: string, attribute?: string, index?: number) => Cypress.Chainable>; /** * Get one or more DOM elements by attribute. * @example * Get an element with shape="filter-grid" * ```ts * * helper.get.byAttribute("shape", "filter-grid") * ``` * @param selector * @param attribute */ elementByAttribute: (attribute: string, selector: string, index?: number) => Cypress.Chainable>; /** * Get A DOM element at a specific index from elements. * @example * // Get the 3rd checkbox * ```ts * helper.get.nthBySelector("checkbox", 3, "type") * ``` * @param selector * @param [index] * @param [attribute= defaultDataAttribute (default is "data-cy")] */ nthBySelector: (selector: string, index?: number, attribute?: string) => Cypress.Chainable>; /** * Returns specific environment variable or undefined * @example * // Keeping password in cypress.config file * ```ts * e2e: { * env: { * password: "Changeme@1", * } * } * ``` * // using password during test * ```ts * helper.get.env("password"); * ``` */ env: (key: string) => any; /** * Get the current URL of the page that is currently active. * @returns {Cypress.Chainable} */ currentLocation: () => Cypress.Chainable; /** * Capture a snapshot and compare it to baseline snapshot * Run Cypress with --env updateSnapshots=true in order to update the base image files for all of your tests. * @param name * @param {string} [dataTestID] * @param {number} [index] * @param {CypressImageSnapshotOptions} [rest] * @example * ```ts * // capture entire window * get.imageSnapshot("homepage"); * ``` * @example * ```ts * // capture an element by DataTestId, with threshold * get.imageSnapshot("radio-group", { * dataTestID: "radio-group", * failureThreshold: 0.2 * }); * ``` */ imageSnapshot: (name: string, { dataTestID, index, ...rest }?: SnapshotOptions) => Cypress.Chainable; /** * Returns element's style attribute * @example * ```ts * get.elementsStyleAttribute("button-data-hook", "background-color") * ``` * @param dataTestID * @param attributeName * @param [index] * @returns {Cypress.Chainable} */ elementsStyleAttribute: (dataTestID: string, attributeName: string, index?: number) => Cypress.Chainable>; /** * Get element's property value * @example * ```ts * get.elementsProperty("image", "height") * ``` * @param dataTestID * @param propertyName * @param [index] * @returns */ elementsProperty: (dataTestID: string, propertyName: keyof JQuery, index?: number) => Cypress.Chainable; /** * Returns element's computed style, including pseudo elements * @example * ```ts * helper.get.elementsComputedStyle('element-test-id', 0, ':before') * ``` * * @returns {Cypress.Chainable} */ elementsComputedStyle: (dataTestID: string, index?: number, pseudoElement?: string) => Cypress.Chainable; /** * Returns a specific style of an element, including pseudo elements if specified. * @example * ```ts * helper.get.elementSpecificStyle('element-test-id', 'backgroundImage') * ``` * * ```ts * helper.get.elementSpecificStyle('element-test-id', 'backgroundImage', {index: 3, pseudoElement: ':before'}) * ``` * @param dataTestID * @param styleProperty * @param [index] * @param [pseudoElement] */ elementComputedStyleProperty: (dataTestID: string, styleProperty: keyof CSSStyleDeclaration, { index, pseudoElement }?: { index?: number | undefined; pseudoElement?: string | undefined; }) => Cypress.Chainable string) | ((property: string) => string) | ((index: number) => string) | ((property: string) => string) | ((property: string, value: string | null, priority?: string | undefined) => void) | null>; /** * @example * ```ts * then(helper.get.elementsText("parent-job-name", 3)).shouldInclude("Job 3 Name") * ``` * @param dataTestID * @param [index] * @returns {Cypress.Chainable} */ elementsText: (dataTestID: string, index?: number) => Cypress.Chainable; /** * Get value of input element * @example * ```ts * then(helper.get.inputValue('credentials-password')).shouldEqual("initial password"); * ``` * @param dataTestID * @param [index] * @returns { Cypress.Chainable } */ inputValue: (dataTestID: string, index?: number) => Cypress.Chainable; /** * Get A DOM element at a specific index from elements. * @example * ```ts * helper.when.dragAndDrop( * helper.get.elementByTestId('selected-item', 2), * helper.get.elementByTestId('available-items') * ``` * @param dataTestID * @param [index] */ elementByTestId: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Get the element currently focused in the document. * @returns {Cypress.Chainable>} */ focusedElement: () => Cypress.Chainable>; /** * Get one or more DOM elements by selector. The querying behavior of this command matches exactly how $(…) works in jQuery. * *** Note! Using this method may lead to flakey tests! You should use get.elementByTestId *** * @example * ```ts * get.element('.list>li', 3) // Yield the
  • 's in <.list> * get.element('ul li:first') * get.element('.dropdown-menu') * ``` * @param selector * @param [index] */ element: (selector: string, index?: number) => Cypress.Chainable>; /** * Get the DOM element containing the text. * DOM elements can contain more than the desired text and still match. * Additionally, Cypress prefers some DOM elements over the deepest element found. * *** Note! Using this method may lead to flakey tests! You should use get.elementByTestId *** * @example * ```ts * then(helper.get.elementByText("Avamar")).shouldExist(); * ``` * @param content * @param [index] */ elementByText: (content: string | RegExp, index?: number) => Cypress.Chainable> | Cypress.Chainable; /** * Get number of elements with a specific dataTestID * @example * ```ts * then(helper.get.numberOfElements("migrated-vcenter")).shouldEqual(2); * ``` * @param dataTestID * @returns {Cypress.Chainable} */ numberOfElements: (dataTestID: string) => Cypress.Chainable; /** * Get number of outgoing request with a specific alias * @example * ```ts * then(helper.get.numberOfCalls("fetch-pokemon")).shouldEqual(2); * ``` * @param alias * @returns {Cypress.Chainable} */ numberOfRequests: (alias: string) => Cypress.Chainable; /** * @example * ```ts * then(helper.get.elementsAttribute('avatar-picture', 'style')).shouldInclude('background-image: url("assets/avatar/def-user-male.png")') * ``` * @param dataTestID * @param attributeName * @param [index] * @returns {Cypress.Chainable} */ elementsAttribute: (dataTestID: string, attributeName: string, index?: number) => Cypress.Chainable; /** * Get fixture * @param alias * @example * ```ts * given.fixture("user.json", "user"); * then( * get.fixture("user").shouldDeepNestedInclude({ * name: "Jane Doe", * id: "1234", * nested: { * attr1: "something", * attr2: "the other thing" * } * }) * ); * ``` */ fixture: (alias: string) => Cypress.Chainable; /** * Get intercepted response's header * @param alias * @returns { Cypress.Chainable<{ [key: string]: string | string[]}>} */ responseHeader: (alias: string) => Cypress.Chainable<{ [key: string]: string | string[]; }>; /** * Get intercepted response's body * If a JSON Content-Type was used and the body was valid JSON, this will be an object. * If the body was binary content, this will be a buffer. * @param alias * @returns {Cypress.Chainable} */ responseBody: (alias: string) => Cypress.Chainable; /** * Get intercepted request's body * If a JSON Content-Type was used and the body was valid JSON, this will be an object. * If the body was binary content, this will be a buffer. * @param alias * @returns {Cypress.Chainable} */ requestBody: (alias: string) => Cypress.Chainable; /** * Get intercepted request's url * @param alias * @returns {Cypress.Chainable} */ requestUrl: (alias: string) => Cypress.Chainable; /** * Get intercepted request's header * @param alias * @returns { Cypress.Chainable<{ [key: string]: string | string[]}>} */ requestHeader: (alias: string) => Cypress.Chainable<{ [key: string]: string | string[]; }>; /** * Get intercepted request's query param * @param alias * @param queryParam * @returns { Cypress.Chainable<{[k: string]: string;}>} */ requestQueryParams: (alias: string) => Cypress.Chainable<{ [k: string]: string; }>; /** * Get spy by alias * @param name * @returns */ spy: (name: string) => Cypress.Chainable>; /** * Get spy by function name alias * @param func * @returns */ spyFromFunction: (func: Function) => Cypress.Chainable>; /** * Get stub by alias * @param name * @returns */ stub: (name: string) => Cypress.Chainable>; /** * Get stub as Cypress.Chainable * @example * ```ts * const serviceMock : Service = helper.given.stubbedInstance(Service); * helper.get.assertableStub(serviceMock.function).should('have.been.called')); * ``` * @deprecated The method should not be used anymore, use `then` instead * ```ts * then(serviceMock.function).shouldHaveBeenCalled(); * ``` */ assertableStub: (stub: any) => Cypress.Chainable>; /** Get the window object of the page that is currently active. * @returns {Cypress.Chainable} * @example * ```ts * helper.get.window().then((win) => { win.localStorage.getItem("key")} * ``` */ window: () => Cypress.Chainable; }; } export interface IRenderer { render: () => void; } export declare class BaseTestDriver { /** * @private */ protected children: string; /** * @private */ protected helper: CypressHelper; /** * @private */ protected renderer: IRenderer; /** * @private */ private _props; /** * @private */ private framework; /** * @private */ private propsHandler; /** * @private */ protected props: Partial & HTMLAttributes; /** * @private */ protected _given: { children: (value: string) => string; renderer: (value: IRenderer) => void; }; /** * @private */ protected _get: { children: () => string; props: () => Partial; cssPixel2Number: (value: string) => number; elementByText: (text: string, index?: number) => Cypress.Chainable> | Cypress.Chainable; waitUntil: (condition: () => boolean) => Cypress.Chainable; }; /** * @private */ protected _when: { render: () => void; }; } export {};