Files
rrweb/packages/rrweb/test/replay/hover.test.ts
Justin Halsall 7d1a278688 Canvas recording: Preserve drawing buffer (#1273)
* Upgrade jest to 29 and puppeteer to 16 in rrweb

* Apply formatting changes

* Upgrade rrweb's puppeteer to v20

* Apply formatting changes

* Canvas: Reduce flickering and capturing of empty canvas elements

Turn on `preserveDrawingBuffer` by default for canvas FPS recording.
Has some negative performance implications, but really helps when capturing canvas.

* Apply formatting changes

* Include all test image snapshots in ci

* Apply formatting changes

* Allow more flexibility when capturing hover

* Apply formatting changes

* Create tiny-chairs-build.md

* Apply formatting changes

* Update hover.test.ts

* Apply formatting changes

* Document snapshotFormat jest config

* Freeze `yarn.lock` in ci for reproducible dependencies

* Apply formatting changes

* Apply formatting changes

* Revert to old style of puppeteer evaluation script notation

* Apply formatting changes

* Make test less flaky

* Apply formatting changes

* Apply formatting changes

* Make tests less flaky

* Apply formatting changes

* Make test more robust

* Apply formatting changes

* Apply formatting changes

* Add debugging code for test

* Apply formatting changes

* Also test not ignored input

* Apply formatting changes

* Apply formatting changes

* Apply formatting changes

* escape ignoreSelector

* Apply formatting changes

* Apply formatting changes
2026-04-01 12:00:00 +08:00

74 lines
1.8 KiB
TypeScript

import * as fs from 'fs';
import * as path from 'path';
import { launchPuppeteer, waitForRAF } from '../utils';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import type * as puppeteer from 'puppeteer';
import events from '../events/hover';
interface ISuite {
code: string;
styles: string;
browser: puppeteer.Browser;
page: puppeteer.Page;
}
expect.extend({ toMatchImageSnapshot });
describe('replayer', function () {
jest.setTimeout(10_000);
let code: ISuite['code'];
let styles: ISuite['styles'];
let browser: ISuite['browser'];
let page: ISuite['page'];
beforeAll(async () => {
browser = await launchPuppeteer({ devtools: true });
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.js');
const stylePath = path.resolve(
__dirname,
'../../src/replay/styles/style.css',
);
code = fs.readFileSync(bundlePath, 'utf8');
styles = fs.readFileSync(stylePath, 'utf8');
});
beforeEach(async () => {
page = await browser.newPage();
await page.goto('about:blank');
await page.addStyleTag({
content: styles,
});
await page.evaluate(code);
await page.evaluate(`let events = ${JSON.stringify(events)}`);
page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
});
afterEach(async () => {
await page.close();
});
afterAll(async () => {
await browser.close();
});
describe('hover', () => {
it('should trigger hover on mouseDown', async () => {
await page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.pause(110); // mouseDown event is at 100
`);
await waitForRAF(page);
const image = await page.screenshot();
expect(image).toMatchImageSnapshot({
failureThreshold: 40,
});
});
});
});