Simple Shop HTML JS setup tested with Cypress

I’ve created a Simple Shop setup with HTML and JavaScript with the purpose of testing it with Cypress. You may find the code sources here: https://github.com/NoToolsNoCraft/Simple-shop-HTML-JS-setup-tested-with-Cypress

Table of Contents

Website basic setup

This test website contains the following 3 pages:

Shop page (the first page) where the products should be added to the cart.
User proceed from the Shop page to the Checkout page after adding products to the cart. Here, the user has to fill in information regarding their name and address and choose a payment option.
If everything was properly filled in, the user should end up on the Success page.

What I will test here is does the user can easily navigate back and forth with following these rules:

If no product is selected, the user shouldn’t be able to proceed.
If the user ends on the Checkout page and navigates back to the Shop page, the selected products should remain; they shouldn’t disappear.
The user cannot proceed if all requested fields aren’t filled in.

This Cypress test script covers the following features:

Checking for empty cart validation on the shop page: It ensures that an error message appears and the user cannot proceed to checkout if the cart is empty.
Adding products to the cart: It tests adding one of each product to the cart and checks that the total number of items in the cart is correct.
Validating total price: It calculates the total price of the products added to the cart and checks that the displayed total price matches.
Proceeding to checkout with products: It tests that the user can proceed to the checkout page when there are products in the cart.
Removing all products on the checkout page: It removes all products on the checkout page, checks for an error message, and ensures the user cannot proceed to the success page. It also checks the functionality of the “Back to the shop” button.
Filling out the form and proceeding to the success page: It adds products to the cart again, proceeds to the checkout page, fills out the form, selects the payment method, and checks that the success page displays the correct information.