Turn your manual testers into automation experts Request a Demo Start testRigor Free

BigCommerce Testing

BigCommerce is a leading e-commerce platform that provides Software as a Service (SaaS) to business owners and retailers. BigCommerce helps retailers set up and operate online stores with little time and efficiency. A few features BigCommerce offers are customizable templates, robust product management, integrated payment processing, search engine optimization (SEO), and marketing tools. Established in Sydney in 2009 by Eddie Machaalani and Mitchell Harper, BigCommerce has grown exponentially, serving different enterprises across the globe. SkullCandy, Toyota, and Travelpro are a few companies that use the BigCommerce e-commerce platform.

BigCommerce uses PHP for server-side scripting, JavaScript for front-end development, and HTML for CSS for UI design. Like any other e-commerce platform, BigCommerce platforms also need thorough testing.

This article discusses the different testing types and related tools to test BigCommerce platform.

Unit testing
Integration testing
End-to-end testing

Unit Testing

It’s always good to test the application at a low level. We know the cost of the bug increases exponentially as the application grows. That’s why the developers and testers give much importance to unit testing. Unit testing is the starting phase of testing, where we test the individual unit of the application, which can be a function, module, or code snippet separately.

In BigCommerce applications, as the server-side scripting is done in JavaScript, the commonly used unit testing framework tool is Jest.

Jest

Jest is a widely used unit testing framework for JavaScript and React applications. Jest is built on top of Jasime, a popular BDD tool. We are not going in-depth about Jest here, read an informative article about Jest Testing.

For unit testing BigCommerce applications, we can write test scripts once we install and configure the Jest framework. The test files will be kept at the exact location along with the application files. The difference is that the test files will have the extension “.test.js” or “.spec.js”.

Let’s see a sample script written in the Jest framework; this is for the JavaScript function for calculating the product’s total price after applying the discount. The application file name is priceCalculation.js and the corresponding test file name will be priceCalculation.test.js.

// priceCalculation.test.js

const calculateTotalPrice = require('./priceCalculation');

describe('calculateTotalPrice', () => {
  test('calculates the correct total price with a discount', () => {
    const price = 100;
    const discount = 20; // 20%
    const expectedTotal = 80; // 20% off of 100

    expect(calculateTotalPrice(price, discount)).toBe(expectedTotal);
  });

  test('throws an error for invalid discount values', () => {
    const price = 100;
    const discount = -10; // Invalid discount

    expect(() => calculateTotalPrice(price, discount)).toThrow("Invalid discount value");
  });
});

Along with Jest, we can use Chai mainly for creating assertions, Sinon.js for creating spies, stubs, and mocks, and Karma, which is used as a test runner for the scripts.

Integration Testing

As we pass unit testing, the next testing phase is integration testing. Here, the unit-tested modules or components are integrated and tested to ensure the integration doesn’t break any functionality, or in other words, after the integration, the components work harmoniously.

For BigCommerce applications, we can do integration testing in two ways –

UI Integration Testing
API Integration Testing

For UI integration testing, we can use tools like Cypress or Selenium; for API, we use tools like Postman or Supertest.

Cypress

Cypress is a JavaScript-based web automation tool for integration and end-to-end testing. Cypress uses Mocha’s BDD syntax and JavaScript for scripting. Cypress has a futuristic Dashboard that provides a detailed report of the test execution with detailed logs and screenshots.

Cypress supports integration testing for BigCommerce applications. So, to start with, we need to install and configure Cypress. This is pretty easy using node commands. Once the configuration is done, we can start creating test scripts. So, the test files are to be kept in the path cypress/integration folder.

Once test scripts are written, we can execute and view the results in Cypress Dashboard. Now, let’s see a Sample Cypress script.

describe('BigCommerce Storefront Test', () => {

  it('should allow a user to search for a product, add it to the cart, and proceed to checkout', () => {

    // Visit the homepage
    cy.visit('https://yourbigcommercestore.com');

    // Search for a product
    cy.get('input[name="search_query"]').type('product name{enter}');

    // Assert that search results are displayed
    cy.contains('Search Results').should('be.visible');

    // Click on the first product in the search results
    cy.get('.productGrid').find('.card').first().click();

    // Add the product to the cart
    cy.get('button#form-action-addToCart').click();

    // Go to the cart page
    cy.visit('https://yourbigcommercestore.com/cart.php');

    // Assert the cart contains the product
    cy.get('.cart-item').should('contain', 'product name');

    // Assert that we are on the checkout page
    cy.url().should('include', '/checkout');
  });
});

We have seen how UI integration tests work with Cypress. Let’s move on to API integration tests. Here, one of the fast-growing test automation tools is Supertest.

Supertest

We selected Supertest because it is one of the most popular Node.js libraries for testing HTTP servers. Supertest also uses BDD syntax with the support of Mocha or Cucumber. Installing Supertest is the same as installing Cypress using node commands. Along with Supertest, we must install Mocha or Cucumber as supporting libraries.

For BigCommerce applications, we keep the test files in the same folder as the application files. If we use Mocha, the reports will be Mocha Awesome Reports; if it is Cucumber, they will be Cucumber Reports. Let’s review a test script.

// api.test.js
const supertest = require('supertest');
const app = require('../app'); // Import your Express app
const request = supertest(app);

describe('BigCommerce API Integration', () => {
  it('should fetch products from BigCommerce', async () => {

  const response = await request.get('/your-custom-route-that-calls-bigcommerce-api');

    expect(response.statusCode).toBe(200);
    expect(response.body).toHaveProperty('data');
    // Add more assertions based on your API response
  });

});

End-to-End Testing

End-to-end testing is customer-centric, where we test the application from an end-user perspective. How a customer approaches the website, navigates, checks out the item, and finally places the order. So, the whole flow is tested not as a tester but from the customer’s point of view. Here, more than test cases, use cases will be evaluated.

BigCommerce applications are more into e-commerce; this testing plays a crucial role. So, let us evaluate what tools can be used for E2E testing.

Selenium

As we know, Selenium is a legendary tool in web automation that has achieved great glory. Selenium is an open-source tool where anyone can take the code and modify the framework according to their requirement. Selenium supports integration with different third-party plugins and tools. Also, it supports test script secretion in most of the available scripting languages.

Even though Selenium has many limitations, one of them is the maintenance effort, as the Selenium test repository gets more complex as the number of automation test scripts increases. Another reason is the non-trustworthy execution results. If there is any change in DOM elements, the test case will fail, leading to a false positive bug.

So, it’s challenging to understand whether all the failures are bugs or script issues. We can say as per the current market trend, Selenium is not a preferred E2E tool. We are not mentioning any examples for Selenium, but you can refer here.

testRigor

Currently, there are a lot of web automation tools claiming the codeless automation slogan. But if we check that, we can understand they are not doing justice to what they claim. But one tool that stands out from others is testRigor. It is an innovative codeless automation tool with integrated generative AI. Let’s check what makes testRigor different.

One of the most commonly heard words is generative AI. It can generate test cases or data per the requirements in plain English. A huge difference compared to Selenium is that testRigor is independent of programming languages. Anyone without programming skills can also create or modify test scripts and execute them. testRigor supports creating test steps in parsed plain English.

Also, testRigor is independent of flaky XPaths; it has its own element locator strategy. We can understand that with the code snippet of a test case below.

open url "https://yourbigcommercestore.com"
enter stored value "UserName" into "User Name"
enter stored value "password" into "Password"
click "Sign in"
click “Purchase Orders”
click “Create New Purchase Order”
enter "John" into "Vendor Name"
enter "Vending Machine" into "Items to be Ordered"
enter "5" into "Items to be Ordered"
click "Submit"

If you see here, the elements are mentioned by the text seen or relative positions on the UI, making them more stable.

We have mentioned very few features of testRigor here, but you can check testRigor’s top features.

EndNotes

BigCommerce is used by both startups and huge enterprises. So, the application must be appropriately tested before releasing it to customers. This article covers all types of testing we can perform in BigCommerce applications and the tools that can be used for every kind of testing. Check your requirements and select a tool that meets them with minimum effort and results in productive output.

Join the next wave of functional testing now.

A testRigor specialist will walk you through our platform with a custom demo.

Request a Demo

Start testRigor Free