Click on social login link in a new popup (which Cypress doesn't have access to)

[michaelwschultz]

Nice little plugin! This is going to be really helpful if I can get it working.

I've turned off headless so I can see what's happening. The google login window opens automatically but I can't seem to get it to fill in the creds. Any ideas?

[lirantal]

@michaelwschultz thanks, let's try to figure this out.

can you post a more wholesome picture of what's going on or a video? since this is e2e it will help to get more context on where it fails.

also, can you manually trigger the connect with google window and then check if the google sign-in page has that email input type on the page with devtools?

[michaelwschultz]

@lirantal absolutely! I'll post a video soon. But yes, I've verified the input is on the google popup.

[michaelwschultz]

@lirantal video!

https://www.loom.com/share/0050194238a4488193a1009fd27288f2

[lirantal]

I can't spot anything bad there. Tried to run it on a local site and the email part works well for me:

Seems you already have the domain chosen while in my picture the email field is entirely empty, so perhaps that's a different form indeed and we need to tweak the selector.

I can suggest that in your own project where you have cypress-social-logins installed then open the nodes_modules/ folder and the code for the plugin in src/Plugin.js directly of the typeUsername function to try a different selector, or perhaps see if the problem is elsewhere.

Happy to try out some other ideas with you too.

[michaelwschultz]

Yeah, I think it selects the field automatically when the window opens. Interesting that it doesn't do that for you. I'll try messing around with that function and see if I can't get it to work. Thanks for taking a look. I'll report back!

[raptatinha]

Hey @michaelwschultz, nice to meet you :) I'm Renata and I had the same issue when I was passing wrongly the 'username' data to be typed in the code. So, a few tips for you to double check:

1. If you are using a data file, make sure your data file is correct, here is an example of a loginData.js:

   
   module.exports = {
   manager: { username: 'test@test.com', password: 'pwd' },
   };

in my login spec file login.spec.js i have something like this (**make sure you have no TYPO**):

const username = loginData.manager.username;

const socialLoginOptions = { username, password, loginUrl: Cypress.config().baseUrl, headless: true, logs: false, loginSelector: '[action="/Account/ExternalLogin?returnurl=/dashboard"] > [name="provider"]', postLoginSelector: '.p-dashboard', };

2. If you are not using a data file, but an env var, make sure the env is set correctly. And you are able to access it.

3. You could, as a last try, to use the data inside your code (at least to double check if it works and do a console.log do triple check)..
Something like this:

const username = 'test@test.com'; console.log('***** email: '+ username);

const socialLoginOptions = { username, password, loginUrl: Cypress.config().baseUrl, headless: true, logs: false, loginSelector: '[action="/Account/ExternalLogin?returnurl=/dashboard"] > [name="provider"]', postLoginSelector: '.p-dashboard', };

Happy trying!

[michaelwschultz]

Hey @raptatinha! Thank you so much for your help. I'll give this a shot later today. One question I have. How did you determine your loginSelector? It looks significantly different to what's in the template.

[lirantal]

the loginSelector comes from you, in the app you develop that is. That is basically the selector of the button/link/image on your own webpage that needs to be clicked in order to trigger the "Connect with Google" scenario.

[lirantal]

Let us know how it goes and feel free to brainstorm with us the issue. We'd love to help ❤️

[michaelwschultz]

@lirantal oh yeah, duh. Sorry I have that part working fine.

[zrana]

@lirantal I am also facing the same issue. CypressError: cy.task('GoogleSocialLogin') failed with the following error:

TimeoutError: waiting for selector "input[type="email"]" failed: timeout 30000ms exceeded

I had tried with different selector in src/plugin.js but getting the same error, any help?

[kashifch]

@lirantal @michaelwschultz

This might help in debugging the issue, the problem is that the login page is opened in a separate chromium window and Cypress is able to click on the login button there, after that the email field appears in a new pop up and Cypress is unable to detect this pop up, when I copied the url of resulting popup and pasted it in original chromium page Cypress immediately picked email field

[id-dan]

Hi @michaelwschultz ! FYI: It is not good solution to use external pop-up for login via social networks because pop-up can be blocked by browser's settings.

For ex:

[lirantal]

@kashifch @zrana: to see if I understood correctly - you provide the plugin with the selector of the social login button to click on. This selector needs to be available on the DOM of the page you are testing with Cypress. If the Login button itself is in another popup then indeed this plugin can't access it.

However I don't think that's the case. I think I was able to reproduce the problem now so looking at it.

P.S. @id-dan has a good point in general :)

[lirantal]

@kashifch So I think we nailed it indeed and it eluded me from your video - the fact that the Login button opens the login phase (user/pass etc) in a new popup is the culprit as the plugin has no idea where to look for it.

A couple of action items we can work on:

1. Are you able to change the experience to make the login work on the same tab by navigating to the social login? if so that's the easiest and fastest route
2. If not, can you provide me the address for this login page so I can try and work out a feature support in this plugin that could allow it to work with popups? you're welcome to DM me on twitter to share it privately.

[zrana]

@lirantal @michaelwschultz

I have forked the repo and merged potential fix into master, please review. I have added a check which will switch to pop up if there is one and perform login operation there. otherwise it will stay on same page and add credentials.

[michaelwschultz]

@id-dan That's a great point! We should fix this in our auth config.

[michaelwschultz]

@zrana amazing! I'll take a look! @lirantal @id-dan @kashifch thanks for all your help! Excited to get this up and running. It's going to make all the rest of our end-to-end testing a breeze. 👍

[michaelwschultz]

@zrana really elegant solution. You should put up a PR on @lirantal's repo.

[lirantal]

@zrana definitely PR it to this repo, let's make sure we get it in.

I have some notes though on how you've got things there. Did you test the plugin without providing the target parameter? because I fear you'd hit a few undefined issues with how that code is currently written in your fork. Open up the PR and let's make it happen ;-)

[michaelwschultz]

@zrana any progress here? Also happy to open a PR with your code if you don't have time 😄

[lirantal]

@michaelwschultz will be great if you could send a PR here if @zrana won't be responsive.

[kashifch]

@lirantal

@zrana is on leave this week, he will be back by Monday and then respond

[lirantal]

Sounds good, thanks for chiming in @kashifch 👍

[id-dan]

@silverhand20 Your case will not work because you tried to use multi-domains in the same test, so cypress can't do it - https://docs.cypress.io/guides/guides/web-security.html#One-Superdomain-per-Test

You should use this plugin - cypress-social-logins and it only will work in automation case (not manually as you tried) because puppeteer runs by cy.task() in separate headless window (not the same window as u tried)

So, pls carefully read documentation(examples) https://github.com/lirantal/cypress-social-logins/blob/master/README.md

[lirantal]

@michaelwschultz @kashifch @zrana any of you would like to pursue work on this with a PR? seems like you have a working solution in your own branch that only needs to be merged here?

[webcrew62]

@lirantal @id-dan @silverhand20 Can you please further clarify, perhaps with an example of multi-domain testing with cypress? For example, once authenticated to google, how can another domain be used in a cypress test?

[lirantal]

Cypress by design wouldn't work beyond the DOM so you can't control popups, iframes or other domains that are not the one you have Cypress running in. This plugin does it by launching puppeteer behind the scenes to do the login on the google domain.

[webcrew62]

@lirantal once the login on google domain is complete, the PostLoginSelector fails, as all elements on that page are signed. Is there a work-around for this?

[lirantal]

what does this mean: "as all elements on that page are signed" ? once the login on google domain is complete, you are forwarded back to your own domain which should detect you as signed in, and then you can take the cookies and do with them whatever is needed in the Cypress testing part (such as logging you in).

[webcrew62]

Please disregard the previous comment about signed elements.

What (url) in the cypress.json is to indicate the domain which detects being signed in to google?

[lirantal]

So it's not exactly the domain that detects you are signed in to google. Here is a reference to a cypress.json definition:

{
  "baseUrl": "https://example.com",
  "env": {
    "cookieName": "website.cookie.id",
    "googleSocialLoginUsername": "some@gmail.com",
    "googleSocialLoginPassword": "somePassword",
    "loginUrl": "https://example/login",
    "homepage": "https://example"
  }
}

In this example, the loginUrl specifies to the plugin which URL it should navigate to, and by providing the task a config object which includes the loginSelector key to tell it which DOM element to click on it, it will be able to click and then use the google provided social creds to do the login.

[mirzamusic]

I made a PR which will resolve this, tested it locally and works fine https://github.com/lirantal/cypress-social-logins/pull/22

[lirantal]

@michaelwschultz could you check out the new version with @mirzamusic's popup support and see if this works for you?

[iparamey]

Can anybody give a link to a real tests with sign in as google user?

[lirantal]

Yes, check the CI here: https://github.com/lirantal/cypress-social-logins/pull/20 It fails because of a hard time to configure that on cloud but definitely should work locally if you replicate the same setup of the ./integrations/ folder

[SonaliQA]

On cypress new pop up I cannot enter email on Gmail login screen

[lirantal]

Can you share a video of what's happening?

[lirantal]

@SonaliAvaya

1. looks like you're missing on providing the loginSelector
2. your overall process/config doesn't seem right. you shouldn't be browsing directly to google login but rather to your own site that requires it, then put the login selector url in that loginSelector field

[SonaliQA]

[image: image.png] [image: image.png]

index.js under plugins folder [image: image.png]

cypress.json [image: image.png]

Video link of executed test.js : https://drive.google.com/file/d/14HxjrGdgq84CN91x1COia-qnJBDSxiVv/view Its executing 3 times I don't know why? and could not select first email in inbox

I actually don't know what I should add now but I need multiple browser support in cypress I am new to cypress and need to login in cypress and go to inbox click on particular email then confirm that invited link in email and navigate to the different tab and then perform some actions on my app I have tried a lot many times but I was not able to do so please help me out : how I can add config and What I should add in login selector

Thanks Sonali

On Thu, May 7, 2020 at 8:41 AM Liran Tal notifications@github.com wrote:

@SonaliAvaya https://github.com/SonaliAvaya

1. looks like you're missing on providing the loginSelector
2. your overall process/config doesn't seem right. you shouldn't be browsing directly to google login but rather to your own site that requires it, then put the login selector url in that loginSelector field

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/lirantal/cypress-social-logins/issues/4#issuecomment-625230889, or unsubscribe https://github.com/notifications/unsubscribe-auth/AO3A74B4TURCYI4QVSJE63TRQKT7BANCNFSM4IBXXQNQ .

[SonaliQA]

and i dont know what i should pass on "loginselector" bcz I didctly want to visit "gmail login " from goggle

On Thu, May 7, 2020 at 5:53 PM Sonaliben Patel shpatel@esna.com wrote:

[image: image.png] [image: image.png]

index.js under plugins folder [image: image.png]

cypress.json [image: image.png]

Video link of executed test.js : https://drive.google.com/file/d/14HxjrGdgq84CN91x1COia-qnJBDSxiVv/view Its executing 3 times I don't know why? and could not select first email in inbox

I actually don't know what I should add now but I need multiple browser support in cypress I am new to cypress and need to login in cypress and go to inbox click on particular email then confirm that invited link in email and navigate to the different tab and then perform some actions on my app I have tried a lot many times but I was not able to do so please help me out : how I can add config and What I should add in login selector

Thanks Sonali

On Thu, May 7, 2020 at 8:41 AM Liran Tal notifications@github.com wrote:

@SonaliAvaya https://github.com/SonaliAvaya

1. looks like you're missing on providing the loginSelector
2. your overall process/config doesn't seem right. you shouldn't be browsing directly to google login but rather to your own site that requires it, then put the login selector url in that loginSelector field

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/lirantal/cypress-social-logins/issues/4#issuecomment-625230889, or unsubscribe https://github.com/notifications/unsubscribe-auth/AO3A74B4TURCYI4QVSJE63TRQKT7BANCNFSM4IBXXQNQ .

[pylnatahp]

I have the similar issue > TimeoutError: waiting for selector "input[type="email"]" failed: timeout 30000ms exceeded Popup opens but then nothing happens.

[lirantal]

I do hope you realize that your video, and credentials are publicly share here with everyone able to see it? I've already redacted your previous comments to avoid leaking of information so please don't repeat this unless you realize what you are sharing.

I saw that the video is in another locale than English so maybe the fields are different. Can you hover over the email input field with DevTools and tell me what is the class id for that?

[iparamey]

It's not a problem because in my video you can see only test's credentials for the local environment. As for email input, I will attach a screenshot

[lirantal]

That selector seems fine then with the code: https://github.com/lirantal/cypress-social-logins/blob/master/src/Plugins.js#L108

Could you add a popup delay? I think that's the issue. You should add it in the socialLoginOptions variable you have. Give it a bit of time until it loads and try it.

[bmsoko]

Hello all! can anyone please share a hack/workaround to test other social networks? I need to click on other social networks, authenticate and authorize ! is there any way to do this via API or anything?

[iparamey]

That selector seems fine then with the code: https://github.com/lirantal/cypress-social-logins/blob/master/src/Plugins.js#L108

Could you add a popup delay? I think that's the issue. You should add it in the socialLoginOptions variable you have. Give it a bit of time until it loads and try it.

Thanks a lot. It works now.

[haisumabbas]

Hi, I'm stuck at the same problem. It opens up the social login popup but doesn't type in the username.

and for the other value of the headless flag, it returns an error for the other identifier/selector.

[lirantal]

Can you try adding a meaningful delay for the popup? it's one of the options you can pass to the plugin

[haisumabbas]

I tried different values for popupDelay but unfortunately, it's still the same.