// cypress.config.ts
import { setup, retry } from '@cypress/puppeteer'
import { defineConfig } from 'cypress'
import type { Browser as PuppeteerBrowser, Page } from 'puppeteer-core'

export default defineConfig({
  e2e: {
    setupNodeEvents (on) {
      setup({
        on,
        onMessage: {
		  // 'testNewTab' can be any string and there can be as many uniquely-named message handlers as needed
          async testNewTab (browser: PuppeteerBrowser) {
            const page = await retry<Promise<Page>>(async () => {
              const pages = await browser.pages()
              const page = pages.find((page) => page.url().includes('new-tab.html'))

              if (!page) throw new Error('Could not find page in usage')

              return page
            })

            const paragraph = await page.waitForSelector('p')
            const paragraphText = await page.evaluate((el) => el!.textContent, paragraph)
            const button = await page.waitForSelector('#send')
            const buttonText = await page.evaluate((el) => el!.textContent, button)

            button!.dispose()
            paragraph!.dispose()

            await page.close()

            return { paragraphText, buttonText }
          },
        },
      })
    },
  },
})

// spec.cy.ts
it('tests a second tab', () => {
    cy.visit('/cypress/fixtures/index.html')
    cy.get('button').click() // opens a new tab

    // this invokes the testNewTab message handler
    cy.puppeteer('testNewTab')
    .should('deep.equal', {
      paragraphText: 'This is the new tab',
      buttonText: 'Send message',
    })
})