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

lirantal / cypress-social-logins

Cypress authentication flows using social network providers

Apache License 2.0

247 stars 78 forks source link

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

Closed surykumar closed 3 years ago

surykumar commented 4 years ago

Hi, I am trying to test the google sign in & using this package. The issue I am facing is.

Whenever I run the test, I am not seeing it running in any window, as in the attached screenshot you can see that the loginSelector is clicked & it's showing error in finding email input, which means the loginSelector is available. why am I not seeing it in the cypress default runner page? & having the issue " waiting for selector "input#identifierId[type="email"]" failed". also if I make headless = false, I see a new browser tab opened with the loginSelector Button, am expecting this is not triggering because of the default popups are blocked in chromium. But again if that the case, I am just seeing the login button & the error I get is still the same "waiting for selector "input#identifierId[type="email"]" failed: timeout 30000ms exceeded".

Screenshot from 2020-10-07 14-24-32

Originally posted by @suryakant-kumar in https://github.com/lirantal/cypress-social-logins/issues/34#issuecomment-704803701

lirantal commented 4 years ago

The fact that you don't see anything on Cypress, or a new browser, is because the work for doing the actual login is done using pupetteer. I suggest going through the examples on the README and a branch we have as a reference.

surykumar commented 4 years ago

Also, what I have noticed is, after clicking the login button, it's searching for the email input field. But it's possible to have another account selector login screen (attached 2nd screen) & if that's the case it's unable to find the email input & throwing the error. I am not sure but it might be the reason for this error.

Screenshot from 2020-10-08 00-43-21

SaveYourTime commented 3 years ago

CypressError cy.task('GoogleSocialLogin') failed with the following error: waiting for selector "input#identifierId[type="email"]" failed: timeout 30000ms exceeded

For anyone who is facing the same issue and your google auth displayed like a popup, try the socialLoginOptions below. The key point is to set popupDelay for more than 3000 milliseconds.

const socialLoginOptions = {
      username,
      password,
      loginUrl,
      preLoginSelector: '[data-testid="auth"]',
      loginSelector: 'button[data-provider-id="google.com"]',
      postLoginSelector: '[data-testid="chatroom"]',
      isPopup: true,
      popupDelay: 3000, // <--- this is important !!!
};

lirantal commented 3 years ago

@SaveYourTime thanks for taking the effort document this for other readers. Would you be able to open a pull request to the README and add this note on the troubleshooting section in the bottom? 🙏

mdn021 commented 3 years ago

I'm having this issue as well. I was able to get a screenshot of the page and it looks like I'm getting a more outdated google log in page. Any ideas why this would be? google-sign-in

lirantal commented 3 years ago

Can you check the selectors on that login page to see if they match what the library is trying to find?

mdn021 commented 3 years ago

It doesn't. This is html for the email field.

<input id="Email" type="email" value="" spellcheck="false" name="Email" placeholder="Email or phone" autofocus="">

lirantal commented 3 years ago

@mdn021 we just added a capability for a custom login if you need to adjust the selectors and such. Check the updated README for these options and an example walk through. Goodluck!

Kajal-Rani commented 3 years ago

@suryakant-kumar Were you able to fix this issue? I am also facing the same issue.