Feedback for @cypress/puppeteer Beta

[jennifer-shehane]

We released a @cypress/puppeteer plugin and we would like to gather feedback on how your experience is using the plugin. We intend to use this feedback to inform what improvements we could make, if any, to the plugin.

The main intention of the plugin is to allow a way for users to test some use cases of multiple tabs or windows, so that is our main focus when looking at feedback, but we'd be very interested to see other ways that you found it to be useful.

Please include any/all of the following:

• Successes!
• Anything that makes this plugin unusable for your use case.
• Frustrations
• Features that would make this a plugin that you would adopt
• Features that would be nice to have
• Anything else...

[Benoit-Vasseur]

Hello,

I cloned the puppeteer folder (https://github.com/cypress-io/cypress/tree/develop/npm/puppeteer) on my local machine (Linux Ubuntu) and the examples do not work :/

I even tried to do a minimal test (just a console.log) and it do not work either :/

//cypress/e2e/hello.cy.ts
describe('Hello', () => {
    it('hello', () => {
        cy.puppeteer('logHello')
    })
})

// in cypress.config
{
   onMessage: {
       async logHello(browser) {
           return retry(() => {
              console.log('HELLO')
              return 'hello'
            } ) 
     }
}

I join my log file
cypress_logs.txt

[chrisbreiding]

Do you still encounter this issue if you set up a separate project and npm install --save-dev @cypress/puppeteer instead of cloning the source?

[adnanerlansyah403]

Hello,

I cloned the puppeteer folder (https://github.com/cypress-io/cypress/tree/develop/npm/puppeteer) on my local machine (Linux Ubuntu) and the examples do not work :/

I even tried to do a minimal test (just a console.log) and it do not work either :/

//cypress/e2e/hello.cy.ts
describe('Hello', () => {
    it('hello', () => {
        cy.puppeteer('logHello')
    })
})

// in cypress.config
{
   onMessage: {
       async logHello(browser) {
           return retry(() => {
              console.log('HELLO')
              return 'hello'
            } ) 
     }
}

I join my log file cypress_logs.txt

I got the same issue as like you

[filiphric]

I thought a more "Cypress-native" implementation would be much better. Not sure how techincally possible that is but I think building something like cy.origin() but for tabs would make much more sense. I’m imagining something like:

cy.visit('/client1') // open first tab

cy.get('input').type('hello world{enter}')

// go to second tab
cy.tab('my second tab', () => {

  cy.visit('/client2')
  cy.get('[data-cy=incoming-message]').should('have.text', 'hello world')

})

I think Cypress DX is what people ultimately want. Lack of multi-tab support has a lot of workarounds, but the reason why people stay away from these workarounds is because they don’t want to leave Cypress DX. I haven’t dived too deeply into this, but at first glance it seems like this is not much different from using cy.task(). I’m in no way trying to diminish the amount of work that went into this, just trying to look at this from a product/DX perspective.

[adnanerlansyah403]

I want this feature to be implemented on Cypress 😭😭😭😭😭😭😭😭😭😭😭😭. Please developer team cypress @jennifer-shehane , make this feature be real 🙏

[jennifer-shehane]

@filiphric Thanks for the feedback filip! We did have some initial concepts wrapping a more familiar API into Cypress, with puppeteer doing the background work. For Beta, we took a more incremental approach to implementation - building out the bare bones with a low maintenance cost to us and wait to hear feedback on whether a nicer 'wrapper' would be helpful to users. This is helpful with deciding post-beta actions.

[wlsf82]

I’ve tested it in a very silly project, and it works great.

Next, I’ll try a real login scenario that opens a new tab or window.

Thanks, Cypress team!

[wlsf82]

@jennifer-shehane, although the documentation mentions the compatibility with Electron, in a project I tried, it only works with Chromium web-based browsers (e.g., Chrome and Edge), not on Electron.

See this CI failure as a reference.

And here's the same run on the Cypress Cloud.

To prevent that, I'm filtering for only chromium web-based browsers.

[jennifer-shehane]

@wlsf82 Thanks for reporting! We'll take a look at this. May be a bit slower with the end of the year coming up.

[fabiojfadsg]

@jennifer-shehane , I created a test scenario where I believe this plugin would be essential.
Scenario: Simulation of a chat conversation with 2 users with different profiles.
Analyzing the plugin I saw that the second tab opens as expected but we have some problems when we add tests to the input fields:
1- Texts are being typed slowly, character by character with an average time of one second for each character.
2- When we click to go to the next step, it appears that the second tab displays the text entered, but shows the message that it is necessary to enter a name, appearing as if there was no typing.

I left a folder in the project called “evidence”, containing a video and images of the problem. Link para projeto
Github

[jennifer-shehane]

@fabiojfadsg For the delay in between typing, you have passed a delay option to the Puppeteer type method, this is the "delay which is the Time to wait between key presses in milliseconds." So you have added an artificual 1 sec delay in between each character press, you can edit that in your tests. https://pptr.dev/api/puppeteer.page.type

For the second problem, it looks like it did submit the username and password, but it displaying an error about an invalid username. And it clears the username and password field when hitting the submit button, as shown in the gif below I recreated outside of Cypress.

[mforzano]

I'm encountering a weird issue with trying to use the latest version (0.1.4). I'm essentially following the "Switching to a new tab" example in the readme, but without actually switching tabs and simply logging the page title, URL and content of the current page to the console. But, instead of the page under test being loaded in Puppeteer, I'm getting the Cypress test runner page.

So for example:

1. I load a URL, i.e. https://www.amazon.com using cy.visit
2. I invoke my Cypress task.
3. The following is logged:

Page title is: MyCypressSample, URL: https://www.amazon.com/__/#/specs/runner?file=cypress/e2e/sample-script-open-homepage.cy.ts

Where 'MyCypressSample' is the name of my test pacakge.

Also, if I I log the length of the pages array I get 1.

I would expect that Puppeteer has access to the page under test as opened by cy.visit.

Any pointers would be much appreciated.

[Alfy102]

Hi, I am trying to use this plugin to enable tracing. I am getting Cannot read properties of undefined (reading 'tracing').
I have cypress-esbuild-preprocessor and cypress-cucumber-preprocessor.

beforeEach(() => {
  cy.puppeteer('traceStarts');
});


afterEach(() => {
  cy.puppeteer('traceEnds');
});

      setup({
        on,
        onMessage: {
          async traceStarts(browser: PuppeteerBrowser, page: Page) {
            await page.tracing.start({ path: 'trace.json' });
            return null;
          },

          async traceEnds(browser: PuppeteerBrowser, page: Page) {
            await page.tracing.stop();
            return null;
          }
        },
      });

[annamazurek-qa]

Hello!

I have problems with types of the Browser. Browser property is passed by cy.puppeteer(); and the type of the browser they pass doesn't match with the official Browser type. The reason is:
"Type 'Browser' is missing the following properties from type 'Browser': createBrowserContext, #privatets(2352)"

Could you fix it somehow?

Thanks!