playwright-dom-snapshots
v0.1.0
Published
DOM snapshotting matchers & utilities for playwright
Downloads
2
Readme
playwright-dom-snapshots
DOM snapshotting matchers & utilities for playwright
Install
$ npm install playwright-dom-snapshots -D
Usage
Import this package from your playwright.config.mjs
file, the matchers will automatically be added.
// playwright.config.mjs
import "playwright-dom-snapshots";
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
// ...
};
You can also access just the HTML utilities by importing them from playwright-dom-snapshots/html
import { cleanHTML, getHTML } from "playwright-dom-snapshots/html";
API
Matchers
.toMatchHTMLSnapshot(locator, [{ deep : true, name }])
Use this matcher to compare a playwright locator against a saved snapshot.
By passing { deep : false }
as the second param you can limit the comparison to just the node the locator matches, excluding its children and helping to keep your snapshot smaller.
The name
option will be passed to the underlying .toMatchSnapshot()
playwright matcher in case you want to provide a custom filename for the match.
.toMatchHTMLDiffSnapshot(first, second, [{ name }])
Use this matcher to compare two strings against each other using jest-diff
, then compare the result against a saved snapshot.
The name
option will be passed to the underlying .toMatchSnapshot()
playwright matcher in case you want to provide a custom filename for the match.
HTML Utilities
async getHTML(locator, [{ deep : true }])
Gets the contents of the locator, runs them through cleanHTML()
, and returns a promise that resolves to the result.
If you set deep : false
instead of returning the HTML for the matching element and it's chilren the result will be the HTML for just the element itself.
cleanHTML(html)
Returns a trimmed-up and reformatted version of the input HTML. Uses diffable-html
to format.