I am unable to login to the test app for the automation courses with this error, not sure what I have done 
3 Likes
Hi Mark,
Couple of questions, are you running it locally? (Ie did you put npm start into whatever IDE you’re using, and then you’re trying to log in?)
What password are you expecting? (It should be the same for everyone so I can’t imagine sharing here is an issue!)
2 Likes
I’m guessing you are running an app locally? Are all the services up & running?
After logging in, it seems that your login action is triggering the validate to see if the password matches but returns a 404 of not being able to find the resource (meaning it might not be up & running, if you are using a prebuilt app)
2 Likes
Once starting the app any failed login attempts appear to throw what should have been expected to your terminal. You should also look out for Compiled successfully!.
The below is my output, yours should be close enough to this. I have redacted the actual email and password. Try using the values you get returned.
If you aren’t seeing this output please paste what does appear.
PS C:\dev\mot-cert-support-app-js> npm start
> timesheet-manager@0.1.0 start
> concurrently --kill-others "cd mocks && java -jar wiremock-standalone.jar --port 8080" "react-scripts start"
[0] SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
[0] SLF4J: Defaulting to no-operation (NOP) logger implementation
[0] SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.
[0] /$$ /$$ /$$ /$$ /$$ /$$
[0] | $$ /$ | $$|__/ | $$$ /$$$ | $$
[0] | $$ /$$$| $$ /$$ /$$$$$$ /$$$$$$ | $$$$ /$$$$ /$$$$$$ /$$$$$$$| $$ /$$
[0] | $$/$$ $$ $$| $$ /$$__ $$ /$$__ $$| $$ $$/$$ $$ /$$__ $$ /$$_____/| $$ /$$/
[0] | $$$$_ $$$$| $$| $$ \__/| $$$$$$$$| $$ $$$| $$| $$ \ $$| $$ | $$$$$$/
[0] | $$$/ \ $$$| $$| $$ | $$_____/| $$\ $ | $$| $$ | $$| $$ | $$_ $$
[0] | $$/ \ $$| $$| $$ | $$$$$$$| $$ \/ | $$| $$$$$$/| $$$$$$$| $$ \ $$
[0] |__/ \__/|__/|__/ \_______/|__/ |__/ \______/ \_______/|__/ \__/
[0]
[0] port: 8080
[0] enable-browser-proxying: false
[0] no-request-journal: false
[0] verbose: false
[0]
[1] Browserslist: caniuse-lite is outdated. Please run:
[1] npx update-browserslist-db@latest
[1] Why you should do it regularly: https://github.com/browserslist/update-db#readme
[1] (node:25996) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[1] (Use `node --trace-deprecation ...` to show where the warning was created)
[1] (node:25996) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[1] Starting the development server...
[1]
[1] Compiled successfully!
[1]
[1] You can now view timesheet-manager in the browser.
[1]
[1] Local: http://localhost:3000
[1] On Your Network: http://192.168.0.209:3000
[1]
[1] Note that the development build is not optimized.
[1] To create a production build, use npm run build.
[1]
[1] webpack compiled successfully
[0] 2024-05-31 22:58:25.117
[0] Request was not matched
[0] =======================
[0]
[0] -----------------------------------------------------------------------------------------------------------------------
[0] | Closest stub | Request |
[0] -----------------------------------------------------------------------------------------------------------------------
[0] |
[0] POST | POST
[0] /v1/auth/login | /v1/auth/login
[0] |
[0] { | { <<<<< Body does not match
[0] "email" : "<email>", | "email" : "<email>",
[0] "password" : "<password>" | "password" : "<password>"
[0] } | }
[0] |
[0] -----------------------------------------------------------------------------------------------------------------------
1 Like
Thanks for replying, I get a slight difference at the end
markingram@Marks-Air mot-cert-support-app-js % npm start
> timesheet-manager@0.1.0 start
> concurrently --kill-others "cd mocks && java -jar wiremock-standalone.jar --port 8080" "react-scripts start"
[0] SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
[0] SLF4J: Defaulting to no-operation (NOP) logger implementation
[0] SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.
[1] Browserslist: caniuse-lite is outdated. Please run:
[1] npx update-browserslist-db@latest
[1] Why you should do it regularly: https://github.com/browserslist/update-db#readme
[0] /$$ /$$ /$$ /$$ /$$ /$$
[0] | $$ /$ | $$|__/ | $$$ /$$$ | $$
[0] | $$ /$$$| $$ /$$ /$$$$$$ /$$$$$$ | $$$$ /$$$$ /$$$$$$ /$$$$$$$| $$ /$$
[0] | $$/$$ $$ $$| $$ /$$__ $$ /$$__ $$| $$ $$/$$ $$ /$$__ $$ /$$_____/| $$ /$$/
[0] | $$$$_ $$$$| $$| $$ \__/| $$$$$$$$| $$ $$$| $$| $$ \ $$| $$ | $$$$$$/
[0] | $$$/ \ $$$| $$| $$ | $$_____/| $$\ $ | $$| $$ | $$| $$ | $$_ $$
[0] | $$/ \ $$| $$| $$ | $$$$$$$| $$ \/ | $$| $$$$$$/| $$$$$$$| $$ \ $$
[0] |__/ \__/|__/|__/ \_______/|__/ |__/ \______/ \_______/|__/ \__/
[0]
[0] port: 8080
[0] enable-browser-proxying: false
[0] no-request-journal: false
[0] verbose: false
[0]
[1] (node:2163) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[1] (Use `node --trace-deprecation ...` to show where the warning was created)
[1] (node:2163) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[1] Starting the development server...
[1]
[1] Compiled successfully!
[1]
[1] You can now view timesheet-manager in the browser.
[1]
[1] Local: http://localhost:3000
[1] On Your Network: http://192.168.0.67:3000
[1]
[1] Note that the development build is not optimized.
[1] To create a production build, use npm run build.
[1]
[1] webpack compiled successfully
[0] 2024-06-03 07:47:41.476
[0] Request was not matched
[0] =======================
[0]
[0] -----------------------------------------------------------------------------------------------------------------------
[0] | Closest stub | Request |
[0] -----------------------------------------------------------------------------------------------------------------------
[0] |
[0] POST | POST
[0] /v1/auth/login | /auth/login <<<<< URL does not match
[0] |
[0] { | { <<<<< Body does not match
[0] "email" : "<email>", | "email" : "<email>",
[0] "password" : "<password>" | "password" : "<password>"
[0] } | }
[0] |
[0] -----------------------------------------------------------------------------------------------------------------------
1 Like
So I am not sure why your URL would be different. Did you try logging in via the UI or did you send an API Request in directly yourself?
Confirm request sent via DevTools Network tab after a login request is made via UI.
1 Like
Very unusual. I’ve been unable to reproduce this myself. What url are you using to load the application up in the UI?
Also could you share a screenshot of your Network so I can see what’s happening.
1 Like
Thanks Mark.
I’ve been using http://localhost:3000/ which launches when I run npm start
Screenshot
is here:
1 Like
Could you click on the 404 network call and screenshot what is being sent?
1 Like
Ok, that looks like it is sending the request to the correct endpoint. Could you send me a screenshot of what is inside the Payload tab?
1 Like
1 Like
It’s odd that the stub is saying that the URL doesn’t match, but the URL used in the request is correct.
Ok. So I what I’d like to do is attempt to run the request against my code base. To do this I will need you to copy the request in the network tab as a Curl command and post it on here for me to use. You can do this by right clicking on the failing request and selecting Copy > Copy as Curl.
Reference on how to do it can be found here: MW Test Consultancy | Quick copying HTTP requests from Developer tools to Postman
3 Likes
@markingram84 another option would be if you could share your GitHub repo of this project I could take a look.
Hey Mark
I think this is what you are after?
curl ‘http://localhost:3000/v1/auth/login’
-H ‘Accept: application/json, text/plain, /’
-H ‘Accept-Language: en-GB,en-US;q=0.9,en;q=0.8’
-H ‘Connection: keep-alive’
-H ‘Content-Type: application/json’
-H ‘Cookie: language=en; welcomebanner_status=dismiss; continueCode=2aylwmYZkB6JKW5OPp7NMd8BtYfQ5uLJtnrINP0Do9LzE1Q8bXnr3RjvxqeV; cookieconsent_status=dismiss’
-H ‘Origin: http://localhost:3000’
-H ‘Referer: http://localhost:3000/’
-H ‘Sec-Fetch-Dest: empty’
-H ‘Sec-Fetch-Mode: cors’
-H ‘Sec-Fetch-Site: same-origin’
-H ‘User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36’
-H ‘sec-ch-ua: “Google Chrome”;v=“125”, “Chromium”;v=“125”, “Not.A/Brand”;v=“24”’
-H ‘sec-ch-ua-mobile: ?0’
-H ‘sec-ch-ua-platform: “macOS”’
–data-raw ‘{“email":"admin@test.com”,“password”:“password123”}’
This is my repo link here (ignore the many attempts at GitHub actions )
@markingram84 so this is a weird one for sure. I can see you are 2 commits behind the forked repo but neither of them appear to be the issue.
The issue you have is with this file - mot-cert-support-app-js/src/setupProxy.js at trunk · markingram84/mot-cert-support-app-js · GitHub
You need to update the code to
const { legacyCreateProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/v1',
legacyCreateProxyMiddleware({
target: 'http://127.0.0.1:8080',
changeOrigin: true,
})
);
};
I have no idea why GitHub doesn’t flag this as different from the forked repo and I can see from your commits you didn’t touch it 
Hopefully that gets you moving forward at least 
2 Likes
Adam, you are a hero!!!
@mwinteringham Adam’s post above helped me get going again. Thanks!
3 Likes