Error message being raised by amplyfy authenticate v6 in cypress tests - not in production #5021
Comments
esauerbo
added
the
being-investigated
|
Hi @s5b, thanks for creating this issue. Can you provide a code snippet of your usage of the Authenticator component? |
esauerbo
added
pending-response
|
Also, fyi here is our cypress implementation: https://github.com/aws-amplify/amplify-ui/tree/main/packages/e2e/cypress |
|
Thank you for the reference. I'll have a closer look at the examples. In the meantime, this is a code snippet for how we're integrating the UI component into our Vue application: <script setup lang="ts">
import {Authenticator} from '@aws-amplify/ui-vue';
const formFields = {
signIn: {
username: {
placeholder: 'Enter your email here.',
isRequired: true,
label: 'Email'
},
},
};
</script>
<template>
<authenticator :form-fields="formFields" :hide-sign-up="true">
<template v-slot:sign-in-header>
<el-alert title="You are logging into the Borrower Portal admin interface." type="warning" center show-icon />
</template>
</authenticator>
</template>
<style scoped lang="scss">
</style>The This interaction with Amplify is processed by the following code in our application: import {getCurrentUser, fetchAuthSession} from 'aws-amplify/auth';
import { AuthUser } from 'aws-amplify/auth/cognito';
export const getAuthUser = async (): Promise<AuthUser | undefined> => {
return await getCurrentUser().catch(() => {
return undefined;
});
};
export const getAuthToken = async (): Promise<string | undefined> => {
return await fetchAuthSession().then((authSession) => {
return authSession.tokens?.idToken?.toString();
}).catch(() => {
return undefined;
});
};I don't think we're doing anything fancy or out of the ordinary with this code. For reference, this is the output from running Again, thanks for your reply; very much appreciated. |
|
@s5b Are you sure there is no stack trace or error message? Any error showing in the terminal when running cypress? One thing that does stick out to me is this line: |
|
Thanks for your response. According to npmjs, it appears that this version of In the meantime, I've created a video of the application running firstly outside of Cypress in Chrome (doing a normal login, like the test), and then inside the Cypress test environment with Chrome, showing the failure. In both scenarios, the browser console is open to show any stack trace or additional error messages that may arise. The console remains the same - error free - for both scenarios. This is the terminal output when running the test, which appears to be error free: And I've run the Cypress test using Firefox Developer Edition, and get the same results as for Chrome. Cheers, S t u a r t . |
|
Hi @s5b, I've edited the comment above to redact the key, but please be advised that should probably rotate and revoke that API key. |
|
@s5b Are you trying to inject or mock the Amplify Auth config into the cypress session? Not quick sure what you're trying to do with your "integration of Amplify" code sample above. Are you trying to override some config? I'm not really sure how to help here since this is only happening in cypress. My best guess is there is some environment difference between running Amplify in your cypress and prod environments. |
|
Thank you for bring this to my attention, and for making the redaction. I redacted most of the other identifying information but obviously missed that one. I'm not sure what is initiating that |
|
Watching your video, one thing that comes to mind is you may not be inspecting the right window. I believe that Cypress runs your tests in an iframe, so you should see if you can make devtools target the iframe and maybe you'll see the full error message. |
|
@reesscot I'm deliberately not trying to mock anything in this test. It's aimed at being a smoke test for the deployed application, so it's meant to run just as it does for end-users. The endpoint for the test is the same as the endpoint that is used in the manual run of the website in the video. The only difference between the two interactions is that Cypress is doing the clickety-clinking, and not me in the automated test. |
|
I've had a look at the available contexts in the Chrome console for the running test, and I don't see any additional information in the about the error. There are four contexts in the console, including the root page. None of them appear to have any additional information.
Further, when clicking the "Forgot your password?" link on the sign-in form , you're taken to a dialog box for you to enter your username. Submitting this form gives the following error in the dialog box, and nothing in the browser console.
It appears that all interactions with AWS Amplify Cognito are affected in this environment. The password reset interaction works when running the website directly (outside of Cypress). |
reesscot
added
question
|
@s5b What does the Routes dropdown say in Cypress? |
|
@reesscot There appears to be two entries in the routes section: |
|
@s5b Are you seeing any network requests in devtools? |
|
@reesscot This is the view in the network panel of the devtools. The failed network call is for the site logo, which I know is missing. The two final calls to 
|
|
Hi @s5b, |
Before creating a new issue, please confirm:
On which framework/platform are you having an issue?
Vue
Which UI component?
Authenticator
How is your app built?
Vite
What browsers are you seeing the problem on?
Chrome
Which region are you seeing the problem in?
cognito-idp.ap-southeast-2.amazonaws.com
Please describe your bug.
Trying to update an integration test running with cypress.io. This test worked with Amplify V5, but pops up a dialog in the browser saying "Unknown error occurred.", and provides no other information in the console; no stack trace. This error is raised after the first POST request is sent from the browser to AWS Cognito for authentication. This application works outside of cypress. I notice one difference that outside of cypress the protocol is using http/2.0, while cypress is using http/1.1 - I don't know whether this is relevant. I realise that this error is specific to using cypress, but the failure is inside the Amplify library code. Any ideas gratefully accepted. Thanks for reading. @aws-amplify/ui-vue:
4.2.0; vue:3.4.18; aws-amplify:6.0.16; cypress/vue:5.0.5; cypress:13.6.4; chrome:121.0.6167.139.What's the expected behaviour?
I expect the login to succeed without throwing an unknown error in the amplify code, like it did with v5.
Help us reproduce the bug!
The following code snippet show how the Amplify code is integrated with the application. Followed by a cutdown version of the test that fails.
Again, I know this is a failure in testing, but the failure appears to be happening in the amplify code.
Code Snippet
Integration of Amplify
Cypress test
Console log output
There is no console log output.
Additional information and screenshots
No response
The text was updated successfully, but these errors were encountered: