treosh / lighthouse-ci-action

Audit URLs using Lighthouse and test performance with Lighthouse CI.
MIT License
1.15k stars 81 forks source link

Is there a way I can automate auth, for pages that need a user to be logged in? #109

Open misabel opened 1 year ago

maecapozzi commented 1 year ago

For anyone who comes across this -- you can use puppeteer to automate authentication.

gustavolzangelo commented 1 year ago

For anyone who comes across this -- you can use puppeteer to automate authentication.

Do you have any good tutorials about it?

maecapozzi commented 1 year ago

Hey! I haven't found a good a good tutorial, but I can share some code snippets for how I ended up doing it here.

lighthouserc.json

{
  "ci": {
    "collect": {
      "puppeteerScript": "lighthouse-audits/puppeteerLogin.js",
      "url": [
        "https://website.com/home",      
      ]
    }
  }
}

lighthouse-audits/puppeteerLogin.js


const login = async (page, origin) => {
  await page.goto(origin);
  await page.waitForSelector('[data-testid=login-input-email]', {
    visible: true,
  });

  // Fill in and submit login form.
  const emailInput = await page.$('[data-testid=login-input-email]');
  await emailInput.type('email@email.com');

  const passwordInput = await page.$('[data-testid=login-input-password]');
  await page.click('[data-testid="login-input-password"]');
  await passwordInput.type('password');

  await Promise.all([
    page.click('[data-testid="login-button"]'),
    page.waitForNavigation(),
  ]);

  page.close();
};

module.exports = async (browser) => {
  const page = await browser.newPage();
  const url = "https://website.com/login"

  await login(
    page,
    'https://analytics.amplitude.com/login/e2e-tests/?no_captcha=1&no_throttle=1',
  );
};

Let me know if this helps!