DEV Community: Divya Manohar

Why We Built DevAssure with Tauri

Divya Manohar — Sun, 09 Feb 2025 12:53:19 +0000

At DevAssure, we are dedicated to delivering high-quality testing solutions, and choosing the right technology stack is crucial to achieving this goal. We decided to build our app with Tauri, a framework that enables us to create small, fast, and secure desktop applications using web technologies and Rust. Here's why we made this choice:

Lightweight and Efficient: Tauri apps are lightweight, resulting in smaller bundle sizes. This means faster downloads and reduced storage usage for our users. Tauri uses Rust as a native layer, which results in lower memory and CPU usage.
Security: Tauri's web renderer is built using Rust's memory-safe features. This helps us protect our users' data and maintain the integrity of our application.
Native Performance: Tauri uses a custom web renderer that is designed to be more lightweight and performant than Chromium. Tauri's web renderer is built using Rust's memory-safe features and concurrency model, ensuring that our app is both fast and reliable, preventing common bugs and app crashes.
Cross-Platform: With Tauri, DevAssure can run seamlessly on Windows, macOS, and Linux, ensuring a consistent experience for all our users.

By building with Tauri and Rust, we're able to create a superior user experience and maintain a high standard of quality for the DevAssure app. We're proud of the technological choices we've made and excited to continue innovating in the software testing space.

Beginner's Guide: How to set up PostgreSQL within Playwright for Test Automation

Divya Manohar — Sun, 09 Feb 2025 12:22:27 +0000

When automating test scenarios, it's important to validate how the data is being stored, processed and retrieved. This ensures data integrity, guaranteeing the application's overall functionality and user experience remain reliable. In this blog we will learn how to set up and add database validations in your test scripts developed with Playwright. In this blog the focus will be on Postgres set up, necessary libraries and code snippets that need to be added within your test scripts.

How can Database integration help improve test automation?

Database integration will help improve the test automation in multiple ways -

Backend validations to ensure data integrity for end to end tests.
Query the database to get specific information, to continue execution of the front end tests.
Prepare data before test execution to save test execution time and improve test automation stability.
Purge data post test execution to reduce test flakiness.
Manipulate or update data, to enable component level testing with ease.

While scripting UI tests, one question we should always ask is -

How can I make the test more reliable and stable?

Not all validations or actions need to be performed on the UI, some of them can be easily achieved through database integrations which help improve the stability, speed of execution and reliability of the test automation suite.

How to set up postgres within your playwright scripts?

Consider a scenario where after signing up, the user receives a token in an email that needs to be used during the first time they sign in. While automating such scenarios, instead of reading the email every time, we can fetch the token directly from the database - this makes the test faster and reliable since we do not have to wait for the email to arrive at the user’s inbox and we do not have to parse the email body to get token details.

Learn how DevAssure simplifies this entire configuration and implementation.

Below is an example of how you can integrate PostgreSQL into your Playwright tests in TypeScript while supporting multiple environments (e.g., local, beta, prod). We'll use the following libraries:

pg: A PostgreSQL client for Node.js.
dotenv: Loads environment variables from a file so you can configure different settings per environment.

Below are step-by-step instructions along with sample code.

Learn in detail how to set up playwright.

Postgres and dotenv Installation

In your project root folder execute the following command

npm install pg dotenv

Set Up Environment-Specific Configuration Files

Postgres configurations will be different for different environments. We wouldn't want to create separate modules for each environment. We will be storing the necessary information in .env files and reading the data using the dotenv library.

.env.local

NODE_ENV=local
DB_HOST=localhost
DB_PORT=5432
DB_NAME=localhost_db
DB_USER=local_user
DB_PASSWORD=local_password

.env.beta

NODE_ENV=beta
DB_HOST=beta.sample-app.com
DB_PORT=5432
DB_NAME=beta_db
DB_USER=beta_user
DB_PASSWORD=beta_password

.env.prod

NODE_ENV=prod
DB_HOST=prod.sample-app.com
DB_PORT=5432
DB_NAME=prod_db
DB_USER=prod_user
DB_PASSWORD=prod_password

Create the base module

Within the test automation project's root folder of your playwright scripts - create a folder config and add a file index.ts

Based on the environment details provided at run time during test execution, this module will help identify the right PG database config to be read.

config/index.ts

import * as dotenv from 'dotenv';
import path from 'path';

// Determine the current environment. Default to 'local' if not specified.
const env = process.env.NODE_ENV || 'local';

// Build the path to the correct .env file (e.g., .env.local, .env.beta, .env.prod)
const envFilePath = path.resolve(process.cwd(), `.env.${env}`);
dotenv.config({ path: envFilePath });

// Export the database configuration
export const dbConfig = {
  host: process.env.DB_HOST,
  port: Number(process.env.DB_PORT || 5432),
  database: process.env.DB_NAME,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
};

Include the Database query within your playwright script

Here's a complete test script in Playwright using Typescript for the scenario mentioned above -

import { test, expect } from '@playwright/test';
import { Client } from 'pg';
import { dbConfig } from '../config';


test('Automate Signup with Token Fetch from Database', async ({ page }) => {


   // Create a new PostgreSQL client using the configuration
   const client = new Client(dbConfig);


   // Perform sign up
   await page.goto('https://appurl/login');
   await page.getByRole('link', { name: 'Join free today' }).click();
   await page.getByPlaceholder('Enter your email').click();
   await page.getByPlaceholder('Enter your email').fill('email@test.com');
   await page.getByPlaceholder('Enter your name').click();
   await page.getByPlaceholder('Enter your name').fill('This is a test - Please ignore');
   await page.getByPlaceholder('Enter your password', { exact: true }).click();
   await page.getByPlaceholder('Enter your password', { exact: true }).fill('password');
   await page.getByPlaceholder('Enter your password again').click();
   await page.getByPlaceholder('Enter your password again').fill('password');
   await page.getByRole('button', { name: 'Sign Up' }).click();


   try{
       // Connect to the database
       await client.connect();


       // Execute a query
       const result = await client.query('SELECT token FROM your_table');


       if (result.rows.length > 0) {
           console.log('Token:', result.rows[0].token);

           // Use the token to sign in
           await page.goto('https://appurl/login?token=?' + result.rows[0].token);


           // Validate user signed in
           await expect(page).toHaveTitle('Welcome');


       } else {


           // throw error if token not found
           console.log('No token found in the query result.');
           throw new Error('No token found in the query result.');
       }
   } finally {
       // Ensure the client disconnects even if an error occurs
       await client.end();
   }
});

Explanation

const client = new Client(dbConfig);

Creates a new client using the configuration.

await client.connect();

Connects to the database.

const result = await client.query('SELECT token FROM your_table');

Executes the query.

result.rows[0].token

Fetches the values from the result set returned by the query.

await client.end();

It is important to always close the connection after test execution, irrespective of the test result.

Test Execution

When running your tests, set the NODE_ENV variable so the correct configuration is loaded. For example:

Local Environment:

NODE_ENV=local npx playwright test

Beta Environment:

NODE_ENV=beta npx playwright test

Learn how DevAssure simplifies this entire configuration and implementation.

WebTable Automation using Selenium

Divya Manohar — Fri, 14 Jun 2024 17:01:35 +0000

A dynamic table is a table where the number of rows and columns can change frequently. To manage these changes, advanced techniques are required to locate and interact with elements within a dynamic table in Selenium.

Automate Dynamic Tables using Selenium

In this blog we will focus on automating dynamic tables. The challenge with dynamic tables is dealing with complex locators (mostly XPaths), loops, and most importantly dealing with the dynamic data.

Sample table to be considered for automation:

Source: Fluent UI React Components

Building the WebElement locators

There are many good resources available to learn about XPaths. As a beginner, I found this blog to be very useful.

For dynamic tables it's important to focus on building WebElement locators (mostly XPaths).

Locating the Table Rows

var rows = driver.findElements(By.xpath("//div[@id='story--components-table--focusable-elements-in-cells']//tbody//tr[not(th)]"));

An XPath is used to locate all the table rows.
tr[not(th)] - this ensures that the headers if present are not included as part of the table rows because at this point we are only interested in the data rendered.
This will return a list of locators to identify all the rows of the table except the table headers.

Locating the cells in the table

var cells = row.findElements(By.cssSelector("td"));

For every row, the above locators helps find the child element - td

Initialise the expected data

Note: For this example alone we will use static initialization, but this is NOT recommended.

var expectedData = List.of(
    new String[]{"Meeting notes", "Max Mustermann", "7h ago"},
    new String[]{"Thursday presentation", "Erika Mustermann", "Yesterday at 1:45 PM"},
    new String[]{"Training recording", "John Doe", "Yesterday at 1:45 PM"},
    new String[]{"Purchase order", "Jane Doe", "Tue at 9:30 AM"}
);

You will now have to loop through all the table rows and cells to validate the data.

Here's the complete test code

@Test
public void validateTableData() {
    // Load the URL
    driver.get("https://react.fluentui.dev/?path=/docs/components-table--default#focusable-elements-in-cells");

    // Initialise the expected data set
    var expectedData = List.of(
        new String[]{"Meeting notes", "Max Mustermann", "7h ago"},
        new String[]{"Thursday presentation", "Erika Mustermann", "Yesterday at 1:45 PM"},
        new String[]{"Training recording", "John Doe", "Yesterday at 1:45 PM"},
        new String[]{"Purchase order", "Jane Doe", "Tue at 9:30 AM"}
    );

    // Locate the table rows
    var rows = driver.findElements(By.xpath("//div[@id='story--components-table--focusable-elements-in-cells']//tbody//tr[not(th)]"));

    // Validate the table data
    for (int rowIndex = 0; rowIndex < rows.size(); rowIndex++) {
        var row = rows.get(rowIndex);
        var cells = row.findElements(By.cssSelector("td"));
        for (int cellIndex = 0; cellIndex < cells.size(); cellIndex++) {
            var cell = cells.get(cellIndex);
            // Get the cell value
            var text = cell.getText().trim();
               // Validate
            Assert.assertEquals(text, expectedData.get(rowIndex)[cellIndex], "Mismatch in column (" + cellIndex + ") at row " + rowIndex);
        }
    }
}

There is a major issue in the above code sample -
The expected data is hardcoded or is static. Ideally this should be obtained from the database or using APIs, which would require writing wrappers and a few lines of code as well. This will be handled as part of an upcoming blog.

There is another solution, by the use of Dynamic XPaths.

What are dynamic XPaths

Dynamic XPath is an advanced concept in Selenium WebDriver, crafted to handle web elements that change their attributes dynamically.
You can learn more about dynamic XPaths here.

public WebElement getTableRow(String file, String author, String updated) {
    return driver.findElement(By.xpath("//div[@id='story--components-table--focusable-elements-in-cells']//tbody//tr[.//td//*[text()='"+file+"']]//td//*[text()='"+author+"']//ancestor::td//following-sibling::td[text()='"+updated+"']"));
}

Here's the complete code with dynamic XPaths

@Test
public void validateTableDataWithDynamicXpath() {
    // Load the URL
    driver.get("https://react.fluentui.dev/?path=/docs/components-table--default#focusable-elements-in-cells");

    // Initialise the expected data set
    var expectedData = List.of(
        new String[]{"Meeting notes", "Max Mustermann", "7h ago"},
        new String[]{"Thursday presentation", "Erika Mustermann", "Yesterday at 1:45 PM"},
        new String[]{"Training recording", "John Doe", "Yesterday at 1:45 PM"},
        new String[]{"Purchase order", "Jane Doe", "Tue at 9:30 AM"}
    );

    for (String[] data : expectedData) {
        // Get the WebElement based on test data
        WebElement row = getTableRow(data[0], data[1], data[2]);
        // Validate presence
        Assert.assertTrue(row.isDisplayed(), "Row not found");
    }
}

Which of the 2 approaches is better?

That depends on what needs to be validated. If it's for a single row or single value, approach #2 works.
But with approach #2 the XPaths need to be as simplified as possible to enable ease of maintenance and this will not work if the table's columns keep changing.
For entire table validations, I would prefer approach #1, again the key here is to simplify the XPaths as much as possible for maintainability.

Automating components with Dynamic Locators using DevAssure

With DevAssure you can automate components with dynamic locators with ease. You will have a custom automation framework that align with your product requirements without the overhead of maintaining the framework itself.

Learn more about the DevAssure Automation App

Leveraging AI for Automated Test Case Generation

Divya Manohar — Wed, 12 Jun 2024 06:01:02 +0000

The art of writing effective test cases comes with the ability to understand and decode the feature specification documents (PRDs) and UI mockups. Besides the ability to understand the features and the product, one needs to be able to understand the real time scenarios, how users interact with the product, analyse and identify the key hindering factors on the product to write more comprehensive test cases.

Let's decode the process of test case writing

Read through the PRDs and mockups.
Identify the feature based scenarios.
Identify the dependent/regression scenarios.
Define the template for the test cases - this depends on the complexity of the application, how the validations are performed, how the test data is managed and the test case management tools used.
Talk to PMs, QAs from other teams and Devs to identify dependencies between the features / components and add more test cases.

QA Engineers carry the knowledge base of the entire product, they understand which new features could potentially impact the existing product workflows and thereby identify the points of regression.

But when the team keeps growing, this is not scalable. A single QA engineer or team cannot have the entire knowledge of how an application with multiple workflows would behave. Can AI be leveraged here to store the user flows and product behaviours as the team scales?

Let's explore if AI tools can enable teams to achieve all the steps in test case authoring. More specifically, if free Gen AI tools like ChatGPT can be used for test generation.

I've conducted an experiment using ChatGPT to generate test cases while developing DevAssure's Desktop App.

Below are some of the trials and results.

Trial 1 - Simple prompt

"I am a QA Engineer trying to write test cases for a feature. Here are the details - “”, help me write the test cases for the same. Display the test cases in a tabular form."

Output

ID	Description	Steps	Expected Outcome	Pass/Fail Criteria
TC01	Select New Web Test Case	1. Open the app. 2. Navigate to the home screen. 3. Click on 'Select New Web Test Case'.	'Create Web Test Case' screen should be displayed.	Screen transition is successful.
TC02	Enter valid test case name	1. Follow steps to TC01. 2. Enter a valid name in the 'Web Test Case Name' field. 3. Click 'Create'.	New web test case is created with the provided name.	Test case creation is successful.
TC03	Enter empty test case name	1. Follow steps to TC01. 2. Leave the 'Web Test Case Name' field empty. 3. Click 'Create'.	Error message should be displayed indicating name is required.	Appropriate error is displayed.
TC04	Enter excessively long test case name	1. Follow steps to TC01. 2. Enter a name exceeding the maximum length limit in the 'Web Test Case Name' field. 3. Click 'Create'.	Error message should be displayed indicating name is too long.	Appropriate error is displayed.
TC05	Use special characters in test case name	1. Follow steps to TC01. 2. Enter a name with special characters in the 'Web Test Case Name' field. 3. Click 'Create'.	Check if special characters are allowed or an error message is displayed.	Behavior matches expected rules.
TC06	Cancel test case creation	1. Follow steps to TC01. 2. Enter a valid name. 3. Click 'Cancel' instead of 'Create'.	User should be returned to the previous screen without creating a test case.	Navigation is correct without creation.

Trial 2 - Prompt to classify and tag tests

"I am a QA Engineer and I want to write functional test cases for a feature. Find the details about the same below. Generate all possible functional test cases. Also identify the P0 scenarios and tag the test cases based on different components.

The test cases should be presented in a tabular format."

Output

ID	Title	Objective	Preconditions	Test Steps	Expected Result	Priority	Component
TC01	Create Test Case from Home Page	Verify creating a test case from the home page.	User logged in, on home page.	1. Click "New Web Test Case". 2. Enter name, click "Create".	New test case created, user redirected to editor.	P0	UI
TC02	Create Test Case from Explorer	Verify creating a test case from the Explorer.	User logged in, on Explorer page.	1. Navigate to Test Cases. 2. Click "Add new", enter name.	New test case created, user redirected to editor.	P0	UI
TC03	Enter Test Case Metadata	Verify entering metadata details in the editor.	New test case open in editor.	1. Enter Summary, Tags, Feature in metadata fields.	Metadata saved and displayed correctly.	High	Functionality
TC04	Create Detailed Test Steps	Verify creation of detailed test steps.	Test case selected, in Detailed Steps tab.	1. Input actions and expected results in respective columns.	Detailed steps saved and displayed correctly.	P0	Functionality
TC05	Add Automation Test Steps	Verify adding steps for automation.	Test case selected, in Automation tab.	1. Click "Add Step", select UI action for automation.	Automation steps added and saved correctly.	High	Functionality
TC06	Edit Test Case Properties	Verify editing properties of a test case.	Test case open in editor.	1. Update fields like Summary, Tags. Click to save.	Updated properties saved and displayed correctly.	Medium	UI

Trial 3 - Prompt with PRD and details on existing functionality

More comprehensive test cases were generated.

Output

ID	Title	Objective	Preconditions	Test Steps	Expected Result	Priority	Component
TC01	Create Test Case from Home Page	Verify creating a test case from the home page.	User logged in, on home page.	1. Click "New Web Test Case". 2. Enter name, click "Create".	New test case created, user redirected to editor.	P0	UI
TC02	Create Test Case from Explorer	Verify creating a test case from the Explorer.	User logged in, on Explorer page.	1. Navigate to Test Cases. 2. Click "Add new", enter name.	New test case created, user redirected to editor.	P0	UI
TC03	Enter Test Case Metadata	Verify entering metadata details in the editor.	New test case open in editor.	1. Enter Summary, Tags, Feature in metadata fields.	Metadata saved and displayed correctly.	High	Functionality
TC04	Create Detailed Test Steps	Verify creation of detailed test steps.	Test case selected, in Detailed Steps tab.	1. Input actions and expected results in respective columns.	Detailed steps saved and displayed correctly.	P0	Functionality
TC05	Add Automation Test Steps	Verify adding steps for automation.	Test case selected, in Automation tab.	1. Click "Add Step", select UI action for automation.	Automation steps added and saved correctly.	High	Functionality
TC06	Edit Test Case Properties	Verify editing properties of a test case.	Test case open in editor.	1. Update fields like Summary, Tags. Click to save.	Updated properties saved and displayed correctly.	Medium	UI
TC07	Edit Automation Steps	Verify editing of automation test steps.	Automation steps exist in a test case.	1. Navigate to Automation tab. 2. Hover and edit a step.	Changes saved and updated step displayed correctly.	Medium	Functionality
TC08	Delete Automation Test Step	Verify deletion of an automation test step.	Automation step present in a test case.	1. Select step, click "Delete".	Step deleted and no longer displayed.	High	Functionality
TC09	Test Search and Filter with Tags	Verify searching and filtering test cases using tags.	Multiple test cases with various tags created.	1. Use tags in search/filter box to find test cases.	Test cases matching tags displayed.	High	UI
TC10	Copy Automation Test Step	Verify ability to copy an automation test step.	At least one automation step present.	1. Select step, click "Copy", then paste to desired location.	Copied step displayed correctly in new location.	Medium	Functionality
TC11	Add Comment to Test Step	Verify adding a comment to a test step.	Test step available in the test case.	1. Select test step, add a comment.	Comment saved and visible next to the test step.	Low	Functionality
TC12	Enable/Disable Test Step (Commenting Test Steps)	Verify ability to enable/disable a test step.	Test step created in test case.	1. Choose test step, toggle enable/disable.	Test step enabled/disabled as per toggle status.	Low	Functionality
TC13	Move Test Step	Verify moving a test step to a different position.	Multiple steps created in a test case.	1. Select a test step, move to a new position.	Test step displayed in the new position correctly.	Medium	Functionality

Trial 4 - Build more test cases on top of Trial 3

6 Additional tests but most of them were duplicates of previous results and there were hallucinations as well.

Output

ID	Title	Objective	Preconditions	Test Steps	Expected Result	Priority	Component
TC14	Validate Project Initialization	Ensure a project can be properly initialized in the system.	User logged in, on project creation page.	1. Initiate project setup. 2. Verify initialization steps.	Project is initialized and listed correctly in user dashboard.	High	UI
TC15	Test Case Duplication	Verify that a test case can be duplicated correctly.	Test case exists that can be duplicated.	1. Select existing test case. 2. Duplicate it.	New test case is a duplicate and contains the same details.	Low	UI
TC16	Enter Test Case Metadata	Verify entering metadata details in the editor.	New test case open in editor.	1. Enter Summary, Tags, Feature in metadata fields.	Metadata saved and displayed correctly.	High	Functionality
TC17	Create Detailed Test Steps	Verify creation of detailed test steps.	Test case selected, in Detailed Steps tab.	1. Input actions and expected results in respective columns.	Detailed steps saved and displayed correctly.	P0	Functionality
TC18	Edit Test Case Properties	Verify editing properties of a test case.	Test case open in editor.	1. Update fields like Summary, Tags. Click to save.	Updated properties saved and displayed correctly.	Medium	UI
TC19	Load Test Case Efficiency	Test the load efficiency of opening a test case.	User selects a test case to open.	1. Open test case. 2. Measure load time.	Test case opens within acceptable time limits.	Medium	Performance

Inferences

Trial 1 results are not relevant and not useful as there was no complete context of the feature / application.
Trial 2 results are appropriate, but the test cases are very high level.
Trial 3 results are accurate, but 14 test cases are not enough to validate the feature.
Trial 4 results had duplicates from previous results, it required more effort to check and clean the list, and ended up having fewer tests.
Trial 4 also had results that were not related to the data in the PRD, in other words the model started hallucinating.

There are numerous factors to be considered while using AI to write test cases

Test cases list should cover all the user flows and negative tests as well.
PRDs / Spec documents could be huge and might not fit in the LLM’s context window.
Many UI applications rely on UI mockups in tools like Figma, rather than using PRDs as the source of truth.
Duplicate test cases should not be created every time AI generates the tests.
AI should have access to entire application information or existing test cases to create new tests based on the integration or dependent flows.
AI should have access to test data store / sample data to create test cases with appropriate test data.

Given all these factors, we can leverage Gen AI and build an effective tool that can assist in test cases authoring and test case management.

Will this AI tool replace QA Engineers?

No!, this will help QA engineers to be more productive, and help teams to easily streamline the testing process. It will help engineering teams scale faster, ship faster with better quality. QA Engineers can start focussing on more impacting activities like exploratory testing, monkey testing, usability validations and let tools like DevAssure do the mundane tasks for them, and such tools can be consumed by anyone on the team - PMs, Developers and QA Engineers and the responsibility of owning quality should and can be shared across all the teams.

DevAssure's Test Case Generation from Figma Mockups and PRDs

DevAssure AI connects seamlessly with Figma and generates feature and regression test cases from specification documents and mockups within a few seconds. Save hundreds of hours of manual work in writing test cases.

Learn more