问使用Cypress在全堆栈应用程序中使用Auth0测试身份验证

EN

// cypress/plugins/auth0.js

const puppeteer = require('puppeteer');

const preventApplicationRedirect = function (callbackUrl) {
  return (request) => {
    const url = request.url();
    if (request.isNavigationRequest() && url.indexOf(callbackUrl) === 0)
      request.respond({ body: url, status: 200 });
    else request.continue();
  };
};

const writeUsername = async function writeUsername({ page, options } = {}) {
  await page.waitForSelector('#username');
  await page.type('#username', options.username);
};

const writePassword = async function writeUsername({ page, options } = {}) {
  await page.waitForSelector('#password', { visible: true });
  await page.type('#password', options.password);
};

const clickLogin = async function ({ page } = {}) {
  await page.waitForSelector('button[type="submit"]', {
    visible: true,
    timeout: 5000,
  });

  const [response] = await Promise.all([
    page.waitForNavigation({ waitUntil: 'networkidle2' }),
    page.click('button[type="submit"]'),
  ]);
  return response;
};

exports.Login = async function (options = {}) {
  const browser = await puppeteer.launch({
    headless: options.headless,
    args: options.args || ['--no-sandbox', '--disable-setuid-sandbox'],
  });

  const page = await browser.newPage();

  try {
    await page.setViewport({ width: 1280, height: 800 });
    await page.setRequestInterception(true);

    page.on('request', preventApplicationRedirect(options.callbackUrl));

    await page.goto(options.loginUrl);

    await writeUsername({ page, options });
    await writePassword({ page, options });

    const response = await clickLogin({ page, options });

    if (response.status() >= 400) {
      throw new Error(
        `'Login with user ${
          options.username
        } failed, error ${response.status()}`,
      );
    }

    const url = response.url();
    if (url.indexOf(options.callbackUrl) !== 0) {
      throw new Error(`User was redirected to unexpected location: ${url}`);
    }

    const { cookies } = await page._client.send('Network.getAllCookies', {});
    return {
      callbackUrl: url,
      cookies,
    };
  } finally {
    await page.close();
    await browser.close();
  }
};

// cypress/plugins/index.js

const auth0 = require('./auth0');

module.exports = (on, config) => {
  require('dotenv').config({ path: '.env.test' });

  config.env.AUTH0_DOMAIN = process.env.AUTH0_DOMAIN;
  config.env.AUTH_USERNAME = process.env.AUTH_USERNAME;
  config.env.AUTH_PASSWORD = process.env.AUTH_PASSWORD;

  on('task', {
    LoginPuppeteer(options) {
      return auth0.Login(options);
    },
  });

  return config;
};

// cypress/support/commands.js

const { getUnixTime } = require('date-fns');

/*
 * Create the cookie expiration.
 */
function getFutureTime(minutesInFuture) {
  const time = new Date(new Date().getTime() + minutesInFuture * 60000);
  return getUnixTime(time);
}

/**
 * Create a cookie object.
 * @param {*} cookie
 */
function createCookie(cookie) {
  return {
    name: cookie.name,
    value: cookie.value,
    options: {
      domain: `${cookie.domain.trimLeft('.')}`,
      expiry: getFutureTime(15),
      httpOnly: cookie.httpOnly,
      path: cookie.path,
      sameSite: cookie.sameSite,
      secure: cookie.secure,
      session: cookie.session,
    },
  };
}

/**
 * Login via puppeteer and return the redirect url and cookies.
 */
function login() {
  return cy.task('LoginPuppeteer', {
    username: Cypress.env('AUTH_USERNAME'),
    password: Cypress.env('AUTH_PASSWORD'),
    loginUrl: 'http://localhost:3000/login',
    callbackUrl: 'http://localhost:3000/callback',
  });
}

/**
 * Login with Auth0.
 */
Cypress.Commands.add('loginAuth0', () => {
  cy.session('logged in user', () => {
    login().then(({ cookies, callbackUrl }) => {
      console.log(cookies);
      cookies
        .map(createCookie)
        .forEach((c) => cy.setCookie(c.name, c.value, c.options));

      cy.visit(callbackUrl);
    });
  });
});