Work on multiple slides
This commit is contained in:
parent
c447c11bc2
commit
87b0111915
127
index.js
127
index.js
|
@ -231,65 +231,90 @@ async function main() {
|
||||||
await page.setViewport(size);
|
await page.setViewport(size);
|
||||||
await page.goto('file://' + path);
|
await page.goto('file://' + path);
|
||||||
|
|
||||||
// Only consider the first slide (#\\331 === #1, which is the id of the first slide)
|
let output = [];
|
||||||
// We don't take into account the other slides because it will mess up with our screenshot varification
|
|
||||||
let root = await page.$('#\\31');
|
|
||||||
|
|
||||||
// If there is no slide, try to run on HTML body
|
for (let pageIndex = 1;; pageIndex++) {
|
||||||
if (root === null) {
|
|
||||||
error('not a marp HTML file');
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide slides controls
|
let root = await page.$('#\\3' + pageIndex);
|
||||||
await page.evaluate(() => {
|
if (root === null) {
|
||||||
for (let elt of document.getElementsByClassName('bespoke-marp-osc')) {
|
break;
|
||||||
elt.style.visibility = "hidden";
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
// Take a first screenshot
|
info("analysing slide " + pageIndex);
|
||||||
await page.screenshot({path: (outputDir === null ? __dirname : outputDir) + '/' + 'screenshot1.png'});
|
|
||||||
|
// Hide slides controls
|
||||||
|
await page.evaluate(() => {
|
||||||
|
for (let elt of document.getElementsByClassName('bespoke-marp-osc')) {
|
||||||
|
elt.style.visibility = "hidden";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Take a first screenshot
|
||||||
|
await page.screenshot({path: (outputDir === null ? __dirname : outputDir) + '/' + 'screenshot1.png'});
|
||||||
|
|
||||||
|
// Edit the page to shrink elements in order to get better bounding boxes
|
||||||
|
if (shrinkBoxes) {
|
||||||
|
info("shrinking bounding boxes");
|
||||||
|
await addSpan(root);
|
||||||
|
info("boundingboxes shrunk");
|
||||||
|
eprintln();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Take another screenshot and check the modification we made didn't change the layout of the page
|
||||||
|
await page.screenshot({path: (outputDir === null ? __dirname : outputDir) + '/' + 'screenshot2.png'});
|
||||||
|
|
||||||
|
// Compare both screenshots
|
||||||
|
let file1 = await fs.readFile(__dirname + '/' + 'screenshot1.png');
|
||||||
|
let file2 = await fs.readFile(__dirname + '/' + 'screenshot2.png');
|
||||||
|
let filesAreSame = file1.map((x, i) => x === file2[i]).reduce((a, b) => a && b, true);
|
||||||
|
|
||||||
|
if (!filesAreSame) {
|
||||||
|
// Check psnr
|
||||||
|
let psnr = await image.psnr(__dirname + '/' + 'screenshot1.png', __dirname + '/' + 'screenshot2.png');
|
||||||
|
|
||||||
|
// Crash if they're different
|
||||||
|
if (psnr > 70) {
|
||||||
|
warning(filename + " produced slight diff: psnr = " + psnr);
|
||||||
|
} else {
|
||||||
|
await error("page edit changed the layout: psnr = " + psnr);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Analyse the root and output the result
|
||||||
|
info("performing analysis");
|
||||||
|
let analyse = await analyseElement(root, page, outputDir, threshold);
|
||||||
|
info("analysis done");
|
||||||
|
|
||||||
|
// Append the current slide to the output
|
||||||
|
if (flatten) {
|
||||||
|
|
||||||
|
analyse = flattenTree(analyse);
|
||||||
|
for (let elt of anaylse) {
|
||||||
|
output.push(elt);
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
output.push(analyse);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Go to the next page
|
||||||
|
await page.evaluate(el => {
|
||||||
|
let buttons = document.getElementsByTagName('button');
|
||||||
|
for (let button of buttons) {
|
||||||
|
if (button.title === "Next slide") {
|
||||||
|
button.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Edit the page to shrink elements in order to get better bounding boxes
|
|
||||||
if (shrinkBoxes) {
|
|
||||||
info("shrinking bounding boxes");
|
|
||||||
await addSpan(root);
|
|
||||||
info("boundingboxes shrunk");
|
|
||||||
eprintln();
|
eprintln();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Take another screenshot and check the modification we made didn't change the layout of the page
|
info("saving output");
|
||||||
await page.screenshot({path: (outputDir === null ? __dirname : outputDir) + '/' + 'screenshot2.png'});
|
let json = JSON.stringify(output, undefined, 4);
|
||||||
|
|
||||||
// Compare both screenshots
|
|
||||||
let file1 = await fs.readFile(__dirname + '/' + 'screenshot1.png');
|
|
||||||
let file2 = await fs.readFile(__dirname + '/' + 'screenshot2.png');
|
|
||||||
let filesAreSame = file1.map((x, i) => x === file2[i]).reduce((a, b) => a && b, true);
|
|
||||||
|
|
||||||
if (!filesAreSame) {
|
|
||||||
// Check psnr
|
|
||||||
let psnr = await image.psnr(__dirname + '/' + 'screenshot1.png', __dirname + '/' + 'screenshot2.png');
|
|
||||||
|
|
||||||
// Crash if they're different
|
|
||||||
if (psnr > 70) {
|
|
||||||
warning(filename + " produced slight diff: psnr = " + psnr);
|
|
||||||
} else {
|
|
||||||
await error("page edit changed the layout: psnr = " + psnr);
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Analyse the root and output the result
|
|
||||||
info("performing analysis");
|
|
||||||
let analyse = await analyseElement(root, page, outputDir, threshold);
|
|
||||||
info("analysis done");
|
|
||||||
|
|
||||||
if (flatten) {
|
|
||||||
analyse = flattenTree(analyse);
|
|
||||||
}
|
|
||||||
|
|
||||||
let json = JSON.stringify(analyse, undefined, 4);
|
|
||||||
if (outputDir === null) {
|
if (outputDir === null) {
|
||||||
console.log(json);
|
console.log(json);
|
||||||
} else {
|
} else {
|
||||||
|
|
Loading…
Reference in New Issue