Run lighthouse report at each step in an Angular SPA

I am using Puppeteer to crawl through my SPA. On page load, there are only two radio buttons. On selecting either of them, new html is added to the DOM. How do I create a lighthouse report at each of these steps? One report on page load, and another report when puppeteer clicks the button and generates new html.

Here is the snippet -

await page.goto(opts.url); 

 await page.screenshot({
                path: 'audit-images/before_audit.png',
                fullPage: true
            });

//Generate Lighthouse Report here.

//Click a radio option
await page.click('input[id=appt-yourself]');
            console.log("Successfully clicked yourself");
            await page.screenshot({
                path: 'audit-images/after click yourself.png',
                fullPage: true
            });

//
Generate Lighthouse Report here.

//Currently, I have only this at the end - 
await lighthouse(opts.url, opt, null).then(results => { 
//this basically generates report when the url is loaded, but not at each step.
});

[ghost]

@patrickhulce - That’s what I ended up doing. I made use of axe-puppeteer from https://github.com/dequelabs/axe-puppeteer to generate a11y report, when user interactions are performed after the page has loaded. My working example is like -

  await page.goto(opts.url);

    /*----Someone Else Flow----*/
    await page.waitFor(100);

    //click someone else
    await page.click('input[id=appt-someone]');

    console.log("Successfully clicked someone else");
    await page.screenshot({
        path: 'audit-images/someone-else-click.png'
    });

    await page.click('input[id=firstname]');
    await page.keyboard.type('test user');

    console.log('running axe accessibility audit');

    //run axe puppeteer
    const results = await new AxePuppeteer(page).analyze();
     console.log(results);

Would have loved to integrate this with lighthouse report. I now have two different reports - a perf report from lighthouse and a a11y report from axe.

[patrickhulce]

You can write this sort of thing manually using a combination of addy’s repo and the Lighthouse accessibility gatherer.

EDIT: use the project @harish2rock mentioned (https://github.com/dequelabs/axe-puppeteer ), not my ugly example, included below for posterity if you’re curious though 😃

Show Example

Something sorta like

const axeLibSource = fs.readFileSync(require.resolve('axe-core/axe.min.js'), 'utf8');

it('should be accessible', async () => {
  const axeFn = `(() => {
    ${axeLibSource};
    return window.axe.run(document, {
      elementRef: true, 
      runOnly: {type: 'tag', values: ['wcag2a', 'wcag2aa']},
      resultTypes: ['violations'],
    })
  })()`;

  const axeResults = await page.evaluate(axeFn);
  expect(axeResults.violations).toHaveLength(0);
})

DISCLAIMER: untested, please don’t come after me with bugs 😅