This article is tailored for individuals possessing a robust understanding of automation testing methodologies, particularly in the context of testing Angular applications using frameworks such as Protractor. The technical content covered herein delves into specific testing strategies and implementations, which may require familiarity with web development technologies and testing frameworks.
The content provided in this case study focuses on optimizing bulk data management within a Pharma manufacturing application utilized by pharmaceutical drug production companies. It outlines a comprehensive testing validation process for grid data manipulation functionalities like:
- Selective Row Manipulation: Enables users to select or deselect specific data rows in the grid interface through checkboxes linked to corresponding grid data entries.
- Comment Annotation: Allows users to add comments to specific data entries within the grid using the comment icon, improving data context and collaboration.
- Actionable Grid Buttons: Simplifies user interactions by allowing the selection and activation of grid buttons to initiate further operations or actions related to the displayed data.
- Nested Grid Expansion: Improves data exploration by offering the ability to expand nested grids, uncovering additional data insights hidden within main grid entries.
- Data Analysis Comparison: Empowering users to perform comparative analysis of data entries within the grid interface, facilitating informed decision-making and insights generation.
Technical Prerequisites: Readers are expected to have prior knowledge and experience in software testing, particularly in the domain of web application testing and automation. Proficiency in JavaScript, AngularJS, and Protractor framework is assumed for a thorough comprehension of the discussed concepts and methodologies.
Introduction
The primary objective of this article is to elucidate the testing procedures and strategies employed in ensuring the reliability, accuracy, and performance of bulk data management functions. The insights provided herein aim to cater to the needs of technical professionals and stakeholders involved in software development and quality assurance processes.
Furthermore, the article serves as a valuable reference for software development projects beyond the scope of bulk data management in “Data-validation reliant applications”. It offers insights into code structure, reusability, readability, and maintainability aspects, which can be leveraged to enhance the overall efficiency and effectiveness of software development practices.
Benefits of code abstraction
Below is an excerpt of several code blocks whose main purpose is to provide an abstract way of handling the Grids automated testing for our specific project.
Having such an abstraction has several benefits:
- Enhanced reusability: By encapsulating common functionalities within abstracted code blocks, developers can easily reuse these components across multiple testing scenarios and projects, thereby reducing redundancy and promoting code efficiency.
- Improved readability: Abstracting complex testing logic into modularized code blocks enhances code readability, making it easier for developers to understand, maintain, and debug the testing suite.
- Simplified maintenance: Abstracted code promotes a modular approach to testing, facilitating seamless updates and modifications as project requirements evolve. This ensures that the testing suite remains adaptable and maintainable throughout the software development lifecycle.
- Facilitated collaboration: Standardized code abstractions foster collaboration among team members by providing a common framework for implementing and executing automated tests. This promotes consistency in testing practices and accelerates the overall testing process.
In a Drug manufacturing application used by pharma production companies, there’s a critical need to manage data efficiently in grids. This includes selecting specific data rows for analysis or further manipulations, adding comments, comparing data between rows, validating expected data and clearing outdated records.
To automate and validate these tasks, we’ll implement a set of functions using Protractor, a testing framework for AngularJS applications.
Suite of sub functions
In this section, we delve into a collection of specialized functions designed to streamline the process of grid data manipulation in bulk data management applications. These sub-functions are integral to automating tasks such as:
- selecting rows
- adding comments
- clearing data
This process enhances the efficiency and accuracy of data operations within pharmaceutical and clinical trial management systems. Each function is tailored to handle specific actions within the grid interface, ensuring that users can interact with and manipulate data seamlessly.
Fig.1 Grid View with all web elements 1st and 2nd related to suites of sub functions.
1. performSelectAction
In the columns fig.1, we can see the performSelectAction function, which clicks on the input element in the specified column or row. This function takes a Protractor elementArrayFinder representing the columns or rows in the grid and initiates a click action on the first input element. It then waits for the progress bar to become stale, ensuring the grid is ready for the next operation.
Description: Clicks on the input element in the specified column/row.
Parameters:
Columns: A Protractor elementArrayFinder representing the columns/row in the grid.
performSelectAction: function (columns) {
columns.first().$('input').click();
browser.wait(protractor.ExpectedConditions.stalenessOf($('mat-progress-bar[mode="indeterminate"]')), env.maxDcpLoad, 'Waiting error in nested grid');
},2. performCommentAction
In the columns fig.1, we can see the performCommentAction function, which clicks on the comment icon in the specified column or row. This function is essential for adding comments to specific data entries, enhancing data context and collaboration.
Description: Clicks on the comment icon in the specified column/row.
Parameters:
Columns: A Protractor elementArrayFinder representing the columns/row in the grid.
performCommentAction: function (columns) {
columns.last().$('i').click();
// Add wait here if needed
},
3. performLastButtonClick
In the columns fig.2, we can see the performLastButtonClick function, which clicks on the last button in the specified column or row. This function simplifies user interactions by automating the activation of buttons related to further operations on grid data.
Description: Clicks on the last button in the specified column/row.
Parameters:
Columns: A Protractor elementArrayFinder representing the columns/row in the grid.
performLastButtonClick: function (columns) {
columns.last().$('button').click();
browser.wait(protractor.ExpectedConditions.elementToBeClickable($('.mat-menu-content'), module.parent.exports.maxDcpLoad, 'Menu is not visible'));
},
Fig.3 Grid View with all web elements 4th and 5th related to suites of sub functions.
4. performSubSelect
In the columns fig.3, we can see the performSubSelect function, which clicks on the element in the second position of the specified column or row. This function is particularly useful for nested grid expansions, allowing users to explore additional data insights.
Description: Clicks on the element in the second position in the specified column/row.
Columns: A Protractor elementArrayFinder representing the columns in the grid.
performSubSelect: function (columns) {
columns.get(1).click();
browser.wait(protractor.ExpectedConditions.stalenessOf($('mat-progress-bar[mode="indeterminate"]')), env.maxDcpLoad, 'Waiting error in nested grid');
},5. performGridDataCompare
In the columns fig.3, we can see the performGridDataCompare function, which compares the text content of all elements in the specified column. This function is vital for performing comparative analysis of data entries, aiding in informed decision-making.
Description: Compares the text content of all elements in the specified column.
Columns: A Protractor elementArrayFinder representing the columns in the grid.
performGridDataCompare: function (columns) {
return new Promise((resolve) => {
resolve(columns.map(async function (element) {
return await element.getText()
}));
});
},
Fig.4 Grid View with all web elements 6th related to suites of sub functions.
6. performClearData
In the columns fig.4, we can see the performClearData function, which checks for a specific element’s presence and, if found, waits for the “Clear Data” button to become clickable. This function then clears the relevant data, ensuring the grid remains up-to-date with only current entries.
Description: This function checks if a specific element of a table is present and if it is present, then the function waits for the “Clear Data” button to become clickable after that is performing clear actions by clicking on button.
Columns: A Protractor elementArrayFinder representing the columns in the grid.
performClearData: function (columns, sensor, type) {
let self = this
columns.get(1).$('span.table-icon-font').isPresent().then(present => {
if (present) {
browser.wait(EC.elementToBeClickable(element(by.cssContainingText("button", "Clear Data"))), env.maxDcpLoad);
browser.executeScript('arguments[0].scrollIntoView(true)', element(by.cssContainingText("button", "Clear Data")).getWebElement());
element(by.cssContainingText('button', 'Clear Data')).click();
browser.wait(protractor.ExpectedConditions.visibilityOf($('app-point-details-tables').element(by.cssContainingText('tbody', 'No records available.')), module.parent.exports.maxDcpLoad));
} else {
browser.wait(EC.elementToBeClickable(element(by.cssContainingText("button", "Clear Data"))), env.maxDcpLoad);
browser.executeScript('arguments[0].scrollIntoView(true)', element(by.cssContainingText("button", "Clear Data")).getWebElement());
}
});
},Core Grid Function
Fig.5 Grid View of main core functionality.
Legend:
- Checkbox Selection: Choose checkbox based on column and cell values.
- Column Selector: Identify column designated as ‘selector’.
- Action Function: Execute action using predefined function.
- Target Locator: Element locator for grid/table.
The batchGrid function is a utility designed to facilitate bulk data management operations within web applications. It offers a flexible interface for performing various actions on data displayed in a tabular format.
Parameters(fig.5):
- click_batch_ids: An array of all record IDs that are selected in the UI by the User and that will be used in the “mass operation.
- selector: Optional. The column header selector used to identify the column containing batch IDs. Default value is ‘BatchID’.
- action: Optional. The action to be performed on the bulk data. Possible values include ‘select’, ‘comment’, ‘lastButton’, ‘compareGridData’, and ‘clearData’. Default value is ‘select’.
- target: Optional. The target table element where bulk data is displayed. Default value is $(‘app-process-table’).
- sensor: Optional. The sensor type used for data operations. Default value is ‘PH.PV’.
type: Optional. The type of data operation. Default value is ‘Absolute’.
Actions:
- Select: Clicks on the input element of the first column of the selected grid data row.
- Comment: Clicks on the icon element in the last column of the selected grid data row.
- Last Button: Clicks on the button element in the last column of the selected grid data row.
- Compare Grid Data: Retrieves and resolves the text data from all columns of the selected grid data row.
- Clear Data: Clears data associated with the selected grid data using the provided sensor variable as specific data and type variable as specific data.
batchGrid: function (click_batch_ids, selector = 'BatchID', action = 'select', target = $('app-process-table'), sensor = 'PH.PV', type = 'Absolute') {
return new Promise((resolve, reject) => {
let batchid_col = null;
target.$$('th.k-header').each(function (element, index) {
element.getText().then(function (text) {
if (text == selector) {
batchid_col = index;
}
});
});
browser.controlFlow().execute(function () {
browser.executeScript('arguments[0].scrollIntoView(true)', target.getWebElement());
});
let allRows = target.$$('table tbody tr');
let self = this;
allRows.count().then(function (count) {
for (let index = 0; index < count; index++) {
allRows.get(index).$$('td').get(batchid_col).getText().then(text => {
let elementIndex = click_batch_ids.indexOf(text);
if (elementIndex > -1) {
let columns = allRows.get(index).$$('td');
if (action == "select") {
self.performSelectAction(columns);
} else if (action == "comment") {
self.performCommentAction(columns);
} else if (action == 'lastButton') {
self.performLastButtonClick(columns);
} else if (action == 'compareGridData') {
self.performGridDataCompare(columns).then((data) => {
resolve(data)
})
} else if (action == 'clearData') {
self.performClearData(columns, sensor, type);
}
}
});
}
});
});
}Conclusion
By incorporating testing validation into the development process, we guarantee the reliability and accuracy of bulk data management functions. Through thorough testing, we aim to ensure these functions contribute to a Data Computation application that meets the highest standards of quality and user satisfaction.
It’s important to note that all selectors and code developed throughout this case study are tailored for this specific Angular application. However, the principles and code structures demonstrated herein can serve as a valuable reference for similar projects, offering insights into code structure, reusability, and maintainability.
Through testing and adherence to best practices in software development, this case study provides a blueprint for implementing robust and efficient bulk data management solutions in “Data-validation reliant applications” and beyond.
Viktor is Quality Assurance manager, responsible for the QA team. With 8 years of experience, his knowledge and expertise in testing Validated systems in pharmaceutical and clinical trials management systems gives him the confidence to consult out clients in the best practices, ensuring the delivery of the validated product.
