7261c43f60
* Chore: Add move most types from rrweb to @rrweb/types package * Split off type imports * Split off type import to its own line * Get vite to generate type definitions * Apply formatting changes * noEmit not allowed in tsconfig, moved it to build step * Migrate rrdom-nodejs build to vite * Apply formatting changes * Migrate rrweb-snapshot to vite * Unify configs * Chore: Migrate rrdom to vite Turns out what we where doing by overwriting `public textContent: string | undefined` as a getter in a subclass is something that isn't allowed in typescript. Because we where using `// @ts-ignore` to hide this error our bundler chose to allow the overwrite. Vite choses to disallow the overwrite making all subclasses' `textContent` undefined. To mitigate this we're using an abstract class, which does allow sub classes to decide if they wan't to use getters or not. * Chore: Migrate rrweb to vite WIP * build:browser was removed (for now) * BREAKING: moved rrweb-plugin-console to its own npm module This removes console from rrweb-all.js * Support cjs files in startServer * Move canvas-webrtc plugin to its own package * Chore: move sequential-id plugin to its own package * Chore: Configure rrweb's vite bundling * `Id` had lowercase `d` before, making it lowercase again * Test: Move console tests to their own package * remove unused utils from rrdom * pull in latest version of master something when wrong earlier when resolving merge conflicts, this should be correct * Fix type casting issue in diff.ts * Fix typo * Fix duplicate entries in package.json and tsconfig.json * Apply formatting changes * Update dependencies in package.json files * Update dependencies to use Vite 5.2.8 in package.json files * Get tests passing for rrdom `apply virtual style rules to node` tests need to be moved to rrweb to avoid circular dependencies * Fix image loading issue in integration tests * Move pack/unpack to its own @rrweb/packer module * Get tests to work in rrdom-nodejs * Port tests in rrweb-snapshot to vitest and fix them * Fix tests for rrweb-plugin-console-record * Add @rrweb/all package * Fix publint and attw errors for rrdom and @rrweb/types * Use shared vitest.config.ts in rrweb-snapshot package * Fix publint and attw issues for rrweb-snapshot * Export `ReplayPlugin` type directly from rrweb * Fix publint and attw issues for packages * Fix publint & attw issue. I was bumping into this issue:3729bc2a3c/docs/problems/NoResolution.mdAnd had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here:1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects)The redirect method seemed the least invasive and most effective. * Fix publint & attw issue. I was bumping into this issue:3729bc2a3c/docs/problems/NoResolution.mdAnd had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here:1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects)The redirect method seemed the least invasive and most effective. * move some rrdom tests that require rrweb to rrweb package * Use pre-jest 29 syntax for snapshotting * get rrweb passing publint and attw * const enum does not work with isolated modules flag * Fix script tag type in webgl.test.ts.snap and update rrweb.umd.cjs path in webgl.test.ts * Fix paths * Move tests for console record plugin and fix bundle path * Fix tests for rrweb * pack integration tests were moved to @rrweb/all * Update rrweb bundle path in test files * Fix flaky scroll emit from test * Migrate rrweb's tests over to vitest and make them pass * Make sure benchmarks & updating tests work * Remove jest from rrweb * Fix paths * always use rrweb's own cssom * Update tsconfig.json for rrweb-plugin-sequential-id-record Fixes this error: Error: @rrweb/rrweb-plugin-sequential-id-record:prepublish: tsconfig.json(9,5): error TS6377: Cannot write file '/home/runner/work/rrweb/rrweb/tsconfig.tsbuildinfo' because it will overwrite '.tsbuildinfo' file generated by referenced project '/home/runner/work/rrweb/rrweb/packages/rrweb' * Add tsbuildinfo config to extended tsconfig files * Move rrdom over to vitest * Apply formatting changes * Update rrweb imports to use the new package structure * extend rrweb-snapshot's tsconfig from monorepo base config * extend @rrweb/types's tsconfig from monorepo base config * extend rrdom's tsconfig from monorepo base config * extend rrdom-nodejs's tsconfig from monorepo base config * extend web-extension's tsconfig from monorepo base config * unify tsconfigs * Continue when tests fail * Add stricter type checking * Add check-types global command * remove jest * Remove unused code * Add check-types command to build script * Fix linting issues * Add setup Chrome action for CI/CD workflow * Update puppeteer version in package.json for rrweb * Update Chrome setup in CI/CD workflow * Update Chrome setup in CI/CD workflow * Add Chrome setup and test cache location * Update CI/CD workflow to test chrome cache location * Add chrome installation step to CI/CD workflow * Update Puppeteer configuration for headless testing * Update dependencies and workflow configuration * Use same version of chrome on CI as is run locally * Use version of chrome that seems to work with rrdom tests * Try using puppeteerrc to define chrome version * Add .cache directory to .gitignore * Move global flag to vitest config * Update puppeteer version to 20.9.0 * Update console log messages in rrweb-plugin-console-record for new puppeteer version * Remove redundant Chrome setup from CI/CD workflow * Add minification and umd for all built files * Update import paths for rrweb dist files * Add @rrweb/replay and @rrweb/record * Add script to lint packages * Apply formatting changes * exclude styles export from typescript package type checking * WIP Move rrweb-player over to vite * Apply formatting changes * chore: Update rrweb plugin import paths * Remove rollup from rrweb-player * Fix typing issues * Fix typing issues * chore: Update rrweb-player to use vite for build process * Apply formatting changes * chore: Export Player class in rrweb-player/src/main.ts Makes attw happy * Apply formatting changes * Gets wiped by yarn workspaces-to-typescript-project-references * Add .eslintignore and .eslintrc.cjs files for rrweb-player package * Apply formatting changes * Update dependencies in rrweb-player/package.json * Apply formatting changes * chore: Update eslint configuration for rrweb-player package * Apply formatting changes * chore: Remove unused files from rrweb-player package * Apply formatting changes * chore: Update rrweb-player import path to use rrweb-player.cjs * chore: Update addEventListener signature in rrweb-player * Apply formatting changes * Add .eslintignore and update .gitignore files for to root * Apply formatting changes * Update documentation * Update @rrweb/types package description * Apply formatting changes * Update build and run commands in CONTRIBUTING.md * Apply formatting changes * Update package versions to 2.0.0-alpha.13 * Apply formatting changes * Apply formatting changes * Fix import statement in media/index.ts * Apply formatting changes * chore: Update .gitignore to exclude build and dist directories * Apply formatting changes * Apply formatting changes * Migrate setTimeout to vitest * Apply formatting changes * Apply formatting changes * Fix isNativeShadowDom function signature in utils.ts * try out jsr * Apply formatting changes * Update package versions to 2.0.0-alpha.14 * Apply formatting changes * Fix name of rrwebSnapshot object * Apply formatting changes * Remove unused lock files * Apply formatting changes * Update rrweb bundle path to use umd.cjs format * Apply formatting changes * Trigger tests to run again * Rename snapshots for vitest * Apply formatting changes * Ping CI * Apply formatting changes * Ping CI * Apply formatting changes * Ignore files generated by svelte-kit for prettier * Correct Player object
476 lines
15 KiB
TypeScript
476 lines
15 KiB
TypeScript
import * as fs from 'fs';
|
|
import * as path from 'path';
|
|
import * as http from 'http';
|
|
import * as url from 'url';
|
|
import * as puppeteer from 'puppeteer';
|
|
import { vi, assert, describe, it, beforeAll, afterAll, expect } from 'vitest';
|
|
import { waitForRAF, getServerURL } from './utils';
|
|
|
|
const htmlFolder = path.join(__dirname, 'html');
|
|
const htmls = fs.readdirSync(htmlFolder).map((filePath) => {
|
|
const raw = fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8');
|
|
return {
|
|
filePath,
|
|
src: raw,
|
|
};
|
|
});
|
|
|
|
interface IMimeType {
|
|
[key: string]: string;
|
|
}
|
|
|
|
const startServer = (defaultPort: number = 3030) =>
|
|
new Promise<http.Server>((resolve) => {
|
|
const mimeType: IMimeType = {
|
|
'.html': 'text/html',
|
|
'.js': 'text/javascript',
|
|
'.css': 'text/css',
|
|
'.png': 'image/png',
|
|
};
|
|
const s = http.createServer((req, res) => {
|
|
const parsedUrl = url.parse(req.url!);
|
|
const sanitizePath = path
|
|
.normalize(parsedUrl.pathname!)
|
|
.replace(/^(\.\.[\/\\])+/, '');
|
|
let pathname = path.join(__dirname, sanitizePath);
|
|
try {
|
|
const data = fs.readFileSync(pathname);
|
|
const ext = path.parse(pathname).ext;
|
|
res.setHeader('Content-type', mimeType[ext] || 'text/plain');
|
|
res.setHeader('Access-Control-Allow-Origin', '*');
|
|
res.setHeader('Access-Control-Allow-Methods', 'GET');
|
|
res.setHeader('Access-Control-Allow-Headers', 'Content-type');
|
|
res.end(data);
|
|
} catch (error) {
|
|
res.end();
|
|
}
|
|
});
|
|
s.listen(defaultPort)
|
|
.on('listening', () => {
|
|
resolve(s);
|
|
})
|
|
.on('error', (e) => {
|
|
s.listen().on('listening', () => {
|
|
resolve(s);
|
|
});
|
|
});
|
|
});
|
|
|
|
function sanitizeSnapshot(snapshot: string): string {
|
|
return snapshot.replace(/localhost:[0-9]+/g, 'localhost:3030');
|
|
}
|
|
|
|
function assertSnapshot(snapshot: string): void {
|
|
expect(sanitizeSnapshot(snapshot)).toMatchSnapshot();
|
|
}
|
|
|
|
interface ISuite {
|
|
server: http.Server;
|
|
serverURL: string;
|
|
browser: puppeteer.Browser;
|
|
code: string;
|
|
}
|
|
|
|
describe('integration tests', function (this: ISuite) {
|
|
vi.setConfig({ testTimeout: 30_000 });
|
|
let server: ISuite['server'];
|
|
let serverURL: ISuite['serverURL'];
|
|
let browser: ISuite['browser'];
|
|
let code: ISuite['code'];
|
|
|
|
beforeAll(async () => {
|
|
server = await startServer();
|
|
serverURL = getServerURL(server);
|
|
browser = await puppeteer.launch({
|
|
// headless: false,
|
|
});
|
|
|
|
code = fs.readFileSync(
|
|
path.resolve(__dirname, '../dist/rrweb-snapshot.umd.cjs'),
|
|
'utf-8',
|
|
);
|
|
});
|
|
|
|
afterAll(async () => {
|
|
await browser.close();
|
|
await server.close();
|
|
});
|
|
|
|
for (const html of htmls) {
|
|
if (html.filePath.substring(html.filePath.length - 1) === '~') {
|
|
continue;
|
|
}
|
|
const title = '[html file]: ' + html.filePath;
|
|
it(title, async () => {
|
|
const page: puppeteer.Page = await browser.newPage();
|
|
// console for debug
|
|
page.on('console', (msg) => console.log(msg.text()));
|
|
if (html.filePath === 'iframe.html') {
|
|
// loading directly is needed to ensure we don't trigger compatMode='BackCompat'
|
|
// which happens before setContent can be called
|
|
await page.goto(`${serverURL}/html/${html.filePath}`, {
|
|
waitUntil: 'load',
|
|
});
|
|
const outerCompatMode = await page.evaluate('document.compatMode');
|
|
const innerCompatMode = await page.evaluate(
|
|
'document.querySelector("iframe").contentDocument.compatMode',
|
|
);
|
|
assert(
|
|
outerCompatMode === 'CSS1Compat',
|
|
outerCompatMode +
|
|
' for outer iframe.html should be CSS1Compat as it has "<!DOCTYPE html>"',
|
|
);
|
|
// inner omits a doctype so gets rendered in backwards compat mode
|
|
// although this was originally accidental, we'll add a synthetic doctype to the rebuild to recreate this
|
|
assert(
|
|
innerCompatMode === 'BackCompat',
|
|
innerCompatMode +
|
|
' for iframe-inner.html should be BackCompat as it lacks "<!DOCTYPE html>"',
|
|
);
|
|
} else {
|
|
// loading indirectly is improtant for relative path testing
|
|
await page.goto(`${serverURL}/html`);
|
|
await page.setContent(html.src, {
|
|
waitUntil: 'load',
|
|
});
|
|
}
|
|
await waitForRAF(page);
|
|
const rebuildHtml = (
|
|
(await page.evaluate(`${code}
|
|
const x = new XMLSerializer();
|
|
const snap = rrwebSnapshot.snapshot(document);
|
|
let out = x.serializeToString(rrwebSnapshot.rebuild(snap, { doc: document }));
|
|
if (document.querySelector('html').getAttribute('xmlns') !== 'http://www.w3.org/1999/xhtml') {
|
|
// this is just an artefact of serializeToString
|
|
out = out.replace(' xmlns=\"http://www.w3.org/1999/xhtml\"', '');
|
|
}
|
|
out; // return
|
|
`)) as string
|
|
)
|
|
.replace(/\n\n/g, '')
|
|
.replace(
|
|
/blob:http:\/\/localhost:\d+\/[0-9a-z\-]+/,
|
|
'blob:http://localhost:xxxx/...',
|
|
);
|
|
|
|
assertSnapshot(rebuildHtml);
|
|
});
|
|
}
|
|
|
|
it('correctly triggers backCompat mode and rendering', async () => {
|
|
const page: puppeteer.Page = await browser.newPage();
|
|
// console for debug
|
|
page.on('console', (msg) => console.log(msg.text()));
|
|
|
|
await page.goto(`${serverURL}/html/compat-mode.html`, {
|
|
waitUntil: 'load',
|
|
});
|
|
const compatMode = await page.evaluate('document.compatMode');
|
|
assert(
|
|
compatMode === 'BackCompat',
|
|
compatMode +
|
|
' for compat-mode.html should be BackCompat as DOCTYPE is deliberately omitted',
|
|
);
|
|
const renderedHeight = (await page.evaluate(
|
|
'document.querySelector("center").clientHeight',
|
|
)) as number;
|
|
// can remove following assertion if dimensions of page change
|
|
assert(
|
|
renderedHeight < 400,
|
|
`pre-check: images will be rendered ~326px high in BackCompat mode, and ~588px in CSS1Compat mode; getting: ${renderedHeight}px`,
|
|
);
|
|
const rebuildRenderedHeight = await page.evaluate(`${code}
|
|
const snap = rrwebSnapshot.snapshot(document);
|
|
const iframe = document.createElement('iframe');
|
|
iframe.setAttribute('width', document.body.clientWidth)
|
|
iframe.setAttribute('height', document.body.clientHeight)
|
|
iframe.style.transform = 'scale(0.3)'; // mini-me
|
|
document.body.appendChild(iframe);
|
|
// magic here! rebuild in a new iframe
|
|
const rebuildNode = rrwebSnapshot.rebuild(snap, { doc: iframe.contentDocument })[0];
|
|
iframe.contentDocument.querySelector('center').clientHeight
|
|
`);
|
|
const rebuildCompatMode = await page.evaluate(
|
|
'document.querySelector("iframe").contentDocument.compatMode',
|
|
);
|
|
assert(
|
|
rebuildCompatMode === 'BackCompat',
|
|
"rebuilt compatMode should match source compatMode, but doesn't: " +
|
|
rebuildCompatMode,
|
|
);
|
|
assert(
|
|
rebuildRenderedHeight === renderedHeight,
|
|
'rebuilt height (${rebuildRenderedHeight}) should equal original height (${renderedHeight})',
|
|
);
|
|
});
|
|
|
|
it('correctly saves images offline', async () => {
|
|
const page: puppeteer.Page = await browser.newPage();
|
|
|
|
await page.goto(`${serverURL}/html/picture.html`, {
|
|
waitUntil: 'load',
|
|
});
|
|
await page.waitForSelector('img', { timeout: 1000 });
|
|
await page.evaluate(`${code}
|
|
var snapshot = rrwebSnapshot.snapshot(document, {
|
|
dataURLOptions: { type: "image/webp", quality: 0.8 },
|
|
inlineImages: true,
|
|
inlineStylesheet: false
|
|
})`);
|
|
// don't wait, as we want to ensure that the same-origin image can be inlined immediately
|
|
const bodyChildren = (await page.evaluate(`
|
|
snapshot.childNodes[0].childNodes[1].childNodes.filter((cn) => cn.type === 2);
|
|
`)) as any[];
|
|
expect(bodyChildren[1]).toEqual(
|
|
expect.objectContaining({
|
|
tagName: 'img',
|
|
attributes: {
|
|
src: expect.stringMatching(/images\/robot.png$/),
|
|
alt: 'This is a robot',
|
|
rr_dataURL: expect.stringMatching(/^data:image\/webp;base64,/),
|
|
},
|
|
}),
|
|
);
|
|
});
|
|
|
|
it('correctly saves cross-origin images offline', async () => {
|
|
const page: puppeteer.Page = await browser.newPage();
|
|
|
|
await page.goto('about:blank', {
|
|
waitUntil: 'load',
|
|
});
|
|
await page.setContent(
|
|
`
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<body>
|
|
<img src="${getServerURL(
|
|
server,
|
|
)}/images/rrweb-favicon-20x20.png" alt="CORS restricted but has access-control-allow-origin: *" />
|
|
</body>
|
|
</html>
|
|
`,
|
|
{
|
|
waitUntil: 'load',
|
|
},
|
|
);
|
|
|
|
await page.waitForSelector('img', { timeout: 1000 });
|
|
await page.evaluate(`${code}var snapshot = rrwebSnapshot.snapshot(document, {
|
|
dataURLOptions: { type: "image/webp", quality: 0.8 },
|
|
inlineImages: true,
|
|
inlineStylesheet: false
|
|
})`);
|
|
await waitForRAF(page); // need a small wait, as after the crossOrigin="anonymous" change, the snapshot triggers a reload of the image (after which, the snapshot is mutated)
|
|
const bodyChildren = (await page.evaluate(`
|
|
snapshot.childNodes[0].childNodes[1].childNodes.filter((cn) => cn.type === 2);
|
|
`)) as any[];
|
|
expect(bodyChildren[0]).toEqual(
|
|
expect.objectContaining({
|
|
tagName: 'img',
|
|
attributes: {
|
|
src: getServerURL(server) + '/images/rrweb-favicon-20x20.png',
|
|
alt: 'CORS restricted but has access-control-allow-origin: *',
|
|
rr_dataURL: expect.stringMatching(/^data:image\/webp;base64,/),
|
|
},
|
|
}),
|
|
);
|
|
});
|
|
|
|
it('correctly saves blob:images offline', async () => {
|
|
const page: puppeteer.Page = await browser.newPage();
|
|
|
|
await page.goto(`${serverURL}/html/picture-blob.html`, {
|
|
waitUntil: 'load',
|
|
});
|
|
await page.waitForSelector('img', { timeout: 1000 });
|
|
await page.evaluate(`${code}var snapshot = rrwebSnapshot.snapshot(document, {
|
|
dataURLOptions: { type: "image/webp", quality: 0.8 },
|
|
inlineImages: true,
|
|
inlineStylesheet: false
|
|
})`);
|
|
await waitForRAF(page);
|
|
const snapshot = (await page.evaluate(
|
|
'JSON.stringify(snapshot, null, 2);',
|
|
)) as string;
|
|
assert(snapshot.includes('"rr_dataURL"'));
|
|
assert(snapshot.includes('data:image/webp;base64,'));
|
|
});
|
|
|
|
it('correctly saves images in iframes offline', async () => {
|
|
const page: puppeteer.Page = await browser.newPage();
|
|
|
|
await page.goto(`${serverURL}/html/picture-in-frame.html`, {
|
|
waitUntil: 'load',
|
|
});
|
|
await page.waitForSelector('iframe', { timeout: 1000 });
|
|
await waitForRAF(page); // wait for page to render
|
|
await page.evaluate(`${code}
|
|
rrwebSnapshot.snapshot(document, {
|
|
dataURLOptions: { type: "image/webp", quality: 0.8 },
|
|
inlineImages: true,
|
|
inlineStylesheet: false,
|
|
onIframeLoad: function(iframe, sn) {
|
|
window.snapshot = sn;
|
|
}
|
|
})`);
|
|
await waitForRAF(page);
|
|
const snapshot = (await page.evaluate(
|
|
'JSON.stringify(window.snapshot, null, 2);',
|
|
)) as string;
|
|
assert(snapshot.includes('"rr_dataURL"'));
|
|
assert(snapshot.includes('data:image/webp;base64,'));
|
|
});
|
|
|
|
it('correctly saves blob:images in iframes offline', async () => {
|
|
const page: puppeteer.Page = await browser.newPage();
|
|
|
|
await page.goto(`${serverURL}/html/picture-blob-in-frame.html`, {
|
|
waitUntil: 'load',
|
|
});
|
|
await page.waitForSelector('iframe', { timeout: 1000 });
|
|
await waitForRAF(page); // wait for page to render
|
|
await page.evaluate(`${code}
|
|
rrwebSnapshot.snapshot(document, {
|
|
dataURLOptions: { type: "image/webp", quality: 0.8 },
|
|
inlineImages: true,
|
|
inlineStylesheet: false,
|
|
onIframeLoad: function(iframe, sn) {
|
|
window.snapshot = sn;
|
|
}
|
|
})`);
|
|
await waitForRAF(page);
|
|
const snapshot = (await page.evaluate(
|
|
'JSON.stringify(window.snapshot, null, 2);',
|
|
)) as string;
|
|
assert(snapshot.includes('"rr_dataURL"'));
|
|
assert(snapshot.includes('data:image/webp;base64,'));
|
|
});
|
|
|
|
it('should save background-clip: text; as the more compatible -webkit-background-clip: test;', async () => {
|
|
const page: puppeteer.Page = await browser.newPage();
|
|
await page.goto(`http://localhost:3030/html/background-clip-text.html`, {
|
|
waitUntil: 'load',
|
|
});
|
|
await waitForRAF(page); // wait for page to render
|
|
await page.evaluate(`${code}
|
|
window.snapshot = rrwebSnapshot.snapshot(document, {
|
|
inlineStylesheet: true,
|
|
})`);
|
|
await waitForRAF(page);
|
|
const snapshot = (await page.evaluate(
|
|
'JSON.stringify(window.snapshot, null, 2);',
|
|
)) as string;
|
|
assert(snapshot.includes('-webkit-background-clip: text;'));
|
|
});
|
|
|
|
it('images with inline onload should work', async () => {
|
|
const page: puppeteer.Page = await browser.newPage();
|
|
|
|
await page.goto(
|
|
'http://localhost:3030/html/picture-with-inline-onload.html',
|
|
{
|
|
waitUntil: 'load',
|
|
},
|
|
);
|
|
await page.waitForSelector('img', { timeout: 1000 });
|
|
await page.evaluate(`${code}`);
|
|
await page.evaluate(`
|
|
var snapshot = rrwebSnapshot.snapshot(document, {
|
|
dataURLOptions: { type: "image/webp", quality: 0.8 },
|
|
inlineImages: true,
|
|
inlineStylesheet: false
|
|
})`);
|
|
await waitForRAF(page);
|
|
const fnName = (await page.evaluate(
|
|
'document.querySelector("img").onload.name',
|
|
)) as string;
|
|
assert(fnName === 'onload');
|
|
});
|
|
});
|
|
|
|
describe('iframe integration tests', function (this: ISuite) {
|
|
vi.setConfig({ testTimeout: 30_000 });
|
|
let server: ISuite['server'];
|
|
let serverURL: ISuite['serverURL'];
|
|
let browser: ISuite['browser'];
|
|
let code: ISuite['code'];
|
|
|
|
beforeAll(async () => {
|
|
server = await startServer();
|
|
serverURL = getServerURL(server);
|
|
browser = await puppeteer.launch({
|
|
// headless: false,
|
|
});
|
|
|
|
code = fs.readFileSync(
|
|
path.resolve(__dirname, '../dist/rrweb-snapshot.umd.cjs'),
|
|
'utf-8',
|
|
);
|
|
});
|
|
|
|
afterAll(async () => {
|
|
await browser.close();
|
|
await server.close();
|
|
});
|
|
|
|
it('snapshot async iframes', async () => {
|
|
const page: puppeteer.Page = await browser.newPage();
|
|
// console for debug
|
|
page.on('console', (msg) => console.log(msg.text()));
|
|
await page.goto(`${serverURL}/iframe-html/main.html`, {
|
|
waitUntil: 'load',
|
|
});
|
|
const snapshotResult = JSON.stringify(
|
|
await page.evaluate(`${code};
|
|
rrwebSnapshot.snapshot(document);
|
|
`),
|
|
null,
|
|
2,
|
|
);
|
|
assertSnapshot(snapshotResult);
|
|
});
|
|
});
|
|
|
|
describe('shadow DOM integration tests', function (this: ISuite) {
|
|
vi.setConfig({ testTimeout: 30_000 });
|
|
let server: ISuite['server'];
|
|
let serverURL: ISuite['serverURL'];
|
|
let browser: ISuite['browser'];
|
|
let code: ISuite['code'];
|
|
|
|
beforeAll(async () => {
|
|
server = await startServer();
|
|
serverURL = getServerURL(server);
|
|
browser = await puppeteer.launch({
|
|
// headless: false,
|
|
});
|
|
|
|
code = fs.readFileSync(
|
|
path.resolve(__dirname, '../dist/rrweb-snapshot.umd.cjs'),
|
|
'utf-8',
|
|
);
|
|
});
|
|
|
|
afterAll(async () => {
|
|
await browser.close();
|
|
await server.close();
|
|
});
|
|
|
|
it('snapshot shadow DOM', async () => {
|
|
const page: puppeteer.Page = await browser.newPage();
|
|
// console for debug
|
|
page.on('console', (msg) => console.log(msg.text()));
|
|
await page.goto(`${serverURL}/html/shadow-dom.html`, {
|
|
waitUntil: 'load',
|
|
});
|
|
const snapshotResult = JSON.stringify(
|
|
await page.evaluate(`${code};
|
|
rrwebSnapshot.snapshot(document);
|
|
`),
|
|
null,
|
|
2,
|
|
);
|
|
assertSnapshot(snapshotResult);
|
|
});
|
|
});
|