# 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[​](#usage "Direct link to Usage")

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

## Parameters[​](#parameters "Direct link to Parameters")

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

## Examples[​](#examples "Direct link to 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>
    `)
});
```

## Returns[​](#returns "Direct link to Returns")

* **\<Promise>** **`return`:** the HTML of the specified element (as a string)