No more trade offs in Cypress

index.js

// cypress/plugins/index.js

const puppeteer = require('puppeteer');

module.exports = (on, config) => {
  let cypressDebuggingPort;
  let puppeteerDebuggingPort = 9222;

  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.family === 'chromium' && browser.name !== 'electron') {
      const existing = launchOptions.args.find(
        (arg) => arg.slice(0, 23) === '--remote-debugging-port'
      );
      cypressDebuggingPort = existing.split('=')[1];
    }
  });

  on('task', {
    'pptr:setup'() {
      return (async () => {
        puppeteer.launch({
          headless: false,
          defaultViewport: null,
          args: [`--remote-debugging-port=${puppeteerDebuggingPort}`]
        });
        return null;
      })();
    },

    'pptr:visit'(url) {
      return (async () => {
        const browser = await connect(puppeteerDebuggingPort);
        const pages = await browser.pages();
        const page = pages[0];
        await page.goto(url);
        return null;
      })();
    },

    'pptr:cy:assert'() {
      return (async () => {
        const browser = await connect(cypressDebuggingPort);
        const pages = await browser.pages();
        const page = pages[0];
        const currentUrl = await page.url();
        return currentUrl;
      })();
    },

    'pptr:cy:newtab'() {
      return (async () => {
        const browser = await connect(cypressDebuggingPort);
        await browser.newPage();
        return null;
      })();
    },

    'pptr:close'() {
      return (async () => {
        const browser = await connect(puppeteerDebuggingPort);
        await browser.close();
        return null;
      })();
    }
  });

  const connect = async (port) =>
    await puppeteer.connect({
      browserURL: `http://localhost:${port}`,
      defaultViewport: null,
    });
}

no_trade_offs.js

// cypress/integration/no_trade_offs.js

describe('no more trade offs', () => {

  before(() => {
    cy.task('pptr:setup');
    cy.visit('https://example.cypress.io/todo')
  })

  after(() => {
    cy.task('pptr:close');
  })

  it('launch another browser with any url', () => {
    cy.task('pptr:visit', 'https://papu.substack.com')
  })

  it('perform assertions on the puppeteer data', () => {
    cy.task('pptr:cy:assert').then(url => {
      expect(url).to.contain('https://example.cypress.io');
    });
  })

  it('open a new tab in the cypress browser instance', () => {
    cy.task('pptr:cy:newtab');
  })

})

For the blog post here