Encountered error performing sign in: [auth/popup-blocked] Unable to establish a connection with the popup. It may have been blocked by the browser

Solution for Encountered error performing sign in: [auth/popup-blocked] Unable to establish a connection with the popup. It may have been blocked by the browser
is Given Below:

I have a vue application.
In this application, there is a social login function and it works well.
I am going to have a test for social login with cypress.
But it doesn’t work well. After google signing button pressed, new browser popup and close with a error log.
This is error message.

Encountered error performing sign in: [auth/popup-blocked] Unable to
establish a connection with the popup. It may have been blocked by the
browser.

How can I solve this problem?
I am ready to share any relevant cypress code if you want.

Don’t test the popup, google login button etc, because this is not the part of your app, this is just an embedded login from Google. You can even mock the data and “fake” the login with Google session.

There is a library called cypress-social-login which does just that.
It’s recommended by the cypress team and can be found on the cypress plugin page.

https://github.com/lirantal/cypress-social-logins

This Cypress library makes it possible to perform third-party logins (think oauth) for services such as GitHub, Google or Facebook.
It does so by delegating the login process to a puppeteer flow that
performs the login and returns the cookies for the application under
test so they can be set by the calling Cypress flow for the duration
of the test.

taken from Anyone has an example in cypress that uses Google login