2.4.2 - Example test failing on GitHub Actions

Hi folks, bee working through the JS certification path and running into an issue where the Login.e2e test for the example app is failing when run in GitHub Actions , despite consistently passing locally.

It’s failing to locate the Projects card-title element after entering the account details and selecting the login button. The fact it can find the login fields and buttons ok suggest the app is running correctly at least for the initial login page, but I’m not sure if something is causing that second page to completely fail to load. The only thing that did stand out between the GitHub actions logs and when run in CI was that I saw no evidence of the Wiremock startup after running npm start on GitHub, I’m not sure if these logs are normally suppressed on that system and thus a red herring, but was half guessing it might not be running and returning the successful auth response needed to move onto the projects page.

Any advice as to how to resolve would be awesome, thanks :slight_smile:

Example logs from the GitHub Actions runs:

[0-0] 2024-03-14T15:54:51.929Z INFO webdriver: COMMAND findElement("css selector", "button")
[0-0] 2024-03-14T15:54:51.930Z INFO webdriver: [POST] http://0.0.0.0:54196/session/7c1f96eb45b57d211f72cb755bdb748a/element
[0-0] 2024-03-14T15:54:51.930Z INFO webdriver: DATA { using: 'css selector', value: 'button' }
[0-0] 2024-03-14T15:54:51.941Z INFO webdriver: RESULT {
[0-0]   'element-6066-11e4-a52e-4f735466cecf': 'f.179D2D91E16A1C820299777800429BA2.d.CE67DBBCBBDF69863E6BC66FFD26AA92.e.7'
[0-0] }
[0-0] 2024-03-14T15:54:51.944Z INFO webdriver: COMMAND elementClick("f.179D2D91E16A1C820299777800429BA2.d.CE67DBBCBBDF69863E6BC66FFD26AA92.e.7")
[0-0] 2024-03-14T15:54:51.944Z INFO webdriver: [POST] http://0.0.0.0:54196/session/7c1f96eb45b57d211f72cb755bdb748a/element/f.179D2D91E16A1C820299777800429BA2.d.CE67DBBCBBDF69863E6BC66FFD26AA92.e.7/click
[0-0] 2024-03-14T15:54:51.978Z INFO webdriver: RESULT null
[0-0] 2024-03-14T15:54:51.979Z INFO webdriver: COMMAND findElement("css selector", ".card-title")
[0-0] 2024-03-14T15:54:51.979Z INFO webdriver: [POST] http://0.0.0.0:54196/session/7c1f96eb45b57d211f72cb755bdb748a/element
[0-0] 2024-03-14T15:54:51.979Z INFO webdriver: DATA { using: 'css selector', value: '.card-title' }
[0-0] 2024-03-14T15:54:51.994Z INFO webdriver: RESULT {
[0-0]   error: 'no such element',
[0-0]   message: 'no such element: Unable to locate element: {"method":"css selector","selector":".card-title"}\n' +
2 Likes

Hi @spk

Could you try replacing the sleep 10 command with this command:

curl --head -X GET --retry 60 --retry-connrefused --retry-delay 1 http://localhost:3000

This can be used to wait for the app to start up in a more robust way. Rather than just waiting for ten seconds in hopes that it will be up in time.

Let me know how you get on and if it helps, I’ll add it into the course material.

1 Like

Hello @spk

It seems like the test is failing to locate the “.card-title” element after clicking the login button.
Check the application code to ensure that the “.card-title” element exists on the page you are navigating to after logging in.
Also, If the “.card-title” element is dynamically generated or loaded asynchronously, ensure that your test script waits for the content to be fully loaded before attempting to locate the element.

Hi sorry for the delayed response, been a hectic week. I did give that a try and unfortunately it still seems to be failing at the same step. I can see from another thread that the same steps did help another user to get theirs passing.

Checking the two yml files on the respective forks ( mot-cert-support-app-js/.github/workflows/build_test_react.yml at trunk · Ken0310/mot-cert-support-app-js · GitHub and mot-cert-support-app-js/.github/workflows/build_test_react.yml at main · K10hrn/mot-cert-support-app-js · GitHub) there seems to be very little difference. So thinking the issue must be elsewhere :thinking:

This was the last run on my fork:

Hi @spk

So I’ve been taking a look at this and I’m honestly stumped as to why it doesn’t work. This might seem like a bit of a cop out request, but could you try re-running the build and see if it passes upon a second run?

Hey Mark, yeah I’ll give it another shot, I’ve given it a few already but we all know how temperamental CI runs can be :sweat_smile: I’ll rerun with the debug logging enabled too in case that flags anything up

EDIT: Woot! :partying_face: Worked this time for Unknown CI Reasons :tm: Update sleep command in CI · Ken0310/mot-cert-support-app-js@34d029e · GitHub
Thanks for the help!

3 Likes

Hey @mwinteringham , I replaced the sleep 10 command with your suggestion, but am still getting the same issue. I ran it twice, just to make sure. Here’s my .yml file: mot-cert-support-app-js/.github/workflows/build_test_react.yml at trunk · CassandraHL/mot-cert-support-app-js · GitHub Any other ideas to try?

Looking at your pipeline I would say that changing out the command has worked because I can see one test has passed, but the other has not. Try putting await browser.pause(2000) before that call for .card-title to see if the test is moving too quickly before the login process is complete.

Thanks @mwinteringham . I added it, but I’m still getting the same error. And it’s still passing fine when I run it locally.

@cassandrahl I had a play with your project and had some success. I replaced runs-on in the GitHub workflow file from windows-latest to ubuntu-latest and that caused the tests to pass on a forked version of your repo. I’m not entirely sure why it would be the case that windows fails but ubuntu passes, but I’d recommend sticking with linux for GitHub Actions as they tend to be less bloated and more performant OS for infrastructure pipelines.

2 Likes

@mwinteringham Darn, ChatGPT did suggest that, but I was hoping for a more satisfying solution that would let me keep things as close to the example as possible. But I ran the pipeline three times with that, and it passed every time! So thanks for your help.