From 825f3aa2dd1adb19c2861c4f2a06f7d518856c82 Mon Sep 17 00:00:00 2001 From: Jamie Blair Date: Tue, 19 Nov 2024 12:35:29 +0000 Subject: [PATCH 1/5] feat: screenshots of modals added to curric automate script --- .../__snapshots__/helpers.test.ts.snap | 68 ++++ scripts/dev/curriculum/_commands/compare.ts | 268 ++++++-------- scripts/dev/curriculum/_commands/config.ts | 51 +++ .../dev/curriculum/_commands/helpers.test.ts | 23 ++ scripts/dev/curriculum/_commands/helpers.ts | 238 ++++++++++++ .../dev/curriculum/_commands/screenshot.ts | 342 +++++++----------- scripts/dev/curriculum/automate | 11 +- 7 files changed, 639 insertions(+), 362 deletions(-) create mode 100644 scripts/dev/curriculum/_commands/__snapshots__/helpers.test.ts.snap create mode 100644 scripts/dev/curriculum/_commands/config.ts create mode 100644 scripts/dev/curriculum/_commands/helpers.test.ts create mode 100644 scripts/dev/curriculum/_commands/helpers.ts diff --git a/scripts/dev/curriculum/_commands/__snapshots__/helpers.test.ts.snap b/scripts/dev/curriculum/_commands/__snapshots__/helpers.test.ts.snap new file mode 100644 index 0000000000..2d11f858db --- /dev/null +++ b/scripts/dev/curriculum/_commands/__snapshots__/helpers.test.ts.snap @@ -0,0 +1,68 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`wrapHtmlLayout wraps content with layout 1`] = ` +" + + + +
+

Hello world

+
+ + + " +`; diff --git a/scripts/dev/curriculum/_commands/compare.ts b/scripts/dev/curriculum/_commands/compare.ts index e127969922..6268d3116d 100644 --- a/scripts/dev/curriculum/_commands/compare.ts +++ b/scripts/dev/curriculum/_commands/compare.ts @@ -1,172 +1,132 @@ import { writeFile } from "fs/promises"; -import { basename, join, relative } from "path"; +import { join } from "path"; -import { glob } from "glob"; import { sortBy, uniq } from "lodash"; import open from "open"; -// function formatPath(input: string) { -// return `./${input}`; -// } - -const removeFileExtension = (filename: string) => - filename.substring(0, filename.lastIndexOf(".")) || filename; - -function outputPathFromLabel(label: string) { - const labelName = label.replace(/^:/, ""); - return `${process.cwd()}/scripts/dev/curriculum/output/screenshots/${labelName}/`; -} +import { + readJson, + resolveInputPath, + wrapHtmlLayout, + removeFileExtension, + renderComparison, + ScreenshotResult, + ScreenshotPageResult, + ScreenshotModalResult, +} from "./helpers"; export default async function compare( basepathInput: string, targetpathInput: string, ) { - const basepath = basepathInput.startsWith(":") - ? outputPathFromLabel(basepathInput) - : basepathInput; - const targetpath = targetpathInput.startsWith(":") - ? outputPathFromLabel(targetpathInput) - : targetpathInput; - const baseFiles = await glob(`${basepath}/*.png`); - const targetFiles = await glob(`${targetpath}/*.png`); + const basepath = resolveInputPath(basepathInput); + const targetpath = resolveInputPath(targetpathInput); + + const baseJson: ScreenshotResult = await readJson( + join(basepath, "index.json"), + ); + const targetJson: ScreenshotResult = await readJson( + join(targetpath, "index.json"), + ); + + const includesModals = baseJson.includesModals ?? targetJson.includesModals; const outbasePath = process.cwd() + "/scripts/dev/curriculum/output/"; - const relBasepath = relative(outbasePath, basepath); - const relTargetpath = relative(outbasePath, targetpath); - const baseFilesStub = baseFiles.map((f) => basename(f)); - const targetFilesStub = targetFiles.map((f) => basename(f)); - const allFiles = sortBy(uniq([...baseFilesStub, ...targetFilesStub])); - const html = ` - - -
-
-
- ${allFiles - .map((filename) => { - return `
${removeFileExtension( - filename, - )}
`; - }) - .join("")} -
-
-
- ${allFiles - .map((filename) => { - let imageHtml = ` - -
- ${basepathInput} ${filename} -
-
- ${targetpathInput} ${filename} -
-
- diff ${filename} -
- `; - if (baseFilesStub.includes(filename)) { - imageHtml += `
`; - } else { - imageHtml += `
Missing
`; - } - if (targetFilesStub.includes(filename)) { - imageHtml += `
`; - } else { - imageHtml += `
Missing
`; - } + const baseJsonBySlug: Record = {}; + const targetJsonBySlug: Record = {}; + for (const obj of baseJson.pages) { + baseJsonBySlug[obj.slug] = obj; + } + for (const obj of targetJson.pages) { + targetJsonBySlug[obj.slug] = obj; + } + + const allSlugs = sortBy( + uniq([...Object.keys(baseJsonBySlug), ...Object.keys(targetJsonBySlug)]), + ); + + if (includesModals) { + for (const slug of allSlugs) { + const baseModalJsonBySlug: Record = {}; + const targetModalJsonBySlug: Record = {}; + for (const obj of baseJsonBySlug[slug]!.modals) { + baseModalJsonBySlug[obj.slug] = obj; + } + for (const obj of targetJsonBySlug[slug]!.modals) { + targetModalJsonBySlug[obj.slug] = obj; + } + + const modalSlugs = sortBy( + uniq([ + ...Object.keys(baseModalJsonBySlug), + ...Object.keys(targetModalJsonBySlug), + ]), + ); + + const html = wrapHtmlLayout(` +
+ ${modalSlugs + .map((modalSlug) => { + return renderComparison( + basepathInput, + targetpathInput, + baseModalJsonBySlug[modalSlug]!, + targetModalJsonBySlug[modalSlug]!, + ); + }) + .join("")} +
+ `); + await writeFile(outbasePath + `/${slug}.html`, html); + } + } - if ( - baseFilesStub.includes(filename) && - targetFilesStub.includes(filename) - ) { - imageHtml += `
- -
-
`; - } else { - imageHtml += `
Missing
`; - } + const html = wrapHtmlLayout(` +
+
+ ${allSlugs + .map((slug) => { + return `
+ ${removeFileExtension(slug)} + ${includesModals ? ` — modals↗` : ""} +
`; + }) + .join("")} +
+
+
+ ${allSlugs + .map((slug) => { + return renderComparison( + basepathInput, + targetpathInput, + baseJsonBySlug[slug]!, + targetJsonBySlug[slug]!, + ); + }) + .join("")} +
+ `); - return imageHtml; - }) - .join("")} -
-
- - `; const outpath = join(outbasePath, `compare.html`); await writeFile(outpath, html); console.log(`📄 written to: ${outpath}`); diff --git a/scripts/dev/curriculum/_commands/config.ts b/scripts/dev/curriculum/_commands/config.ts new file mode 100644 index 0000000000..54c80cc089 --- /dev/null +++ b/scripts/dev/curriculum/_commands/config.ts @@ -0,0 +1,51 @@ +export const CURRIC_SLUGS = [ + "art-primary", + "art-secondary", + "citizenship-secondary-core", + "citizenship-secondary-gcse", + "computing-primary", + "computing-secondary-core", + "computing-secondary-aqa", + "computing-secondary-ocr", + "cooking-nutrition-primary", + "cooking-nutrition-secondary", + "design-technology-primary", + "design-technology-secondary", + "english-primary", + "english-secondary-aqa", + "english-secondary-edexcel", + "english-secondary-eduqas", + "french-primary", + "french-secondary-aqa", + "french-secondary-edexcel", + "geography-primary", + "geography-secondary-aqa", + "geography-secondary-edexcelb", + "german-secondary-aqa", + "german-secondary-edexcel", + "history-primary", + "history-secondary-aqa", + "history-secondary-edexcel", + "maths-primary", + "maths-secondary", + "music-primary", + "music-secondary-edexcel", + "music-secondary-eduqas", + "music-secondary-ocr", + "physical-education-primary", + "physical-education-secondary-core", + "physical-education-secondary-aqa", + "physical-education-secondary-edexcel", + "physical-education-secondary-ocr", + "religious-education-primary", + "religious-education-secondary-gcse", + "science-primary", + "science-secondary-aqa", + "science-secondary-edexcel", + "science-secondary-ocr", + "spanish-primary", + "spanish-secondary-aqa", + "spanish-secondary-edexcel", +]; + +export const BASE_PATH = `${process.cwd()}/scripts/dev/curriculum/output`; diff --git a/scripts/dev/curriculum/_commands/helpers.test.ts b/scripts/dev/curriculum/_commands/helpers.test.ts new file mode 100644 index 0000000000..fb45eb7ba3 --- /dev/null +++ b/scripts/dev/curriculum/_commands/helpers.test.ts @@ -0,0 +1,23 @@ +import { resolveInputPath, wrapHtmlLayout } from "./helpers"; + +describe("wrapHtmlLayout", () => { + it("wraps content with layout", () => { + expect(wrapHtmlLayout("

Hello world

")).toMatchSnapshot(); + }); +}); + +describe("outputPathFromLabel", () => { + it("should work with valid label", () => { + expect(resolveInputPath(":foo")).toEqual( + `${process.cwd()}/scripts/dev/curriculum/output/screenshots/foo/`, + ); + expect(resolveInputPath(":foo")).toEqual( + `${process.cwd()}/scripts/dev/curriculum/output/screenshots/foo/`, + ); + }); + + it("should work with path", () => { + expect(resolveInputPath("/foo/bar/")).toEqual(`/foo/bar/`); + expect(resolveInputPath("/bar/baz/")).toEqual(`/bar/baz/`); + }); +}); diff --git a/scripts/dev/curriculum/_commands/helpers.ts b/scripts/dev/curriculum/_commands/helpers.ts new file mode 100644 index 0000000000..e090492644 --- /dev/null +++ b/scripts/dev/curriculum/_commands/helpers.ts @@ -0,0 +1,238 @@ +import { readFile, unlink } from "fs/promises"; + +import { Page } from "puppeteer"; +import sharp from "sharp"; + +import { BASE_PATH } from "./config"; + +export type ScreenshotModalResult = { + slug: string; + screenshot: string; +}; + +export type ScreenshotPageResult = { + slug: string; + screenshot: string; + modals: ScreenshotModalResult[]; +}; + +export type ScreenshotResult = { + pages: ScreenshotPageResult[]; + includesModals: boolean; +}; + +export function wrapHtmlLayout(content: string) { + return ` + + + +
+ ${content} +
+ + + `; +} + +export function resolveInputPath(input: string) { + if (input.startsWith(":")) { + const labelName = input.replace(/^:/, ""); + return `${BASE_PATH}/screenshots/${labelName}/`; + } else { + return input; + } +} + +export async function readJson(filepath: string) { + return JSON.parse((await readFile(filepath)).toString()); +} + +export function removeFileExtension(filename: string) { + return filename.substring(0, filename.lastIndexOf(".")) || filename; +} + +type Comparison = { + slug: string; + screenshot: string; +}; +export function renderComparison( + baseLabel: string, + targetLabel: string, + before: Comparison | null, + after: Comparison | null, +) { + if (!before || !after) { + throw new Error("Missing"); + } + const slug = before?.slug ?? after?.slug; + + let imageHtml = ` + +
+ ${baseLabel} ${slug} +
+
+ ${targetLabel} ${slug} +
+
+ diff ${slug} +
+ `; + if (before?.screenshot) { + imageHtml += `
`; + } else { + imageHtml += `
Missing
`; + } + if (after?.screenshot) { + imageHtml += `
`; + } else { + imageHtml += `
Missing
`; + } + + if (before?.screenshot && after?.screenshot) { + imageHtml += `
+ +
+
`; + } else { + imageHtml += `
Missing
`; + } + + return imageHtml; +} + +export type Image = { + input: string; + top: number; + bottom: number; + left: number; +}; + +export async function combineScreenshots( + images: Image[], + outputFileName: string, + width: number, +) { + if (images.length > 0) { + const totalHeight = images[images.length - 1]!.bottom; + + await sharp({ + create: { + width: width, + height: totalHeight, + channels: 4, + background: { r: 0, g: 0, b: 0, alpha: 0 }, + }, + }) + .composite(images) + .toFile(outputFileName); + } +} + +export async function screenshotPageCurrent(page: Page, path: string) { + const viewportHeight = await page.evaluate(() => { + return window.innerHeight; + }); + const viewportWidth = await page.evaluate(() => { + return window.innerWidth; + }); + const totalHeight = await page.evaluate(() => { + return document.body.scrollHeight; + }); + const sections = Math.ceil(totalHeight / viewportHeight); + + let imgHeight = 0; + const images: Image[] = []; + for (let i = 0; i < sections; i++) { + const sectionPath = `${path}_part${i + 1}.png`; + + const def = { + input: sectionPath, + top: imgHeight, + bottom: Math.min(totalHeight, imgHeight + viewportHeight), + left: 0, + }; + + images.push(def); + imgHeight = def.bottom; + } + + if (images.length < 1) { + throw new Error("Missing"); + } + + for (let i = 0; i < images.length; i++) { + const sectionPath = images[i]!.input; + + await page.evaluate( + (scrollY: number) => window.scrollTo(0, scrollY), + i * viewportHeight, + ); + + await page.screenshot({ + path: sectionPath, + clip: { + x: 0, + y: i * viewportHeight, + width: viewportWidth, + height: Math.min(viewportHeight, totalHeight - i * viewportHeight), + }, + }); + } + await combineScreenshots(images, path, viewportWidth); + await Promise.all(images.map((img) => unlink(img.input))); +} diff --git a/scripts/dev/curriculum/_commands/screenshot.ts b/scripts/dev/curriculum/_commands/screenshot.ts index 7f30a3810b..3551ebf405 100755 --- a/scripts/dev/curriculum/_commands/screenshot.ts +++ b/scripts/dev/curriculum/_commands/screenshot.ts @@ -1,126 +1,77 @@ -import { mkdir, unlink } from "fs/promises"; -import { dirname, relative } from "path"; +import { mkdir, writeFile } from "fs/promises"; +import { relative, join } from "path"; import { uniq } from "lodash"; -import puppeteer, { Page } from "puppeteer"; -import sharp from "sharp"; +import { Page, launch } from "puppeteer"; import slugify from "slugify"; -type Image = { - input: string; - top: number; - bottom: number; - left: number; -}; - -const combineScreenshots = async ( - images: Image[], - outputFileName: string, - width: number, -) => { - if (images.length > 0) { - const totalHeight = images[images.length - 1]!.bottom; - - await sharp({ - create: { - width: width, - height: totalHeight, - channels: 4, - background: { r: 0, g: 0, b: 0, alpha: 0 }, - }, - }) - .composite(images) - .toFile(outputFileName); - } -}; +import { + screenshotPageCurrent, + ScreenshotResult, + ScreenshotPageResult, + ScreenshotModalResult, +} from "./helpers"; +import { CURRIC_SLUGS, BASE_PATH } from "./config"; -const screenshotPageCurrent = async ( +const screenshotCurrentModals = async ( + label: string, + slug: string, page: Page, - path: string, - logOpts: { id: string }, - opts: { removeOptionsElement?: boolean }, -) => { - // Hack for testing new MV - if (opts.removeOptionsElement) { - await page.evaluate(() => { - [...document.querySelectorAll('*[data-testid="options-tag"]')].forEach( - (el) => el.remove(), - ); - }); - } - - const viewportHeight = await page.evaluate(() => { - return window.innerHeight; - }); - const viewportWidth = await page.evaluate(() => { - return window.innerWidth; - }); - const totalHeight = await page.evaluate(() => { - return document.body.scrollHeight; - }); - const sections = Math.ceil(totalHeight / viewportHeight); - - let imgHeight = 0; - const images: Image[] = []; - for (let i = 0; i < sections; i++) { - const sectionPath = `${path}_part${i + 1}.png`; - - const def = { - input: sectionPath, - top: imgHeight, - bottom: Math.min(totalHeight, imgHeight + viewportHeight), - left: 0, - }; +): Promise => { + const modals: ScreenshotModalResult[] = []; - images.push(def); - imgHeight = def.bottom; - } - - if (images.length < 1) { - return; - } - - // TODO: Screenshot all the modals - - for (let i = 0; i < images.length; i++) { - const sectionPath = images[i]!.input; + const getModalSlug = (text: string) => { + return slugify(text.replace(/:/g, "").replace("Unit info", "")); + }; - await page.evaluate( - (scrollY: number) => window.scrollTo(0, scrollY), - i * viewportHeight, - ); + const els = await page.$$('*[data-testid="unit-card"]'); + for (const el of els) { + await el.click(); + const text = await page.evaluate((el) => el.textContent ?? "", el); + + await page.waitForSelector('*[data-testid="sidebar-modal"]'); + const sidebarEl = await page.$('*[data-testid="sidebar-modal"]'); + if (sidebarEl) { + // Open all the accordians + const accordianButtonElements = await sidebarEl.$$( + '*[data-testid="expand-accordian-button"]', + ); + for (const accordianButtonElement of accordianButtonElements) { + await accordianButtonElement.click(); + } - console.log( - `📸 [${logOpts.id}] temp #${i + 1}: ${relative( - process.cwd(), - sectionPath, - )}`, - ); - await page.screenshot({ - path: sectionPath, - clip: { - x: 0, - y: i * viewportHeight, - width: viewportWidth, - height: Math.min(viewportHeight, totalHeight - i * viewportHeight), - }, - }); + const modalSlug = getModalSlug(text); + const modalScreenshotDir = getModalPath(label, slug); + await mkdir(modalScreenshotDir, { recursive: true }); + const modalScreenshotPath = join(modalScreenshotDir, modalSlug + ".png"); + await sidebarEl.screenshot({ + path: modalScreenshotPath, + }); + modals.push({ + slug: modalSlug, + screenshot: relative(BASE_PATH, modalScreenshotPath), + }); + const closeEl = await page.$('*[data-testid="close-button"]'); + await closeEl?.click(); + } else { + throw new Error("Missing sidebar"); + } } - console.log( - `📦 [${logOpts.id}] combined: ./${relative(process.cwd(), path)}`, - ); - await combineScreenshots(images, path, viewportWidth); - await Promise.all(images.map((img) => unlink(img.input))); + return modals; }; const screenshotPage = async ( + host: string, + label: string, + slug: string, page: Page, - url: string, - path: string, - logOpts: { id: string }, - opts: { removeOptionsElement?: boolean }, -) => { + opts: { id: string; includeModals: boolean }, +): Promise => { + const url = `${host}/teachers/curriculum/${slug}/units`; + const basedir = getPagePath(label); + await mkdir(basedir, { recursive: true }); + await page.goto(url, { waitUntil: "networkidle0", }); @@ -142,17 +93,17 @@ const screenshotPage = async ( (el) => el.textContent ?? "", ); }, tierSelector); - const subjectAlternativesUniq = uniq(subjectAlternatives); - const tierAlternativesUniq = uniq(tierAlternatives); + const uniqueSubjectAlternatives = uniq(subjectAlternatives); + const uniqueTierAlternatives = uniq(tierAlternatives); type AltType = { subject?: string; tier?: string }; const altList: AltType[] = []; // TODO: Should be simple "all combinations" function. - if (subjectAlternativesUniq.length > 0) { - for (const subjectAlternative of subjectAlternativesUniq) { - if (tierAlternativesUniq.length > 0) { - for (const tierAlternative of tierAlternativesUniq) { + if (uniqueSubjectAlternatives.length > 0) { + for (const subjectAlternative of uniqueSubjectAlternatives) { + if (uniqueTierAlternatives.length > 0) { + for (const tierAlternative of uniqueTierAlternatives) { altList.push({ subject: subjectAlternative, tier: tierAlternative }); } } else { @@ -160,8 +111,8 @@ const screenshotPage = async ( } } } else { - if (tierAlternativesUniq.length > 0) { - for (const tierAlternative of tierAlternativesUniq) { + if (uniqueTierAlternatives.length > 0) { + for (const tierAlternative of uniqueTierAlternatives) { altList.push({ tier: tierAlternative }); } } @@ -178,6 +129,8 @@ const screenshotPage = async ( return output.join("-") ?? ""; }; + const outputJson = []; + if (altList.length > 0) { for (const alt of altList) { for (const el of await page.$$(subjectSelector)) { @@ -190,32 +143,45 @@ const screenshotPage = async ( await el.click(); } } - await screenshotPageCurrent( - page, - path.replace(/\.png/, "-" + buildFilenameSlug(alt) + ".png"), - logOpts, - opts, + const pagePath = getPagePath(label, buildFilenameSlug(alt) + ".png"); + await screenshotPageCurrent(page, pagePath); + console.log( + `📦 [${opts.id}] combined: ./${relative(process.cwd(), pagePath)}`, ); + const modals = !opts.includeModals + ? [] + : await screenshotCurrentModals(label, slug, page); + outputJson.push({ + slug, + screenshot: relative(BASE_PATH, pagePath), + modals, + }); } } else { - await screenshotPageCurrent(page, path, logOpts, opts); + const pagePath = getPagePath(label, `${slug}.png`); + await screenshotPageCurrent(page, pagePath); + console.log( + `📦 [${opts.id}] combined: ./${relative(process.cwd(), pagePath)}`, + ); + const modals = !opts.includeModals + ? [] + : await screenshotCurrentModals(label, slug, page); + outputJson.push({ + slug, + screenshot: relative(BASE_PATH, pagePath), + modals, + }); } + return outputJson; }; -async function screenshotUnitsPage( - page: Page, - slug: string, - host: string, - label: string | undefined, - opts: { removeOptionsElement?: boolean }, -) { - const urlObj = new URL(host); +function getPagePath(label: string, subPath?: string) { + const output = `${BASE_PATH}/screenshots/${label}`; + return subPath ? join(output, subPath) : output; +} - const url = `${host}/teachers/curriculum/${slug}/units`; - const finalLabel = label ?? slugify(urlObj.host); - const screenshotPath = `${process.cwd()}/scripts/dev/curriculum/output/screenshots/${finalLabel}/${slug}.png`; - await mkdir(dirname(screenshotPath), { recursive: true }); - await screenshotPage(page, url, screenshotPath, { id: slug }, opts); +function getModalPath(label: string, pageSlug: string) { + return `${BASE_PATH}/screenshots/${label}/${pageSlug}/`; } async function loginWithUrl(page: Page, loginUrl: string) { @@ -224,80 +190,50 @@ async function loginWithUrl(page: Page, loginUrl: string) { }); } -export default async function screenshot( - host: string, - { - loginUrl, - label, - removeOptionsElement, - }: { loginUrl?: string; label?: string; removeOptionsElement?: true } = {}, -) { - const browser = await puppeteer.launch({ +async function withPage(callback: (page: Page) => Promise) { + const browser = await launch({ headless: "new", args: ["--incognito"], }); const page = await browser.newPage(); - await page.setViewport({ width: 1080, height: 1024 }); - - if (loginUrl) { - await loginWithUrl(page, loginUrl); + await page.setViewport({ width: 1080, height: 2800 }); + try { + await callback(page); + } catch (err) { + console.error(err); } + await browser.close(); +} - const slugs = [ - "art-primary", - "art-secondary", - "citizenship-secondary-core", - "citizenship-secondary-gcse", - "computing-primary", - "computing-secondary-core", - "computing-secondary-aqa", - "computing-secondary-ocr", - "cooking-nutrition-primary", - "cooking-nutrition-secondary", - "design-technology-primary", - "design-technology-secondary", - "english-primary", - "english-secondary-aqa", - "english-secondary-edexcel", - "english-secondary-eduqas", - "french-primary", - "french-secondary-aqa", - "french-secondary-edexcel", - "geography-primary", - "geography-secondary-aqa", - "geography-secondary-edexcelb", - "german-secondary-aqa", - "german-secondary-edexcel", - "history-primary", - "history-secondary-aqa", - "history-secondary-edexcel", - "maths-primary", - "maths-secondary", - "music-primary", - "music-secondary-edexcel", - "music-secondary-eduqas", - "music-secondary-ocr", - "physical-education-primary", - "physical-education-secondary-core", - "physical-education-secondary-aqa", - "physical-education-secondary-edexcel", - "physical-education-secondary-ocr", - "religious-education-primary", - "religious-education-secondary-gcse", - "science-primary", - "science-secondary-aqa", - "science-secondary-edexcel", - "science-secondary-ocr", - "spanish-primary", - "spanish-secondary-aqa", - "spanish-secondary-edexcel", - ]; +type screenshotOpts = { + loginUrl?: string; + includeModals?: boolean; +}; +export default async function screenshot( + host: string, + label: string, + { loginUrl, includeModals = false }: screenshotOpts = {}, +) { + await withPage(async (page) => { + if (loginUrl) { + await loginWithUrl(page, loginUrl); + } - for (const slug of slugs) { - await screenshotUnitsPage(page, slug, host, label ?? undefined, { - removeOptionsElement, - }); - } + const outputJson: ScreenshotResult = { + includesModals: includeModals, + pages: [], + }; + for (const slug of CURRIC_SLUGS) { + const pageJson = await screenshotPage(host, label, slug, page, { + includeModals: includeModals, + id: slug, + }); + outputJson.pages = outputJson.pages.concat(pageJson); + } - await browser.close(); + await writeFile( + join(getPagePath(label, "index.json")), + JSON.stringify(outputJson, null, 2), + ); + }); } diff --git a/scripts/dev/curriculum/automate b/scripts/dev/curriculum/automate index 00615f6698..742f38f7b3 100755 --- a/scripts/dev/curriculum/automate +++ b/scripts/dev/curriculum/automate @@ -14,10 +14,11 @@ yargs(hideBin(process.argv)) }, async () => { await buildFixtures(); }) - .command('screenshot [label]', 'screenshot the visualiser', (yargs) => { + .command('screenshot