webdriverio/build/commands/element/getHTML.d.ts

Next-gen browser and mobile automation test framework for Node.js

/**
 *
 * Get source code of specified DOM element by selector. By default, it automatically
 * pierces through all shadow roots of elements contained by the element.
 *
 * <example>
    :index.html
    <div id="test">
        <span>Lorem ipsum dolor amet</span>
    </div>
    :getHTML.js
    it('should get html for certain elements', async () => {
        var outerHTML = await $('#test').getHTML();
        console.log(outerHTML);
        // outputs:
        // "<div id="test"><span>Lorem ipsum dolor amet</span></div>"

        var innerHTML = await $('#test').getHTML({ includeSelectorTag: false });
        console.log(innerHTML);
        // outputs:
        // "<span>Lorem ipsum dolor amet</span>"
    });
    :getHTMLShadow.js
    it('allows to snapshot shadow dom', async () => {
        await browser.url('https://ionicframework.com/docs/usage/v8/button/basic/demo.html?ionic:mode=md')

        // get snapshot of web component without its styles
        const snapshot = await $('ion-button').getHTML({ excludeElements: ['style'] })

        // assert snapshot
        await expect(snapshot).toMatchInlineSnapshot(`
            <ion-button class="md button button-solid ion-activatable ion-focusable hydrated">Default
                <template shadowrootmode="open">
                    <button type="button" class="button-native" part="native">
                    <span class="button-inner">
                        <slot name="icon-only"></slot>
                        <slot name="start"></slot>
                        <slot></slot>
                        <slot name="end"></slot>
                    </span>
                    <ion-ripple-effect role="presentation" class="md hydrated">
                        <template shadowrootmode="open"></template>
                    </ion-ripple-effect>
                    </button>
                </template>
            </ion-button>
        `)
    });
 * </example>
 *
 * @alias element.getHTML
 * @param {GetHTMLOptions} options                    command options
 * @param {Boolean=}       options.includeSelectorTag if true it includes the selector element tag (default: `true`)
 * @param {Boolean=}       options.pierceShadowRoot   if true it includes content of the shadow roots of all web components in the DOM (default: `true`)
 * @param {Boolean=}       options.removeCommentNodes if true it removes all comment nodes from the HTML, e.g. `<!--?lit$206212805$--><!--?lit$206212805$-->` (default: `true`)
 * @param {Boolean=}       options.prettify           if true, the html output will be prettified (default: `true`)
 * @return {String}  the HTML of the specified element
 * @uses action/selectorExecute
 * @type property
 *
 */
export declare function getHTML(this: WebdriverIO.Element, options?: GetHTMLOptions): Promise<any>;
export interface GetHTMLOptions {
    /**
     * if true, it includes the selector element tag (default: true)
     * @default true
     */
    includeSelectorTag?: boolean;
    /**
     * if true, it includes content of the shadow roots of all web
     * components in the DOM (default: true if WebDriver Bidi is enabled)
     * @default true
     */
    pierceShadowRoot?: boolean;
    /**
     * if true, it removes all comment nodes from the HTML, e.g. `<!--?lit$206212805$--><!--?lit$206212805$-->`
     * @default true
     */
    removeCommentNodes?: boolean;
    /**
     * if true, the html output will be prettified
     * @default true
     */
    prettify?: boolean;
    /**
     * remove certain elements from the output, e.g. style tags or svg elements
     * @default []
     */
    excludeElements?: string[];
}
//# sourceMappingURL=getHTML.d.ts.map