Amplify-console: cypress CI CD hangs during test phase

[BigTom]

Hi,

I am trying out the cypress cicd example here: https://aws.amazon.com/blogs/mobile/running-end-to-end-cypress-tests-for-your-fullstack-ci-cd-deployment-with-amplify-console/

I am probably doing something dumb but I cannot see it.

It provisions and builds OK and then, during testing it hangs. The last log lines are:

2020-04-13T10:34:06.772Z [INFO]: # Executing command: npm start & npx wait-on http://172.17.0.2/
2020-04-13T10:34:07.111Z [INFO]: > [email protected] start /codebuild/output/src631364407/src/amplify-cypress
                                 > react-scripts start
2020-04-13T10:34:08.610Z [INFO]: ℹ ｢wds｣: Project is running at http://172.17.0.2/
2020-04-13T10:34:08.611Z [INFO]: ℹ ｢wds｣: webpack output is served from
                                 ℹ ｢wds｣: Content not from webpack is served from /codebuild/output/src631364407/src/amplify-cypress/public
                                 ℹ ｢wds｣: 404s will fallback to /

The amplify.yml is here:

version: 0.1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
test:
  artifacts:
    baseDirectory: cypress
    configFilePath: '**/mochawesome.json'
    files:
      - '**/*.png'
      - '**/*.mp4'
  phases:
    preTest:
      commands:
        - npm ci
        - npm install wait-on
        - npm install mocha mochawesome mochawesome-merge mochawesome-report-generator
        - 'npm start & npx wait-on http://172.17.0.2/'
    test:
      commands:
        - 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
    postTest:
      commands:
        - npx mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json

I originally had the npx-wait-on to http//localhost:3000 but that seemed to just hang earlier:

2020-04-12T09:28:28.433Z [INFO]: # Executing command: npm start & npx wait-on http://localhost:3000
2020-04-12T09:28:28.751Z [INFO]: > [email protected] start /codebuild/output/src222334017/src/amplify-cypress
                                 > react-scripts start

Any help appreciated.

Thanks

Tom

[adriencg]

Hey @BigTom . Thanks for posting this issue. I'll look into whether or not the example is working and get back to you today or tomorrow.

Edit: Will hopefully find some time tomorrow (4/15) to set this up

[adriencg]

I was able to repro the issue following the tutorial guide you mentioned; should have a fix soon.

[adriencg]

Hey @BigTom,
This is a bug w/ our default boiler-plate. I'm pasting below the preTest/test/postTest that should fix it:

phases:
    preTest:
      commands:
        - npm ci
        - npm install -g pm2
        - npm install -g wait-on
        - npm install mocha mochawesome mochawesome-merge mochawesome-report-generator
        - pm2 start npm -- start
        - wait-on http://localhost:3000
    test:
      commands:
        - 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
    postTest:
      commands:
        - npx mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
        - pm2 kill

The main issue was that npm start was getting stopped as soon as it was sent to the background. This simply runs npm start within pm2 process manager, so that it doesn't get stopped (more info on why this happens: https://stackoverflow.com/questions/17621798/linux-process-in-background-stopped-in-jobs). Please give this a try, and if it doesn't work feel free to reopen this issue.

In the meantime, we're going to update the default test phases that Amplify provides you, and ensure the guide is up-to-date as well.

[keponk]

@adriencg the boilerplate here allowed tests to run after half a day of trying to figure this out. Would be great of documentation could be updated in some of the official docs:

• https://aws.amazon.com/blogs/mobile/run-end-to-end-cypress-tests-for-your-fullstack-ci-cd-deployment-with-amplify-console/
• https://docs.aws.amazon.com/amplify/latest/userguide/running-tests.html

[jackscotti]

👍 on @keponk suggestion to update the docs as they're still outdated. I figured how to make cypress run correctly only thanks to this GitHub issue.