cypress-plugins-index-with-puppeteer.js

/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/**
 * @type {Cypress.PluginConfig}
 */

const webpack = require('webpack')
const puppeteer = require('puppeteer')
const { initPlugin } = require('cypress-plugin-snapshots/plugin')
const webpackPreprocessor = require('@cypress/webpack-preprocessor')
const defaults = webpackPreprocessor.defaultOptions
const custom = require('../../webpack.config.dev')

module.exports = (on, config) => {
  initPlugin(on, config)

  let debuggingPort

  defaults.webpackOptions.resolve = custom.resolve
  defaults.webpackOptions.module = {
    ...defaults.webpackOptions.module,
    rules: custom.module.rules,
  }

  const envPlugin = new webpack.DefinePlugin({
    GISRD_APP_CONFIG: JSON.stringify({
      GISRD_API_URL: 'http://server.test.rd.altarix.org/rd2',
      PUBLIC_PATH: '/',
    }),
    FAKE_USER: JSON.stringify(''),
  })

  if (!defaults.webpackOptions.plugins) {
    defaults.webpackOptions.plugins = []
  }
  defaults.webpackOptions.plugins.push(envPlugin)

  on('file:preprocessor', webpackPreprocessor(defaults))

  on('before:browser:launch', (browser = {}, launchOptions) => {
    if (browser.family === 'chromium' && browser.name !== 'electron') {
      // auto open devtools
      launchOptions.args.push('--auto-open-devtools-for-tabs')
      const existing = launchOptions.args.find(
        (arg) => arg.slice(0, 23) === '--remote-debugging-port'
      )
      debuggingPort = existing.split('=')[1]
    }
  })

  on('task', {
    async getAxTree(selector) {
      const browser = await puppeteer.connect({
        browserURL: `http://localhost:${debuggingPort}`,
      })
      const pages = await browser.pages()
      const page = pages[0]

      const elementHandle = await page.$('iframe.aut-iframe')
      const frame = await elementHandle.contentFrame()

      const newPage = await browser.newPage()
      await newPage.setContent(await frame.content())

      let el
      if (selector) el = await page.$(selector)
      const tree = await newPage.accessibility.snapshot({ root: el })

      await newPage.close()

      const treeNormalized = JSON.parse(
        JSON.stringify(tree, (k, v) => {
          if (typeof v === 'object') {
            if (v.role === 'generic' && v.name === 'mirage') return undefined
            if (v.role === 'textbox' || v.role === 'text') return undefined
          }
          return v
        })
      )
      const snap = treeNormalized.children.filter(Boolean)
      return snap
    },
  })

  return config
}