99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
|
|
import type { CheerioAPI } from 'cheerio';
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* 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 {Promise} the HTML of the specified element (as a string)
|
||
|
|
* @uses action/selectorExecute
|
||
|
|
* @type property
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
export declare function getHTML(this: WebdriverIO.Element, options?: GetHTMLOptions): Promise<string>;
|
||
|
|
/**
|
||
|
|
* cleans up HTML based on command options
|
||
|
|
* @param $ Cheerio object with our virtual DOM
|
||
|
|
* @param options command options
|
||
|
|
* @returns a string with the cleaned up HTML
|
||
|
|
*/
|
||
|
|
export declare function sanitizeHTML($: CheerioAPI | string, options?: GetHTMLOptions): string;
|
||
|
|
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
|