Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a puppeteer plugin #28023

Closed
chrisbreiding opened this issue Oct 10, 2023 · 0 comments · Fixed by #28370
Closed

Create a puppeteer plugin #28023

chrisbreiding opened this issue Oct 10, 2023 · 0 comments · Fixed by #28370
Assignees
Labels
type: feature New feature that does not currently exist

Comments

@chrisbreiding
Copy link
Contributor

What would you like?

Create a plugin that makes it easy to interact with the Cypress browser using Puppeteer. The plugin will require separate installation.

Message handlers are defined inside the Cypress config for utilizing Puppeteer like so:

// 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 }
          },
        },
      })
    },
  },
})

Note that a generic retry function is provided as well.

The message handler is invoked in the spec by specifying the message via the custom cy.puppeteer() command:

// 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',
    })
})

The Cypress app itself should be updated to expect extra tabs and/or windows (any tabs/windows outside the main Cypress tab) being opened.

Why is this needed?

No response

Other

No response

@chrisbreiding chrisbreiding added the type: feature New feature that does not currently exist label Oct 10, 2023
@chrisbreiding chrisbreiding self-assigned this Oct 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: feature New feature that does not currently exist
Projects
Status: Beta
Development

Successfully merging a pull request may close this issue.

1 participant