Shopping Cart - Instructions

About Shopping Cart Application

This is a simple shopping cart. A user can anonymously browse the site, adding items to their cart.

During the checkout process the user will be prompted to login. The username and password values are all described on the login page and provided you stick to the conventions listed, you will be able to login as that user.

Once logged in, the user can confirm the order during the checkout process to move the order to accepted status.

The UI has the following features.

Product List Page:

• product list page which shows short descriptions, price, etc.
• product list page has navigation buttons for moving through the pages of products
• add to cart from product list page
• view more details from the product list page by navigating to the product view page

Product View Page:

• add to cart from the product view page
• the product view page shows the full description of the product

Cart Page:

• the cart page shows the items in the users cart
• you can adjust the number of items in the cart
• totals are refreshed on the cart page when amending cart contents

Checkout Flow:

• a cart is submitted to the Checkout flow to create an order
• a user will see orders in the user page
• an order will be in state ‘open’ until it is confirmed during the checkout flow
• when an order is confirmed it will move to state ‘accepted’ on the server

User Page:

• once a user is logged in, they can view the orders they have made which are recorded in the system
• a user can delete an ‘open’ order from their orders page using the user management web front end

Overview

Dev Tools

The Shopping Cart application has to maintain state.

Some state is stored on the server e.g. the user login session, open and accepted orders.

Other state, like the shopping cart is stored in the browser.

You’ll see the state in the Cookies, LocalStorage and SessionStorage of the dev tools.

API

We pride ourselves on building the application ‘API First’. This means that all the features of the web application are available through the API.

The API is documented via the Open API (Swagger) file, and you can interact with the API via the Swagger interface.

• Swagger UI

You can download the Open API file to use in an API client of our choice:

• Open API File

Automated Execution

Automate:

• the UI
• the API

The application UI is constructed using a Javascript populated DOM from API calls, so you’ll find that you need to synchronize on the UI being ready for use if you want your automated execution to be reliable.

Since the application is heavily ‘content’ based, and we have a CMS, the titles and descriptions of the items might change, so you might not want to hard code titles, but instead aim for consistency between pages e.g. call the product API to get current details of the product and then check the title shown is that from the API. Or check that the title as ‘some content’.

When automating content heavy applications you have to be careful that you don’t make the tests hard to maintain just because users have amended the content, or new products have been added.

Exploratory Testing

The application has a lot of interaction and state management making it suitable for Exploratory Testing.

Try exploring the REST API as well.

There are a lot of nuances to explore with this application.

Security Testing

Because this application has the concept of Users and User Logins, it is very suitable for security testing.

We’ve designed the application so that you cannot enter any of your personal data (that’s why the user creation and login flow is designed the way it is). So feel free to see what data is exposed, what security controls are in place and see how secure the application is.

If this was a real shopping cart, you really wouldn’t want to order anything from it due to security reasons, despite the products looking absolutely incredible.