Skip to main content

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
NameTypeDetails
optionsGetHTMLOptionscommand options
options.includeSelectorTag
optional
Booleanif true it includes the selector element tag (default: true)
options.pierceShadowRoot
optional
Booleanif true it includes content of the shadow roots of all web components in the DOM
options.removeCommentNodes
optional
Booleanif true it removes all comment nodes from the HTML, e.g. <!--?lit$206212805$--><!--?lit$206212805$-->
options.prettify
optional
Booleanif 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>
`)
});

Welcome! How can I help?

WebdriverIO AI Copilot