/cypress-checkout-test-deprecated

This repo contains Cypress tests for login and cart checkout assertions with the "Automation practice" e-commerce store to showcase the Cypress Test Framework.

Primary LanguageJavaScript

E-commerce Checkout Test to showcase Cypress.io as a Test Framework

This repo contains Cypress tests for login and cart checkout assertions with the (Now Deprecated /offline) "Automation practice" e-commerce store to showcase the Cypress Test Framework.

Project information

This project contains two Cypress functional journey tests for multiple specs to verify:

  1. Log in check for Automation Practice e-commerce store (A sanity run to verify valid login credentials to be used for test 2 and other specs).
  2. Log in to the Automation Practice e-commerce store:
  • Search for the item "Printed Summer Dress"
  • Select the cheapest dress
  • Change the quantity from 1 to 2
  • Change the size from S to M
  • Change the colour from Yellow to Green
  • Add the item to the cart
  • Proceed to the checkout cart page
  • Assert checkout cart page for the correct item: "Printed Chiffon Dress", size: "M", colour: "Green", quantity: "2" and cart price total equals: "$34.80".

This project has Cypress configs and code to showcase:

  • The use of Fixtures with test data support.
  • The use of Selectors support.
  • Screen capture support for all passed commands.
  • Mochawesome reporter for test run reporting.
  • Test run Video with compression support.
  • Failed test retry support.
  • Skipping tests support
  • Multiple specs run

Pre-requisites

  1. NodeJS installed.
  2. npm installed.

Setup

  1. Clone this repository or download the zip and extract it.
  2. Go to the extracted testdata file: cypress/fixtures/testdata.json.
  3. Enter your registered Automation practice email and password in testdata.json and save the file.
  4. Open your terminal to the root directory of the project (cypress-checkout-test) and run npm install command in the terminal/cli to install all dev dependencies.
  5. Run npm run {script option} to execute the tests in the cli:
  • npm run testWithBrowser: To run the tests headed (with a browser).
  • npm run testHeadless: To run the tests headless (without a browser).
  • npm run testWithBrowserNoExit: To run the tests headed and the Cypress runner will remain open after the test run completed (Test run video will keep recording until Cypress runner is closed/killed!).
  1. When the test run completed, a test results report will be generated in the cypress/reports/result.html/index.html path.

Expected (Successful - Retried - Skipped) test run samples:

  1. Successful Run with testWithBrowserNoExit- Cart checkout page in Cypress runner with Electron browser:

Cart checkout page in Cypress Electron browser runner with no testWithBrowserNoExit npm run

  1. Successful Run with testHeadless - Terminal/CLI with test results output:

Successful run from Terminal with passed test results output Successful run from Terminal with passed test results output Successful run from Terminal with passed test results output Successful run from Terminal with passed test results output

  1. Successful Run - Cypress Test Results from the HTML report with passed test results output:

Successful Run - Cypress Test Results HTML report with passed test results output

  1. Successful Run - Video recordings with no failures (no test retry)
  • cypress-checkout-test1-verify-valid-credentials-spec
4_1_cypress-checkout-test1-verify-valid-credentials-spec.cy.js.mp4
  • cypress-checkout-test2-e2e-checkout-journey-spec
4_2_cypress-checkout-test2-e2e-checkout-journey-spec.cy.js.mp4
  • cypress-checkout-test3-all-tests-in-1-spec- 1 test skipped
4_3_cypress-checkout-test3-all-tests-in-1-spec.cy.js.mp4
  1. Successful Run - Video recording with failed tests retried
  • cypress-checkout-test3-all-tests-in-1-spec- no test set to skip
Cypress_Video_with_failures_retries.mp4

Gotchas

  1. npm install Node package install hangs for about 5 mins then gives ECONNRESET network error.
Npm install : FetchError: request to http://registry.npmjs.org/... failed, reason: read ECONNRESET

Troubleshooting to resolve the npmjs FetchError:

  • Could be your internet connection: Hotspot/tether/connect to a reliable internet connection and re-run npm install to see if it still fails or...
  • Add a host entry for registry.npmjs.org: ping registry.npmjs.org to obtain the IP address then update /etc/hosts with the IP address E.g. 104.16.20.35 registry.npmjs.org and re-run npm install or...
  • Run npm config edit and clear out the .npmrc file, save it and clean out the cache with npm cache clean -f then re-run npm install or...
  • Could be a proxy issue in your network that needs to be resolved - reference npm config docs to configure proxy settings.

Future work planned - TODOs

  1. Using a cookie to emulate logged on session state.
  2. Implement cypress-image-compare pixel diff tests.
  3. Docker containerisation to package the forked "Automation practice" app into a container allowing Cypress tests to run in and against the local docker instance.
  4. Cypress test kicked off/run with Jenkins or Circle CI.
  5. Database integration to showcase test run setups and tear downs.
  6. Create a containerised workflow with docker and openshift Or Azure Or Amazon ECS.
  7. Improve Building the project in NodeJS with npm and grunt.