174 lines
14 KiB
JavaScript
174 lines
14 KiB
JavaScript
import assert from 'node:assert/strict';
|
|
import fs from 'node:fs/promises';
|
|
import path from 'node:path';
|
|
import { pathToFileURL } from 'node:url';
|
|
import { createHash } from 'node:crypto';
|
|
import { chromium } from 'playwright';
|
|
import { describePage } from './browser-worker.mjs';
|
|
|
|
// Compare against an explicitly saved pre-change evaluate function, never a
|
|
// production/RPC switch. All fixtures are synthetic and network is blocked.
|
|
const baselinePath = process.argv[2];
|
|
assert.ok(baselinePath, 'Pass the saved baseline module path');
|
|
const { describeBaseline } = await import(pathToFileURL(path.resolve(baselinePath)).href);
|
|
const runDirectory = path.resolve('.tmp', `observation-cache-${Date.now()}`);
|
|
await fs.mkdir(runDirectory, { recursive: true });
|
|
const report = { browser: process.platform === 'win32' ? 'msedge' : 'chromium', real_platform_requests: 0,
|
|
baseline_sha256: createHash('sha256').update(await fs.readFile(path.resolve(baselinePath))).digest('hex'), comparisons: [], performance: [] };
|
|
const browser = await chromium.launch({ headless: true, ...(process.platform === 'win32' ? { channel: 'msedge' } : {}) });
|
|
try {
|
|
const page = await browser.newPage({ viewport: { width: 1120, height: 760 } });
|
|
await page.route('**/*', route => route.abort());
|
|
const cards = Array.from({ length: 230 }, (_, index) => `<article id="comment-${index + 1}" class="card"><div class="author"><a class="name" href="#author-${index}">Author ${index}</a></div><div class="content"><span>Question ${index}</span><p>Ordinary renovation sample ${index}</p><div class="nested"><span>Nested ${index}</span></div></div><time datetime="2026-10-25">Today</time></article>`).join('');
|
|
await page.setContent(`<!doctype html><title>Observation equivalence</title><style>
|
|
body{margin:0;font:16px/1.5 sans-serif}*{box-sizing:border-box}header{height:90px;padding:12px}
|
|
#controls{height:65px;padding:8px}#scroller{height:380px;width:700px;overflow:auto;border:2px solid #aaa}
|
|
.card{height:165px;padding:8px;border-bottom:1px solid #ddd}.content{padding-left:20px}.nested{padding-left:12px}
|
|
#clipped{height:55px;width:180px;overflow:hidden}#clipped p{height:100px}#offscreen{margin-top:1200px}
|
|
#overlay{position:fixed;z-index:99;left:0;top:155px;width:700px;height:210px;background:#eee}
|
|
.hidden{display:none}#opacity{opacity:0}#concealed{visibility:hidden}
|
|
</style><header><h1>Fixture</h1><div id="controls"><form id="search-form" action="/search" method="get"><label for="search-field">Search</label><input id="search-field" type="search" name="keyword" placeholder="Search notes"><button type="submit">Search</button></form><button data-testid="refresh">Refresh</button></div></header>
|
|
<main id="main"><section id="scroller">${cards}</section><section id="clipped"><p id="clipped-text">Clipped ordinary text</p><p id="clipped-away">Clipped away content</p></section>
|
|
<section id="ordinary"><h2>Ordinary heading</h2><p id="mutable">Fresh text</p><p id="phone-leaf">Contact 13800138000</p><div id="hidden-parent" class="hidden"><span id="hidden-child">Hidden content</span></div><p id="opacity">Transparent content</p><p id="concealed">Concealed content</p></section>
|
|
<section id="sensitive-ancestor" aria-label="verification code"><span id="sensitive-child">SENSITIVE_ANCESTOR</span></section><form id="private-form"><label>Password<input id="private-field" type="password" value="fixture-private"></label><p id="private-text">SENSITIVE_FORM</p></form>
|
|
<div id="offscreen"><p>Offscreen retained loaded text</p></div><div id="overlay">Visible overlay</div>
|
|
</main>`);
|
|
await page.evaluate(() => {
|
|
const costs = () => ({ computed_style: 0, bounding_rect: 0, query_selector: 0, query_selector_all: 0, element_from_point: 0 });
|
|
window.observationCosts = costs();
|
|
window.resetObservationCosts = () => { window.observationCosts = costs(); };
|
|
const wrap = (owner, name, cost) => {
|
|
const original = owner[name];
|
|
owner[name] = function (...args) { window.observationCosts[cost] += 1; return original.apply(this, args); };
|
|
};
|
|
wrap(window, 'getComputedStyle', 'computed_style');
|
|
wrap(Element.prototype, 'getBoundingClientRect', 'bounding_rect');
|
|
for (const owner of [Document.prototype, Element.prototype]) {
|
|
wrap(owner, 'querySelector', 'query_selector');
|
|
wrap(owner, 'querySelectorAll', 'query_selector_all');
|
|
}
|
|
wrap(Document.prototype, 'elementFromPoint', 'element_from_point');
|
|
});
|
|
async function sample(read, request) {
|
|
await page.evaluate(() => window.resetObservationCosts());
|
|
const started = performance.now();
|
|
const value = await read(page, request);
|
|
const duration_ms = performance.now() - started;
|
|
return { value, duration_ms, costs: await page.evaluate(() => window.observationCosts) };
|
|
}
|
|
async function compare(name, mutate, request = null) {
|
|
if (mutate) await page.evaluate(mutate);
|
|
const baseline = await sample(describeBaseline, request), optimized = await sample(describePage, request);
|
|
assert.deepEqual(optimized.value, baseline.value, name);
|
|
report.comparisons.push({ name, exact: true, elements: optimized.value.elements.length, ...(optimized.value.masks ? { masks: optimized.value.masks.length } : {}) });
|
|
return { baseline, optimized };
|
|
}
|
|
const initial = await compare('initial full observation with overlay, clipping, sensitive subtrees and output caps');
|
|
assert.ok(!initial.optimized.value.text.includes('SENSITIVE_ANCESTOR'));
|
|
assert.ok(!initial.optimized.value.text.includes('SENSITIVE_FORM'));
|
|
assert.ok(!initial.optimized.value.text.includes('13800138000'));
|
|
assert.ok(initial.optimized.value.masks.includes('#phone-leaf'));
|
|
assert.ok(initial.optimized.value.elements.length <= 120);
|
|
assert.equal(initial.optimized.value.viewport.scroll_y, 0);
|
|
await compare('canonical metadata', null, { selector: '#search-field', requireCanonical: true });
|
|
await compare('collection metadata', null, { selector: '#scroller a.name', collection: true });
|
|
await compare('noncanonical metadata rejected', null, { selector: 'input[type=search]', requireCanonical: true });
|
|
await compare('sensitive metadata rejected', null, { selector: '#sensitive-child' });
|
|
await compare('bounded metadata rejects more than 500 nodes', () => {
|
|
const root = document.createElement('div'); root.id = 'many';
|
|
root.innerHTML = '<i class="many-node">X</i>'.repeat(501); document.body.append(root);
|
|
}, { selector: '.many-node', collection: true });
|
|
await compare('remove large fixture and overlay; text and source attributes change', () => {
|
|
document.querySelector('#many').remove(); document.querySelector('#overlay').remove();
|
|
document.querySelector('#mutable').textContent = 'Changed source after previous call';
|
|
document.querySelector('#search-field').setAttribute('placeholder', 'Find content');
|
|
document.querySelector('#search-field').setAttribute('name', 'query');
|
|
});
|
|
await compare('scroll root changes viewport and current scroll metadata', () => { document.querySelector('#scroller').scrollTop = 630; });
|
|
const scrolled = await compare('metadata refreshed after root scroll', null, { selector: '#scroller', requireCanonical: true });
|
|
assert.equal(scrolled.optimized.value.elements[0].scroll_y.scroll_top, 630);
|
|
await compare('window scroll changes clipping', () => window.scrollTo(0, 460));
|
|
await compare('style changes are not cached across calls', () => {
|
|
window.scrollTo(0, 0);
|
|
document.querySelector('#hidden-parent').classList.remove('hidden');
|
|
document.querySelector('#opacity').style.opacity = '1';
|
|
document.querySelector('#concealed').style.visibility = 'visible';
|
|
document.querySelector('#ordinary').style.visibility = 'collapse';
|
|
document.querySelector('#scroller').style.height = '240px';
|
|
});
|
|
await compare('ancestor sensitivity changes are not cached across calls', () => {
|
|
document.querySelector('#ordinary').style.visibility = 'visible';
|
|
document.querySelector('#sensitive-ancestor').setAttribute('aria-label', 'Ordinary section');
|
|
document.querySelector('#private-field').setAttribute('type', 'text');
|
|
document.querySelector('#private-form label').firstChild.textContent = 'Ordinary';
|
|
document.querySelector('#private-form').id = 'ordinary-form';
|
|
document.querySelector('#private-text').textContent = 'Now ordinary form';
|
|
});
|
|
await compare('new private field causes current form exclusion', () => {
|
|
const form = document.querySelector('#ordinary-form');
|
|
const field = document.createElement('input'); field.autocomplete = 'one-time-code'; form.append(field);
|
|
});
|
|
await compare('disabled field and changed sensitive field label', () => {
|
|
document.querySelector('#search-field').disabled = true;
|
|
document.querySelector('#search-field').setAttribute('aria-label', 'verification code');
|
|
});
|
|
await compare('delete and recreate nodes with same IDs and different geometry', () => {
|
|
document.querySelector('#scroller').remove();
|
|
const section = document.createElement('section'); section.id = 'scroller'; section.style.height = '300px';
|
|
section.innerHTML = '<article id="comment-999" class="card"><a class="name" href="#new">New author</a><div class="content">New source</div></article>';
|
|
document.querySelector('#main').prepend(section);
|
|
});
|
|
await compare('metadata refreshed after node replacement', null, { selector: '#scroller', requireCanonical: true });
|
|
const duplicate = await compare('duplicate target metadata preserves ambiguity', () => {
|
|
const other = document.querySelector('#scroller').cloneNode(true); document.querySelector('#main').append(other);
|
|
}, { selector: '#scroller', requireCanonical: true });
|
|
assert.equal(duplicate.optimized.value.elements[0].unique, false);
|
|
assert.equal(duplicate.optimized.value.elements[0].count, 2);
|
|
await page.evaluate(async () => {
|
|
document.body.innerHTML = '<main id="media-root"><h1>Media observation</h1><p>Ordinary image and video</p><div class="body-media"><img id="content-image" width="100" height="60"><video id="content-video" width="100" height="60"></video></div><div class="avatar"><img id="avatar-image" width="30" height="30"></div><div style="display:none"><img id="hidden-image" width="30" height="30"></div></main>';
|
|
const pixel = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
|
|
const images = [...document.images];
|
|
await Promise.all(images.map(image => new Promise(resolve => { image.onload = image.onerror = resolve; image.src = pixel; })));
|
|
window.scrollTo(0, 0);
|
|
});
|
|
const media = await compare('media hints preserve loaded state, avatar exclusion and hidden media exclusion');
|
|
const hints = media.optimized.value.elements.find(element => element.selector === '#media-root').read_hints;
|
|
assert.ok(hints.some(hint => hint.selector === '#content-image' && hint.media_kind === 'image' && hint.loaded === true));
|
|
assert.ok(hints.some(hint => hint.selector === '#content-video' && hint.media_kind === 'video' && hint.loaded === false));
|
|
assert.ok(!hints.some(hint => hint.selector === '#avatar-image' || hint.selector === '#hidden-image'));
|
|
const long = await compare('raw walk reuse preserves normalization and per-root text truncation', () => {
|
|
document.body.innerHTML = '<main id="long-root"><section id="long-child"><p id="long-text"></p><p id="long-tail">Tail must be truncated only at the outer root</p></section></main>';
|
|
document.querySelector('#long-text').textContent = ' \n Leading whitespace\t' + '中文 Long text '.repeat(1600) + ' 13800138000';
|
|
});
|
|
assert.equal(long.optimized.value.text.length, 16000);
|
|
assert.ok(long.optimized.value.text.startsWith('Leading whitespace 中文 Long text'));
|
|
const limited = await compare('candidate/control/read limits and order remain identical in a dense visible page', () => {
|
|
document.body.innerHTML = '<main id="dense-root" style="display:grid;grid-template-columns:repeat(15,65px);grid-auto-rows:18px;font-size:10px;line-height:12px"></main>';
|
|
const root = document.querySelector('#dense-root');
|
|
root.innerHTML = Array.from({ length: 130 }, (_, index) => `<div id="dense-${index}">Read ${index}</div>`).join('') +
|
|
Array.from({ length: 40 }, (_, index) => `<button id="button-${index}">Button ${index}</button>`).join('') +
|
|
Array.from({ length: 25 }, (_, index) => `<input id="field-${index}" type="search" aria-label="Search ${index}">`).join('');
|
|
});
|
|
assert.ok(limited.optimized.value.elements.length <= 120);
|
|
assert.equal(limited.optimized.value.elements.filter(element => !element.collection && element.kind === 'fill').length, 16);
|
|
assert.equal(limited.optimized.value.elements.filter(element => !element.collection && element.tag === 'button').length, 24);
|
|
assert.equal(limited.optimized.value.elements.filter(element => !element.collection && element.kind === 'read').length, 48);
|
|
|
|
// Measure deterministic DOM work on the large unmodified fixture as well as
|
|
// elapsed time. Elapsed time is reported, never used as a flaky pass threshold.
|
|
report.performance.push({ name: 'initial_large_fixture', baseline_ms: initial.baseline.duration_ms, optimized_ms: initial.optimized.duration_ms,
|
|
baseline_costs: initial.baseline.costs, optimized_costs: initial.optimized.costs });
|
|
for (const name of ['computed_style', 'bounding_rect', 'element_from_point']) {
|
|
assert.ok(initial.optimized.costs[name] < initial.baseline.costs[name], `${name} must reuse current-call observations`);
|
|
}
|
|
assert.equal(initial.optimized.costs.query_selector_all, initial.baseline.costs.query_selector_all, 'Candidate discovery queries are unchanged');
|
|
report.status = 'passed';
|
|
} catch (error) {
|
|
report.status = 'failed'; report.error = { name: error.name, message: error.message.slice(0, 2000) };
|
|
throw error;
|
|
} finally {
|
|
await browser.close();
|
|
await fs.writeFile(path.join(runDirectory, 'report.json'), JSON.stringify(report, null, 2) + '\n');
|
|
console.log(JSON.stringify({ report: path.join(runDirectory, 'report.json'), status: report.status, comparisons: report.comparisons.length, real_platform_requests: 0 }));
|
|
}
|