Function captureTodoReport

src/scripts/measure-flow.ts:18–58

(url: string, framework: string)

const RUNS = Number(process.env.RUNS || 1);

async function captureTodoReport(url: string, framework: string) {
  const page = await browser.newPage();

  const flow = await startFlow(page, {
    name: framework,
    config: {
      extends: 'lighthouse:default',
    },
  });

  await page.goto(url, { waitUntil: 'networkidle0' });
  await flow.snapshot({ stepName: 'Page loaded' });

  const todoButtonSelector = 'form button';
  await page.waitForSelector(todoButtonSelector);
  await page.type('form input', 'new todo!');
  await flow.startTimespan({ stepName: 'Add Todo' });
  await page.click(todoButtonSelector);
  await page.click(todoButtonSelector);
  await page.click(todoButtonSelector);
  await page.click(todoButtonSelector);
  const newItemSelector = 'li[data-index="5"]';
  await page.waitForSelector(newItemSelector);
  await flow.endTimespan();
  await flow.snapshot({ stepName: 'Added Todo Item' });

  page.close();

  const artifact = await flow.createArtifactsJson();
  const flowResult = await auditFlowArtifacts(artifact);
  reports.push(flowResult);
  const report = await flow.generateReport();
  await fs.writeFile('flow.report.html', report);
  await fs.writeFile('flow.report.json', JSON.stringify(flowResult, null, 2));
  console.info(
    chalk.green(
      `${framework} flow report generated. INP:`,
      getInp(flowResult).displayValue
    )
  );
}

const omit = (obj: any, omitKeys: string[]) => {
  const newObj = { ...obj };