getHTML

Get source code of specified DOM element by selector. By default, it automatically pierces through all shadow roots of elements contained by the element.

Usage

$(selector).getHTML({ includeSelectorTag, pierceShadowRoot, removeCommentNodes, prettify })

Parameters

Name	Type	Details
options	GetHTMLOptions	command options
options.includeSelectorTag optional	Boolean	if true it includes the selector element tag (default: true)
options.pierceShadowRoot optional	Boolean	if true it includes content of the shadow roots of all web components in the DOM
options.removeCommentNodes optional	Boolean	if true it removes all comment nodes from the HTML, e.g. <!--?lit$206212805$--><!--?lit$206212805$-->
options.prettify optional	Boolean	if true, the html output will be prettified

Examples

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>
    `)
});