Set up your local nopCommerce with Docker to resolve the Cloudflare issue

[UPDATED October 2024]

The Problem

We are experiencing a problem with the Cloudflare security check when using the?nopCommerce Store Live Demo.?This check is meant to confirm that the user is human and to prevent spam requests on the website. However, it is interfering with the test scripts.

Because of this, we will install nopcommerce on our local machine to address this challenge.

Let's proceed step by step together.

What is nopCommerce?

nopCommerce?is the most popular ASP.NET Core shopping cart in the world based on Microsoft technologies.

nopCommerce is a fully customizable shopping cart. It's stable and highly usable based on the latest eCommerce development technologies and services:

• Support for the latest .NET versions makes nopCommerce a cross-platform solution, meaning it can be developed and run on Windows, Linux, or macOS. The latest nopCommerce release is based on .NET 7.
• nopCommerce can be easily connected to different database engines - Microsoft SQL Server, MySQL, and PostgreSQL.
• nopCommerce supports Docker.
• nopCommerce users have full control over the source code of the eCommerce platform and can deploy nopCommerce however they want.

The Solution

If you are regularly testing nopCommerce, it might be better to set up a staging or local environment of the nopCommerce application to avoid Cloudflare interruptions.

What You Need:

1- Docker is installed on your machine you can follow this link for more details?https://docs.docker.com/install/

2- Git is installed on your machine you can download it from the following link?https://git-scm.com/downloads

3- You have an account on GitHub you can register for free if you don't have?https://github.com

Running nopCommerce in Docker

Open the local terminal on your machine and clone the repository with the following command:

git clone [email protected]:nopSolutions/nopCommerce.git        

3- Enter inside the project folder

cd nopCommerce        

After listing the files and subfolders inside the repository you will find that there is a?docker-compose.yml

version: "3.4"
services:
    nopcommerce_web:
        build: .
        container_name: nopcommerce
        ports:
            - "8010:80"
        depends_on:
            - nopcommerce_database
    nopcommerce_database:
        image: "mcr.microsoft.com/mssql/server:2019-latest"
        container_name: nopcommerce_mssql_server
        environment:
            SA_PASSWORD: "nopCommerce_db_password"
            ACCEPT_EULA: "Y"
            MSSQL_PID: "Express"

volumes:
  nopcommerce_data:         

In this file, you will notice that we will build 2 services:

• nopcommerce_web?for the website and it will be exposed on port 80 or localhost
• nopcommerce_database?for SQL database, you can also change it to MySQL or PostgreSQL

If you want to use MySQL, you can change the compose file to be like the following:

version: "3.4"
services:
    nopcommerce_web:
        build: .
        container_name: nopcommerce
        ports:
            - "8010:80"
        depends_on:
            - nopcommerce_database
    nopcommerce_database:
        image: "mysql:latest"  # Use the MySQL image
        container_name: nopcommerce_mysql
        environment:
            MYSQL_ROOT_PASSWORD: "nopCommerce_db_password"  # Set MySQL root password
            MYSQL_DATABASE: "nopcommerce"  # Name of the database to create
            MYSQL_USER: "nopcommerce_user"  # Optional: create a new user
            MYSQL_PASSWORD: "nopCommerce_user_password"  # Optional: password for the new user
        volumes:
            - nopcommerce_data:/var/lib/mysql  # MySQL data storage path

volumes:
  nopcommerce_data:        

For PostgreSQL, you can change the file to be like the following:

version: "3.4"
services:
    nopcommerce_web:
        build: .
        container_name: nopcommerce
        ports:
            - "8010:80"
        depends_on:
            - nopcommerce_database

    nopcommerce_database:
        image: "postgres:latest"  # Use the PostgreSQL image
        container_name: nopcommerce_postgres
        environment:
            POSTGRES_DB: "nopcommerce"  # Name of the database to create
            POSTGRES_USER: "nopcommerce_user"  # Create a new user
            POSTGRES_PASSWORD: "nopCommerce_user_password"  # Password for the new user
        volumes:
            - nopcommerce_data:/var/lib/postgresql/data  # PostgreSQL data storage path

volumes:
  nopcommerce_data:        

To build the docker images from the compose file you will run the following command:?

docker-compose up --build        

Access nopCommerce

Open your web browser and navigate to https://localhost:8010/. You should see the nopCommerce welcome page.

Configure nopCommerce

?Follow the on-screen instructions to complete the initial setup of nopCommerce, including setting up the database and configuring your store, more information can be found here?

After completing the installation, you may encounter this error when the application shuts down.

Don't worry, to stop the Docker container for the web, use Ctrl+C and then rerun it with the following command.

docker-compose up        

Alternatively, you can open Docker Desktop and start the container again if the status is?Exited as shown in the following image.

Refresh the home page to display it successfully. Since we previously selected Germany, the language and currency are set to German and Euro, but can be changed.

Additionally, you can access the Admin Portal to modify the configuration using the URL and credentials below.

https://admin-demo.localhost:8010/

Admin email:?[email protected]

Admin password: admin

Implement Test Automation

Select a testing framework that aligns with your automation goals such as Selenium WebDriver, Playwright, and Cypress.

Begin writing your test cases, focusing on critical functionalities within nopCommerce.

Examples include:

• User registration.
• Product search and filtering.
• Shopping cart operations.
• Checkout process

Here's a simple example to navigate to the home page using Playwright and Typescript

import { test } from '@playwright/test';

test.describe('User Registration', () => {
    test('should register a new user', async ({ page }) => {
        // Navigate to the nopCommerce home page
        await page.goto('https://localhost:8010');
    });
});        

For sure you can stop docker-compose clean the data and repeat the steps with the following command:

docker-compose down        

Conclusion

Setting up a practice website using nopCommerce and Docker provides a great opportunity to improve your test automation skills.

Following these steps can help you create a realistic environment to explore and experiment with various testing strategies and frameworks.

Thank you for reading and happy testing

Moataz