getHTML

Obtener el código fuente del elemento DOM especificado por el selector. Por defecto, atraviesa automáticamente todas las raíces de sombra (shadow roots) de los elementos contenidos por el elemento.

Uso

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

Parámetros

Nombre	Tipo	Detalles
options	GetHTMLOptions	opciones del comando
options.includeSelectorTag opcional	Boolean	si es true incluye la etiqueta del elemento selector (por defecto: true)
options.pierceShadowRoot opcional	Boolean	si es true incluye el contenido de las raíces de sombra de todos los componentes web en el DOM (por defecto: true)
options.removeCommentNodes opcional	Boolean	si es true elimina todos los nodos de comentarios del HTML, por ejemplo, <!--?lit$206212805$--><!--?lit$206212805$--> (por defecto: true)
options.prettify opcional	Boolean	si es true, la salida html será embellecida (por defecto: true)

Ejemplos

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

Devuelve

• <String> return: el HTML del elemento especificado