Dynamic Data Validation and Manipulation: A Reusable Automated Testing Framework

Abstract:

Audience Consideration: This case study 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.

Scope and Focus: The content provided in this case study focuses on optimizing data management within applications that utilize grid structures. It outlines a comprehensive testing validation process for grid data manipulation functionalities such as:

• Selective Row Manipulation: Enables users to select or deselect specific data rows in the grid interface through checkboxes/radio buttons 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, Angular, and Protractor/Playwright framework is assumed for a thorough comprehension of the discussed concepts and methodologies.

Keywords: Protractor, Playwright, Angular, Automation Testing, Quality Assurance

Introduction:

The primary objective of this case study is to elucidate the testing procedures and strategies employed in ensuring the reliability, accuracy, and performance and optimization of 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, this case study serves as a valuable reference for software development projects beyond the scope of data management optimization 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 which 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 many applications that utilize grid structures, there’s a critical need to manage data efficiently. This includes selecting specific data rows for analysis or further manipulations, adding comments, comparing data between rows, validating expected data, and more. To automate and validate these tasks, we’ll implement a set of functions using both Protractor, an older testing framework commonly used for Angular applications, and Playwright, a modern framework that supports multiple browsers and provides advanced features for end-to-end testing.

Comparison of Protractor and Playwright

Browser Support:

• Protractor: Primarily designed for Angular applications and supports Chrome and Firefox.
• Playwright: Supports multiple browsers including Chromium, Firefox, and WebKit, making it more versatile.

Ease of Use:

• Protractor: Requires more setup and configuration, especially for non-Angular applications.
• Playwright: Easier to set up and use, with a more modern API and better documentation.

Performance:

• Protractor: Can be slower due to its reliance on Selenium WebDriver.
• Playwright: Generally faster and more reliable due to its direct control over browser instances.

Features:

• Protractor: Built-in support for Angular-specific locators and synchronization.
• Playwright: Advanced features like auto-waiting, network interception, and multi-browser support.

Community and Support:

• Protractor: Older framework with a large community but declining support as Angular moves towards other testing solutions.
• Playwright: Growing community with active development and support from Microsoft.

Suite of Sub Functions

Fig.1 Grid View with all web elements 1^st and 2^nd related to suites of sub functions.

1. performSelectAction(columns1):

Description: Clicks on the input element in the specified column/row.

Protractor Implementation:

Playwright Implementation:

2. performCommentAction(columns1):

Description: Clicks on the comment icon in the specified column/row.

Protractor Implementation:

Playwright Implementation:

Fig.2 Grid View with all web elements related to 3^rd suite of sub functions.

3. performLastButtonClick(columns2):

Description: Clicks on the last button in the specified column/row.

Parameters:

Protractor Implementation:

Playwright Implementation:

Fig.3 Grid View with all web elements 4^th and 5^th related to suites of sub functions.

4. performSubSelect(columns3):

Description: Clicks on the element in the second position in the specified column/row.

Protractor Implementation:

Playwright Implementation:

5. performGridDataCompare(columns3):

Description: Compares the text content of all elements in the specified column.

Protractor Implementation:

Playwright Implementation:

Core Grid Function

Fig.5 Grid View of main core functionality.

Legend:

1. Checkbox Selection: Choose checkbox based on column and cell values.
2. Column Selector: Identify column designated as ‘selector’.
3. Action Function: Execute action using predefined function.
4. Target Locator: Element locator for grid/table.

The “gridManipulation” 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:

1. idValue: An array of values that you want to match against the text content of the cells in the specified column. If a cell’s text matches any value in this array, the specified action will be performed on that row.
2. columnHeader: A string representing the header of the column you want to search in. The default value is ‘Run’. This is used to find the index of the column in which to look for the “idValue”.
3. action: A string representing the action to perform on the matched rows. The default value is ‘select’. Possible actions could include ‘select’, ‘comment’, ‘lastButton’, ‘compareGridData’, and ‘subSelect’. Each action corresponds to a specific function that will be called.
4. tableSelector: A string representing the CSS selector for the table element. This is used to locate the table in the DOM.
5. type: A string representing the type of operation or context. The default value is ‘Testing’. This parameter can be used to provide additional context or configuration for the action, though it is not used in the provided code.

Example Implementation:

Let’s say you have a table with the following structure:

You want to perform a ‘select’ action on the row where the ‘Run’ column has the value ‘1’. Here’s how you can use the gridManipulation function:

In this example:

• ‘idValue’ is set to [‘1’], meaning we are looking for rows where the ‘Run’ column has the value ‘1’.
• ‘columnHeader’ is set to ‘Run’, so the function will look for the ‘Run’ column.
• action is set to ‘select’, so the ‘performSelectAction’ function will be called on the matched row.
• ‘tableSelector’ is set to ‘#example-table’, which is the CSS selector for the table.
• ‘type’ is set to ‘Testing’, though it is not used in the current implementation.

Actions:

1. Select: Clicks on the input element of the first column of the selected grid data
2. Comment: Clicks on the icon element in the last column of the selected grid data
3. Last Button: Clicks on the button element in the last column of the selected grid data
4. Compare Grid Data: Retrieves and resolves the text data from all columns of the selected grid data

Protractor Implementation:

Playwright Implementation:

Conclusion

By incorporating testing validation into the development process, we guarantee the reliability and accuracy of large-scale data processing 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.

Reference:

1. https://www.protractortest.org/#/
2. https://www.pharma-iq.com/glossary/drug-manufacturing
3. https://www.linkedin.com/pulse/software-testing-challenges-pharmaceutical-qaiser-munir-1c/

Bonus Implementation: Alternative Approach for Testing and Manipulating Data in Grids

In this section, we present an alternative approach for testing and manipulating data in grids using Playwright. This approach focuses on extracting, filtering, and performing actions on grid data in a modular and reusable manner.

Extracting Grid Data

The first step is to extract the headers and rows from the grid. The ‘extractGridData’ function accomplishes this by selecting the table element, extracting the header texts, and then extracting the cell texts for each row.

Explanation:

1. Select Table Element: The function selects the table element using the provided selector.
2. Extract Headers: It selects all header elements (th.k-header) within the table and extracts their text content.
3. Extract Rows: It selects all row elements within the table and extracts the text content of each cell within each row.
4. Return Data: The function returns an object containing the headers and rows.

Filtering Rows by Column Value

Once the grid data is extracted, the next step is to filter the rows based on a specific column value. The ‘filterRowsByColumnValue’ function filters the rows where the cell value in the specified column matches one of the provided values.

Explanation:

1. Find Column Index: The function finds the index of the specified column header in the headers array.
2. Error Handling: If the column header is not found, it throws an error.
3. Filter Rows: It filters the rows where the cell value in the specified column matches one of the provided values.
4. Return Filtered Rows: The function returns the filtered rows.

Performing Actions on Filtered Rows

The final step is to perform actions on the filtered rows. The ‘performActionOnFilteredRows’ function iterates over each filtered row and performs the specified action.

Explanation:

1. Iterate Over Filtered Rows: The function iterates over each of the filtered rows.
2. Switch Case for Actions: It uses a switch statement to determine which action to perform on each row.

• select: Calls performSelectAction on the row.
• comment: Calls performCommentAction on the row.
• lastButton: Calls performLastButtonClick on the row.
• compareGridData: Calls performGridDataCompare on the row and returns the comparison data.
• subSelect: Calls performSubSelect on the row.
• default: Throws an error if the action is unknown.

3. Perform Actions: The function performs the specified action on each row.

Viktor Pavlov

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.