Software Testing is a process that is used to assess an application with the purpose to find whether the developed application meets the actual requirements and to identify any defects, errors to ensure a quality product that is free of such defects. There are many types of Software testing, but in this blog, our focus is on End-to-End ( E2E) testing.
E2E testing is a form of testing which tests the complete flow of the system from start to end to ensure that the developed system meets the expected requirements and the integration is sustained across various interconnected components.
Let's take an example of a Monthly sales report generation system. Here is a simple workflow of such system:
- Go to the report system link
- Enter your credentials and login
- Go to the generate report section
- Input date/year for which to generate the report
- Click on Generate Report button
- The system fetches the details for the specified month/year
- Generate and display the report in SpreadSheet
- Click save to download the report & Open in a SpreadSheet Editor
Though we would expect that this workflow will be smooth for the user, there are many systems at work. From the loading of the browser, authenticating the user via authentication server to ensuring month/year details are correct, fetching the report data from the server, generating and finally downloading the report. Any errors in the processing or transfer of information between these systems must be managed to ensure that the workflow is seamless.
E2E testing ensures that these workflows are validated, and information flow between these systems work as expected. With the increasing complexity of the integrated systems, E2E tests have become necessary to ensure quality and timely delivery.
Benefits of E2E tests
- Ensures correctness of the application
- Early detection of critical regressions
- Reduces cost and time
Tools and Frameworks for E2E tests
There are various E2E frameworks available for testing Web-based applications. Users can choose one based on the actual requirement of the project. Some of the frameworks to consider are:
- Cypress
- Protractor
E2E Testing of SpreadJS-based Applications
Most E2E testing frameworks and tools for Web Applications are dependent on DOM access. However, SpreadJS renders its content on HTML5 canvas, and hence E2E testing a SpreadJS application using the usual methods of DOM access would not be applicable. SpreadJS provides a rich API that could be used to interact with the workbook. This same API could also be used to write test cases for E2E tests. Since it is not opinionated about the E2E framework, this method can be used across E2E frameworks.
Below are the steps for writing E2E Tests for a Spread JS Application:
- Expose GC namespace on the Window Object
- Get the SpreadJS workbook instance to test
- Use the SpreadJS API to write E2E tests
Expose GC namespace on the Window Object
If users use nonmodular builds of SpreadJS and added SpreadJS in the application using script tags, then you may skip this step as GC namespace is already exposed on the window object by default. However, if you are using npm and used @grapecity/spread-sheets package to add the SpreadJS module, then you need to manually expose the GC namespace so that testing tools could access and use the SpreadJS API.
Add the following code in your main project, which is using SpreadJS:
// import SpreadJS
import * as GC from "@grapecity/spread-sheets";
// expose GC namespace on window object so that it could be used directly from window object during testing
window["GC"] = GC;
Get the SpreadJS workbook instance to test
Now that we have access to GC namespace and SpreadJS API, we could use the static method findControl() to get the Spread workbook instance.
For Cypress:
// get window object of application
appWindow = await cy.window();
// find spread instace
spread = appWindow.GC.Spread.Sheets.findControl(appWindows.document.querySelector(‘[gcuielement="gcSpread"]’));
For Protractor:
// find spread instance
browser.executeScript('window[“spreadInstance”] = GC.Spread.Sheets.findControl(document.querySelector(\‘[gcuielement="gcSpread"]\’))’);
Use the SpreadJS API to write your tests
The final step is to use the various methods exposed by SpreadJS API to write test cases.
For Cypress:
it("Content in Cell A1 of ActiveSheet should be 'Test application'", () => {
let activeSheet = spread.getActiveSheet();
let valInCellA1 = activeSheet.getValue(0, 0);
expect(valInCellA1).to.eq("Test application");
});
For Protractor:
var valInCellA1 = browser.executeScript('return window[“spreadInstance”].getActiveSheet().getValue(0, 0)’;
expect(valInCellA1).toEqual(“Test application”);
This was a brief explanation on how we can write E2E tests in SpreadJS applications. Please refer to the online SpreadJS documentation for more details on API. You can download the sample used in the blog from here.
Sharad Tomer