Blog

Playwright Reporting: Customizing the Dot Reporter

by Chris Adams | Jul 26, 2024 | Automation Testing, Blog | 0 comments

Playwright is a popular test automation tool that offers a lot of reporting options for its users such as built-in reporters, custom reporters, and support for integrating third-party reporters. The Playwright’s default in-built reporter is the list reporter. However, when running tests via the CI tool, Playwright will switch to the Dot reporter by default. There is also a good reason why the Dot Reporter is chosen as the default Playwright Reporting option during execution in Continuous Integration tools. We have even made a YouTube video explaining it and recommend you check it out.

Like any tool or feature, there will always be a few drawbacks. Based on our experience of working with Playwright while delivering automation testing services to our clients, we were able to overcome these drawbacks with a few workarounds. So in this blog, we will be sharing how you can customize the Dot reporter to address these drawbacks and enhance your Playwright reporting. But before that, let’s take a look at what the disadvantages are.

Disadvantages of Dot Reporter:

• During the execution process, the Dot Reporter will not display the number of tests completed. So you’ll have to manually count if you want to get the total number of tests executed.
• In the event of a failure, an ‘F’ will appear in red. But the issue is that it will not indicate which specific test has failed during execution.

Customization of Dot Reporter:

As stated earlier, Playwright reporting has built-in options and customizing capabilities as well. So, let’s delve into the customization aspect to address the disadvantages of Dot Reporter. If you prefer to watch the entire step-by-step tutorial as a video, you can check out our video covering the same. Or you can prefer to continue reading as well.

Step 1: Creating Reporter Listener Class

• Create a folder by the name ‘utils’ inside your project directory.
• Create a TypeScript file using the name ‘CustomReporter’ with the below code

import type {Reporter, FullConfig, Suite, TestCase, TestResult, FullResult} from '@playwright/test/reporter';
class CustomReporter implements Reporter {
 }
export default CustomReporter;

Step 2: Configure Reporter Listener in Playwright Config file

• Open the playwright.config.ts file
• Add the reporter listener file that you created in Step 1 in the Playwright config file

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
 testDir: './tests',
 /* Run tests in files in parallel */
 fullyParallel: true,
 /* Fail the build on CI if you accidentally left test.only in the source code. */
 forbidOnly: !!process.env.CI,
 /* Retry on CI only */
 retries: process.env.CI ? 2 : 0,
 /* Opt out of parallel tests on CI. */
 workers: process.env.CI ? 1 : undefined,
 /* Reporter to use. See https://playwright.dev/docs/test-reporters */
 reporter: './utils/CustomReporter.ts',
 /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
 use: {
   /* Base URL to use in actions like `await page.goto('/')`. */
   // baseURL: 'http://127.0.0.1:3000',

   /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
   trace: 'on-first-retry',
 },

 /* Configure projects for major browsers */
 projects: [
   {
     name: 'chromium',
     use: { ...devices['Desktop Chrome'] },
   },
{
     name: 'firefox',
     use: { ...devices['Desktop Firefox'] },
   },
{
     name: 'webkit',
     use: { ...devices['Desktop Safari'] },
   },
 ],

});

Step 3: Declare & Initialize Properties

• In the CustomReporter class, add three class properties
• totalTests-To hold total tests in the test suite.
• totalTestsExecuted-To count the number of tests that have been executed in the current execution.
• noOfTestsPerLine-To count the number of test statuses or results to be shown in a line.
• Initialize the properties in the constructor

class CustomReporter implements Reporter {
   totalTests: number;
   noOfTestsPerLine: number
   totalTestsExecuted: number

   constructor() {
      this.totalTests=0
      this.noOfTestsPerLine=0
      this.totalTestsExecuted=0
   }
}

Step 4: Add the onBegin method

• Add the onBegin method.
• Save the total tests to be executed in the totalTests variable.

class CustomReporter implements Reporter {
   totalTests: number;
   noOfTestsPerLine: number
   totalTestsExecuted: number

   constructor() {
       this.totalTests=0
       this.noOfTestsPerLine=0
       this.totalTestsExecuted=0
   }
 onBegin(config: FullConfig, suite: Suite) {
       this.totalTests = suite.allTests().length;
       console.log(`Executing ${this.totalTests} test(s)`);
   }
  
}

Step 5: Add the printTotalExecuted method

This method will be called to print how many tests have been executed against the total tests.

class CustomReporter implements Reporter {
   totalTests: number;
   noOfTestsPerLine: number
   totalTestsExecuted: number

   constructor() {
       this.totalTests=0
       this.noOfTestsPerLine=0
       this.totalTestsExecuted=0
   }

   onBegin(config: FullConfig, suite: Suite) {
       this.totalTests = suite.allTests().length;
       console.log(`Executing ${this.totalTests} test(s)`);
   }

   printTotalExecuted(){
       process.stdout.write(`[${this.totalTestsExecuted}/${this.totalTests}]\n`);
       this.noOfTestsPerLine=0
   }

}

Step 6: Add the onTestEnd method

After the execution of each test, the onTestEnd method will be invoked.

class CustomReporter implements Reporter {
   totalTests: number;
   noOfTestsPerLine: number
   totalTestsExecuted: number

   constructor() {
       this.totalTests=0
       this.noOfTestsPerLine=0
       this.totalTestsExecuted=0
   }
  
   onBegin(config: FullConfig, suite: Suite) {
       this.totalTests = suite.allTests().length;
       console.log(`Executing ${this.totalTests} test(s)`);
   }

   printTotalExecuted(){
       process.stdout.write(`[${this.totalTestsExecuted}/${this.totalTests}]\n`);
       this.noOfTestsPerLine=0
   }

   onTestEnd(test: TestCase, result: TestResult) {

   }

}

Step 7: Print the Total Tests Executed

• Inside the onTestEnd method, check many tests are executed in a line.
• If the count is equal to 50, then invoke the printTotalExecuted method to print the total tests executed so far and the total tests in the test suite.

onTestEnd(test: TestCase, result: TestResult) {
   if (this.noOfTestsPerLine==50){
       this.printTotalExecuted()
   }
}

Step 8: Increament totalTestsExecuted & noOfTestsPerLine variables

It is possible to print the skipped status in ANSI Yello color. You can also use different color codes based on your preference. You can check the available color codes here .

onTestEnd(test: TestCase, result: TestResult) {
   if (this.noOfTestsPerLine==50){
       this.printTotalExecuted()
   }

   ++this.totalTestsExecuted
   ++this.noOfTestsPerLine

   //Printing Skipped Status in ANSI yellow
   if (result.status === 'skipped') {
       process.stdout.write('\x1b[33m°\x1b[39m');
       return;
   }
}

Step 10: Printing Retry Status

• If a test has Timed out or Failed and Playwright does know what status needs to be marked, then the test will be marked for Retry.
• Since the test will be rerun, we need to decrease the totalTestsExecuted variable to ensure accuracy.

onTestEnd(test: TestCase, result: TestResult) {
   if (this.noOfTestsPerLine==50){
       this.printTotalExecuted()
   }

   ++this.totalTestsExecuted
   ++this.noOfTestsPerLine

   //Printing Skipped Status in ANSI yellow
   if (result.status === 'skipped') {
       process.stdout.write('\x1b[33m°\x1b[39m');
       return;
   }

   //Printing the test that marked for retry
   if (test.outcome() === 'unexpected' && result.retry < test.retries) {
       process.stdout.write(`\x1b[33mx\x1b[39m`);
       --this.totalTestsExecuted;
       return;
   }
}

Step 11: Printing Failure Status & Test Title

• Concatenating test title with failure status.
• After printing the status & title, call the printTotalExecuted method to print Total Tests Executed and Total Tests in the Test Suite.

onTestEnd(test: TestCase, result: TestResult) {
   if (this.noOfTestsPerLine==50){
       this.printTotalExecuted()
   }

   ++this.totalTestsExecuted
   ++this.noOfTestsPerLine

   //Printing Skipped Status in ANSI yellow
   if (result.status === 'skipped') {
       process.stdout.write('\x1b[33m°\x1b[39m');
       return;
   }

   //Printing the test that marked for retry
   if (test.outcome() === 'unexpected' && result.retry < test.retries) {
       process.stdout.write(`\x1b[33mx\x1b[39m`);
       --this.totalTestsExecuted;
       return;
   }

   //Printing failure status and test name
   if (test.outcome() === 'unexpected' && result.status === 'failed') {
       process.stdout.write('\x1b[31m'+"F("+test.title+")"+'\x1b[39m');
       this.printTotalExecuted()
       return;
   }

}

Step 12: Other Statuses (Flaky, TimedOut, & Passed)

onTestEnd(test: TestCase, result: TestResult) {
   if (this.noOfTestsPerLine==50){
       this.printTotalExecuted()
   }

   ++this.totalTestsExecuted
   ++this.noOfTestsPerLine

   //Printing Skipped Status in ANSI yellow
   if (result.status === 'skipped') {
       process.stdout.write('\x1b[33m°\x1b[39m');
       return;
   }

   //Printing the test that marked for retry
   if (test.outcome() === 'unexpected' && result.retry < test.retries) {
       process.stdout.write(`\x1b[33mx\x1b[39m`);
       --this.totalTestsExecuted;
       return;
   }

   //Printing failure status and test name
   if (test.outcome() === 'unexpected' && result.status === 'failed') {
       process.stdout.write('\x1b[31m'+"F("+test.title+")"+'\x1b[39m');
       this.printTotalExecuted()
       return;
   }

   if (test.outcome() === 'unexpected' && result.status === 'timedOut') {
       process.stdout.write('\x1b[31mT\x1b[39m');
       return;
   }

   if (test.outcome() === 'expected' && result.status === 'passed') {
       process.stdout.write('\x1b[32m.\x1b[39m');
       return;
   }

   if (test.outcome() === 'flaky') {
       process.stdout.write('\x1b[33m±\x1b[39m');
       return;
   }

}

Step 13: Finally, Add onEnd Method

• Print total tests executed just in case it is missed before the end of the execution.
• Print the status of the entire execution.

onEnd(result: FullResult) {
   if (this.noOfTestsPerLine !== 0) this.printTotalExecuted();
   console.log(`\nFinished the run: ${result.status}`);
}

Full Code:

import { FullConfig } from '@playwright/test';
import { FullResult, Reporter, Suite, TestCase, TestResult } from '@playwright/test/reporter';

class CustomReporter implements Reporter {
   totalTests: number;
   noOfTestsPerLine: number
   totalTestsExecuted: number

   constructor() {
       this.totalTests=0
       this.noOfTestsPerLine=0
       this.totalTestsExecuted=0
   }

   onBegin(config: FullConfig, suite: Suite) {
       this.totalTests = suite.allTests().length;
       console.log(`Executing ${this.totalTests} test(s)`);
   }

   printTotalExecuted(){
       process.stdout.write(`[${this.totalTestsExecuted}/${this.totalTests}]\n`);
       this.noOfTestsPerLine=0
   }

   onTestEnd(test: TestCase, result: TestResult) {
       if (this.noOfTestsPerLine==50){
           this.printTotalExecuted()
       }

       ++this.totalTestsExecuted
       ++this.noOfTestsPerLine

       //Printing Skipped Status in ANSI yellow
       if (result.status === 'skipped') {
           process.stdout.write('\x1b[33m°\x1b[39m');
           return;
       }

       //Printing the test that marked for retry
       if (test.outcome() === 'unexpected' && result.retry < test.retries) {
           process.stdout.write(`\x1b[33mx\x1b[39m`);
           --this.totalTestsExecuted;
           return;
       }

       //Printing failure status and test name
       if (test.outcome() === 'unexpected' && result.status === 'failed') {
           process.stdout.write('\x1b[31m'+"F("+test.title+")"+'\x1b[39m');
           this.printTotalExecuted()
           return;
       }

       if (test.outcome() === 'unexpected' && result.status === 'timedOut') {
           process.stdout.write('\x1b[31mT\x1b[39m');
           return;
       }

       if (test.outcome() === 'expected' && result.status === 'passed') {
           process.stdout.write('\x1b[32m.\x1b[39m');
           return;
       }

       if (test.outcome() === 'flaky') {
           process.stdout.write('\x1b[33m±\x1b[39m');
           return;
       }

   }

   onEnd(result: FullResult) {
       if (this.noOfTestsPerLine !== 0) this.printTotalExecuted();
       console.log(`\nFinished the run: ${result.status}`);
   }
}
export default CustomReporter;

Conclusion:

In this blog, we have shown how to overcome the Playwright reporting issues usually seen with the Dot Reporter. In addition, you can use the onEnd method to print a summary of the entire execution, including Total Passed, Total Failed, Total Skipped, and Total Flaky.

The customization of Playwright Dot Reporter is a valuable tool for developers and testers looking to enhance their automated testing processes. Through the use of custom reporters, users have the ability to tailor their test reports to fit their specific needs and preferences.

One of the main benefits of using custom reporters is the flexibility it offers. With Playwright Dot Reporter, users can choose which information they want to include in their reports and how they want it displayed. This allows for more targeted and organized reporting, making it easier to interpret test results and identify any issues that may arise.

TOSCA Automation Tool: What is It? Why Use It?

by Anika Chakraborty | Jul 4, 2024 | Automation Testing, Blog | 0 comments

Have you ever felt overwhelmed by complex deployment processes or felt it tedious to integrate multiple tools to get things done? Then TOSCA is a great tool that can solve all your problems. But what is the TOSCA Automation tool? How does it work? How exactly can it benefit you? These are all the major questions we will be answering in our blog. Being a leading automation testing company, we have expertise in a range of automation tools and TOSCA is one of them. So let’s get started!

What is the TOSCA Automation Tool?

TOSCA (Test Automation Software for Continuous Application) is a powerful tool developed by Tricentis and is revolutionizing how organizations manage and deploy their cloud applications. It has the capability to achieve end-to-end automation testing without having to write any code. It supports a graphical model-based approach that enables testers to create and maintain tests by defining the business processes and application workflows instead of scripting. The best part of the TOSCA Automation tool is that it supports a wide range of technologies such as web, mobile, desktop applications, APIs, and even databases.

At its inception, TOSCA was born out of a need for standardization and automation in cloud computing. But it has evolved ever since then to become the go-to choice for enterprises looking to streamline their IT operations and improve efficiency. The primary reason for this kind of popularity is that TOSCA has been able to keep pace with business needs by constantly introducing new features and capabilities.

Key Features of the TOSCA Automation Tool

TOSCA is designed to support a wide range of testing needs in modern software development environments. And to achieve that it offers a robust set of features that will enhance the efficiency, coverage, and ease of automated testing.

• Graphical Modeling
• Automated Deployment
• Integration Capabilities
• Scalability & Flexibility

Graphical Modeling

The standout feature of TOSCA is its graphical modeling capabilities. This feature allows users to visually represent complex system architectures and their dependencies clearly and intuitively. As stated earlier, the TOSCA Automation tool is scriptless so you can easily drag and drop components onto a canvas. Though we utilize the Gherkin format while scripting in Selenium to ensure that all stakeholders can easily understand the purpose of each script, the visual representation makes it a lot easier to collaborate among team members and other department stakeholders too.

Automated Deployment

Another significant feature of TOSCA is its automated deployment and provisioning capabilities. It allows users to define their infrastructure requirements in a template in which they can specify how resources should be provisioned and configured. The users can then utilize this template to automate the deployment process and ensure consistency across different environments.

Additionally, organizations can even easily replicate their infrastructure setup across multiple instances without any manual work or intervention. This makes it a lot easier to roll out new applications or updates and also to minimize downtimes during times of failure. In addition to saving time, it even reduces the risk of human errors during deployment.

Integration Capabilities

One way TOSCA is able to achieve this kind of seamless deployment is due to its capability to integrate with a wide range of tools. Be it DevOps tools like Jenkins or Ansible, or cloud management platforms like AWS or Azure, TOSCA has the ability to offer a more holistic approach to automation and orchestration. This level of connectivity makes it easy to streamline the processes across different platforms and across diverse infrastructures. The wide range of support makes it possible to be used by different organizations that use different tech stacks that suit their needs.

Scalability & Flexibility

A by-product of these key features we’ve seen is that it makes the TOSCA automation tool highly scalable & flexible. Its scalability allows users to easily adjust resources such as server and storage requirements based on their needs. Whether you’re deploying a simple application or a complex network infrastructure, TOSCA has the required flexibility to customize your deployment process the way you want it. Any tool that can help organizations meet their changing business needs will definitely turn out to be a success. And TOSCA is no exception.

How does TOSCA work?

It’s great that the TOSCA automation tool offers such great features. But how does it actually get the job done? TOSCA actually breaks down complex applications into smaller and simpler components through graphical modeling. The application’s structure and dependencies are defined using templates that are written in a standardized modeling language. The template has nodes and each node represents elements such as servers, databases, and networking components. Relationships between these nodes are made with the help of properties to denote how they interact with each other. The scripts needed for deployment are stored as artifacts. The execution of a TOSCA template follows a structured sequence where the orchestrator reads and interprets the template instructions. Finally, it performs actions such as provisioning resources, configuring settings, and managing dependencies based on the defined relationships.

Conclusion

So it is evident that the TOSCA Automation Tool is equipped with a comprehensive set of features designed to address the challenges of modern software testing. Features such as graphical modeling, scriptless testing, automated deployment, and robust integration capabilities make it a popular choice. It has direct impacts such as enhancing test automation, improving test coverage, and accelerating time-to-market. We will definitely be going deep in terms of how to use TOSCA in your day-to-day projects in our upcoming blogs about it. So make sure to keep an eye out on our website.

Top 10 AI Automation Testing Tools

by Hannah Rivera | Feb 25, 2024 | Automation Testing, Blog | 0 comments

Artificial Intelligence is taking the world by storm and the software testing industry is no different. It almost seems like a new AI tool is released every day. Out of the many AI-based testing tools in the market, we have picked the 10 best AI Automation Testing Tools that could truly improve your software testing process. Being a leading software testing company, we understand the importance of AI adoption in software testing. But at the same time, we also understand the value of human intelligence. So we have prepared this list of AI Test Automation Tools that are focused on augmenting the capabilities of Artificial Intelligence to improve the effectiveness of testing instead of trying to replace manual testing or act as a standalone solution.

We believe that is the right way to make the best use of AI. It will ease the process of executing repetitive test cases, collecting performance data, detecting bugs, and so on. Without any further ado, let’s take a look at the top AI-based Test Automation tools. In addition to giving a brief overview of each tool, we will also be listing the key features and suitable use cases.

Top 10 AI Automation Testing Tools

1. Testim

The first in our list of AI test automation tools is Testim. It is a codeless or a low-code tool that uses a visual test creation approach. So it allows users to create automated tests without the need for extensive programming knowledge. It utilizes Selenium as one of its underlying technologies to interact with web browsers and even has the capability to work along with Selenium.

Key Features

• Finding Locators: With the help of AI, it will identify accurate locators for elements making sure your automation test scripts are stable and easy to maintain in the long run.
• Unified API & UI Testing: You can get maximum test coverage as it has the provision to integrate API testing with web automation.
• Test Organization: You can easily organize and manage your test cases by creating Test Suites, Test Plans, and custom labels.

Best Suited for:

Organizations or individuals looking for codeless automation solutions with AI-driven features to assist in test creation, maintenance, and execution may find Testim a suitable choice in our list of AI Automation Testing Tools.

2. Perfecto Scriptless

Perfecto Scriptless is the next on our list of AI Automation Testing Tools. It is a testing solution designed with simplicity in mind. So it is a great choice for testers with varying levels of technical expertise. It can be used to perform automated testing for both mobile and web applications. As the name suggests, you can create and maintain automation tests with ease, even without advanced coding skills

Key Features

• Codeless Test Creation: You can easily create test scenarios without writing any code.
• Test Maintenance & Execution: Not just creating the tests, but maintaining the tests are also easy as the AI algorithms keep the test scenarios up-to-date without any manual intervention.
• Easy Collaboration: It enables seamless collaborations between the Developers and QA teams as it allows the sharing of the reports via the cloud.
• Scheduled Execution: The test execution can also be easily scheduled without any complex setup to reduce manual intervention even further.

Best suited:

Perfecto Scriptless is adaptable to meet the demands of intricate test scenarios within complex applications. It can be seamlessly integrated into CI/CD pipelines to effectively meet the rigorous testing demands of large and complex software projects.

3. Applitools

Applitools specializes in visual testing and monitoring platforms to enhance the quality assurance process for web and mobile applications. Unlike other tools on our list of AI Automation Testing Tools, Applitools has a set of unique features such as support for accessibility testing & localization testing.

Key Features

• Visual Testing: By integrating Applitools with Selenium, you can enhance your test automation strategy by adding visual validation to ensure the visual correctness of your web applications.
• Accessibility Testing: It allows users to validate the visual aspects of an application against accessibility standards.
• Localization Testing: It supports localization testing by validating visual elements across different languages and locales.
• Native Apps: Applitools for native apps streamlines and enhances the speed and reliability of testing native mobile applications on well-known iOS and Android devices.
• Test Management: It has the capacity to automate the review and maintenance of a large number of defects to simplify the test management process.

Best suited for:

Applitools is ideal for big companies with complicated apps and extensive sets of tests. It helps them conduct visual testing on a large scale, ensuring a consistent user experience across various features.

4. Functionize

Functionize’s visual testing offers a thorough solution for assessing the visual components of your applications. With its advanced features, this functionality improves the testing process by concentrating on visual elements, guaranteeing the uniform appearance and layout of both web and mobile applications.

Key Features

• Self-healing tests: Functionize drastically reduces the effort required by the QA team as it dynamically adapts and heals tests as per the changes made in the application.
• Computer vision: Its visual AI and machine learning capabilities make it easy to understand the intent of the tests.
• Root cause analysis: The engine identifies the root cause of test failures, streamlining the debugging process in intricate systems

Best Suited for:

Functionize AI is well-suited for organizations that seek a comprehensive testing solution, including functional, regression, and visual testing. From our list of AI Automation testing Tools, it will be a great choice for those embracing DevOps principles for continuous integration and deployment. It caters to the needs of both smaller or medium-level enterprises and DevOps-centric organizations.

5. TestCraft

One of its standout features when compared to most other AI Automation Testing Tools is that it can seamlessly integrate with Selenium WebDriver, a powerful tool widely used for web application testing. So TestCraft empowers both technical and non-technical users to create robust automated tests effortlessly.TestCraft’s visual testing approach not only simplifies test creation but also contributes to easy test maintenance.

Key Features

• AI-Powered Test Generation: It offers features like intelligent test generation, test maintenance, or suggestions for improving test scripts.
• AI-Driven Features: AI-powered functionalities, such as intelligent test generation, self-healing tests, and automated test maintenance, can enhance the efficiency of the testing process.
• Visual Testing: TestCraft can help detect UI discrepancies and ensure the visual integrity of your application across different devices.
• Easy to Maintain: It intelligently adapts to changes in the application’s UI, reducing the effort required to update tests when the application undergoes modifications.

Best Suited for:

If your organization’s primary focus is on testing web applications, TestCraft would be a good choice due to its integration with Selenium. It also provides a codeless solution for creating and executing automated tests on web-based interfaces.

6. ACCELQ

We’re halfway through our list of AI Automation Testing Tools and ACCELQ is the next. It enables automation testing without the need for extensive coding. Its intuitive visual interface allows testers to create and execute tests using a simple drag-and-drop approach. Also, it uses intelligent algorithms to adapt to changes in the application’s UI, reducing the effort required for test maintenance

ACCELQ supports end-to-end testing of applications, allowing teams to validate the entire user journey and ensure that all components interact correctly.

Key Features

• Self-Healing: It has the ability to automatically update or fix test scripts when there are changes in the application under test.
• Cross-Browser and Cross-Platform Testing: Support for testing applications across different browsers and platforms to ensure compatibility.
• Continuous Testing and Shift-Left Approach: AccelQ supports continuous testing practices, enabling teams to integrate testing activities earlier into the software development lifecycle. It aligns with the shift-left approach to testing.

Best Suited for:

AccelQ’s support for model-based testing can be particularly beneficial for organizations that emphasize creating models of their applications to generate automated tests automatically.

7. ParaSoft SOAtest

Parasoft is a widely used AI-based testing tool to automate various types of tests, including unit tests, regression tests, and system tests. Automation helps save time, ensures consistency, and allows for quick feedback during the development process. Also, it includes static code analysis tools to assess code quality and identify potential issues early in the development process. This aids in maintaining clean, efficient, and secure code.

Key Features

• Codeless Testing: It provides a visual, codeless interface for creating and managing API tests, making it more accessible to non-developers.
• Documentation and Reporting: It offers documentation generation and reporting features to help testers and developers understand the status and results of API tests.
• Performance Testing: Features for measuring and analyzing the performance of APIs, including response times and throughput.
• Security Testing: It has features for testing the security of APIs, including authentication, authorization, and protection against common vulnerabilities, making it a unique option in our list of AI Test Automation Tools.

Best Suited for:

If your organization is focused on API Testing and Security Testing, then Parasoft would be the go-to option in our list of AI Automation Testing tools as it will ensure adherence to industry standards.

8. Mabl

Mabl is an AI Automation Testing Tool that integrates advanced technologies like machine learning into the testing process. Mabl is widely used for regression testing, where automated tests ensure that recent changes or updates to an application haven’t introduced new issues or bugs.

The platform’s self-healing capabilities contribute to maintaining the reliability of regression test suites. Mabl includes visual testing capabilities, enabling teams to verify the visual aspects of their applications

Key Features

• Performance Testing: Though Mabl primarily focuses on functional testing, it also provides insights into performance-related issues through metrics and data analysis.
• Mobile Testing: Mabl stands out in the realm of mobile testing due to its advanced features, encompassing both real-device testing and emulators, which surpass the offerings of many competitors.
• Dynamic Element Recognition: The tool uses dynamic locators to identify UI elements, making tests more resilient to changes in the application’s structure.
• Data-Driven Testing: The tool supports data-driven testing, enabling users to execute the same test scenario with different sets of input data.

Best Suited For:

Mabl’s visual testing capabilities make it suitable for organizations that prioritize the visual aspects and user experience of their applications. Visual testing helps catch issues related to UI changes and ensures a consistent user experience.

9. Appvance IQ

Appvance IQ offers a scriptless test creation approach, making it accessible to both technical and non-technical users. This is particularly beneficial for those without extensive coding skills. It caters to both functional and performance testing needs, offering a comprehensive solution for testing different aspects of applications

Key Features:

• Integration with Mobile Platforms: Seamless integration with mobile platforms (iOS, Android) to ensure comprehensive testing on various devices.
• Smart Test Execution: Uses AI algorithms to optimize test execution, focusing on critical areas or scenarios based on historical data.
• Real Device and Emulator Testing: It supports testing on real devices and emulators, with AI capabilities to adapt tests for different testing environments.
• Behavior-Driven Testing: Appvance IQ’s support for behavior-driven testing helps align testing efforts with user expectations and business goals.
• Comprehensive Testing Solution: The platform addresses both functional and performance testing requirements, providing a holistic testing solution for different aspects of applications.

Best Suited For:

Organizations with a user-centric focus and a desire to ensure that testing efforts closely mirror real-world user interactions by testing across various browsers and platforms can opt for Appvance IQ over the other listed AI Automation Testing Tools.

10. Test.ai

The final tool in our list of Top Automation Testing Tools is Test.ai, an AI-driven testing platform that specializes in visual testing and user experience validations. Also, Test.ai aims to enhance the efficiency and effectiveness of testing processes, particularly with mobile applications.

Appium AI is a specific product by Test.ai that integrates with the Appium framework, a widely used open-source tool for automating mobile applications. Appium AI introduces AI capabilities to Appium, offering advanced features for mobile app testing.

Key Features

• Dynamic Test Scenarios: The tool aims to create dynamic and adaptive test scenarios that can adjust to changes in the mobile application’s user interface.
• Usability Testing: With its emphasis on visual testing, the tool contributes to usability testing, ensuring that the application is visually appealing and user-friendly.
• Self-Learning Test Automation: Test.ai’s approach includes self-learning capabilities, where the tool learns from interactions and adjusts test scenarios accordingly. This adaptability helps in maintaining tests as the application evolves.
• Integration Capabilities: Integration with existing mobile app testing frameworks, including Appium.

Best Suited for:

Test.ai’s AI automation tool is particularly well-suited for organizations involved in mobile app development and testing. It can be applied in scenarios where rapid changes occur in the application, and a high degree of automation efficiency is desired.

Conclusion

We are very sure new tools will be released even after this blog is published. Make sure to comment about the best AI automation testing tools you’ve used as we will be constantly updating this blog to keep up with the latest tools. Always remember that Artificial Intelligence works best when coupled with Human Intelligence. As an automation testing company, we have always used the approach when it comes to using automation in our testing. So no matter what tool is available, it all comes down to how you use them.

Step-by-Step Playwright Page Object Model Implementation Tutorial

by Chris Adams | Feb 20, 2024 | Automation Testing, Blog | 0 comments

Although Selenium is the most popular open-source tool for the automation testing of web applications, Playwright has been gaining much popularity as well. As the Page Object Model approach is widely used while creating test automation frameworks, we wanted to write an easy guide that can help everyone with the Playwright Page Object Model implementation. Being an experienced automation testing company, we started our test automation journey with Selenium. Since we’re always focused on being ahead of the curve, we have successfully implemented Playwright in numerous of our projects as well. So we will be exploring how to use Playwright effectively by applying Pages creation, Method implementation, and Locators.

Before heading to the Playwright Page Object Model Implementation, let’s see a brief intro of what it is, how it works, and the benefits it brings to the table.

What is the Page Object Model (POM)?

Page Object Model can be simply termed a design pattern that is used to improve the maintainability and reusability of your test automation scripts. It is achieved by encapsulating UI elements and interactions into separate classes called Page Objects.

How Does POM Work?

1.Page Objects: Each web page or component is represented by a Page Object, which contains the methods to interact with the elements on that page.

2.Reusable Components: Page Objects are designed for reuse across multiple test cases, reducing redundancy and promoting code efficiency.

3.Readability and Maintainability: Test scripts become more readable as they interact with the application through the methods provided by Page Objects. Additionally, maintenance becomes easier as changes to the UI are isolated within the corresponding Page Objects.

Benefits of Page Object Model:

Let’s take a look at the benefits we can reap by implementing the Page Object Model in Playwright or in general with any tool.

1. The Page Object Model facilitates the scaling of test suites by providing a structured approach to organizing test code.

2. By encapsulating UI interactions within Page Objects, changes to the UI can be made without impacting the entire test suite.

3. Page Objects can be reused across different test cases, promoting code efficiency and reducing duplication.

4. If there are any changes to the UI or even the functionality of a page, you only need to update the corresponding page object instead of modifying multiple test scripts, making maintenance easier.

Playwright Page Object Model Implementation:

To enable easy understanding, we have broken down the full process into small steps that you can follow. You can also quickly navigate through the blog by clicking on the specific step you need help with.

• Step 1: Install Node JS
• Step 2: Install the Required Libraries
• Step 3: Install Cucumber
• Step 4: Create the Configuration File
• Step 5: Create a New Feature File
• Step 6: Create a Step Definition
• Step 7: Playwright POM Implementation

Step 1: Install Node JS

1. Download Node.js and install it by following the specified instructions.

2. Once installed, open a terminal or command prompt.

3. Type node -v and press Enter to check if Node.js is installed correctly. If it has been installed correctly, you should see the version number.

Step 2: Install the Required Libraries

As a next step in our Playwright Page Object Model implementation, you have to install the following libraries using Node Package Manager.

npm i -D @playwright/test
npm i -D playwright 
npx playwright install

Note: Make sure to run this command in your project root directory.

Step 3: Install Cucumber

We generally follow the BDD approach as we’ve always found it to be the most effective while collaborating with our clients. And the BDD tool of our choice is Cucumber. You can install it using the below command.

npm i -D @cucumber/[email protected] @cucumber/pretty-formatter

After executing this command, the ‘package.json’ file will be updated to include the dependencies as shown below.

Note: Extensions such as ‘Cucumber’, ‘Cucumber (Gherkin)’, and ‘Playwright tests’ for VS Code need to be added. Please refer to the attached screenshot below.

Step 4: Create the Configuration File

Now that all the setup and prerequisite steps of the Playwright Page Object Model implementation are done, let’s see how to create the configuration file. The configuration file named cucumber.conf.js at the root level of the project is required to run our test script using Cucumber. You can use the below code to create it.

Code:

const { Before, BeforeAll, AfterAll, After, setDefaultTimeout } = require("@cucumber/cucumber");
const { chromium } = require("playwright");
const fs = require('fs');
setDefaultTimeout(60000); //Default timeout
// Launch the browser
BeforeAll(async function () {
    global.browser = await chromium.launch({
        headless: false,
        slowMo: 1000,
        browserContextOptions: {
            viewport: null,
        },
    });
    const context = await browser.newContext();
    page = await context.newPage();
});


// Quit the browser
AfterAll(async function () {
    await global.browser.close();
});


// Take a screenshot for each scenario
After(async function (testCase) {
    const screenshotPath = `screenshots/${Date.now()}_${testCase.result.status}.png`;
    await global.page.screenshot({ path: screenshotPath });
});

In the provided code snippet, we’ve implemented the browser configuration setup along with hook concepts. By using the ‘BeforeAll’ annotation, the browser will be launched and made available for the entire execution. Once the execution is complete, the browser will be closed according to the configuration set in the ‘AfterAll’ hooks.

Step 5: Creating a New Feature File

The next step in our Playwright Page Object Model implementation is to create a new feature file. First, you have to create a file named DemoLogin.feature within the ‘tests/acceptance/features’ directory as shown below.

Since we’re following the BDD approach, we’ll start by creating a feature file in the Gherkin language.

Here’s a simple syntax example of what a feature file looks like:

Step 6: Creating a Step Definition

Next up, we have to create a Step Definition in our Playwright Page Object Model implementation process. We need to create a Context file named DemoLoginSteps.js inside the tests/acceptance/stepDefinitions directory using the below command,

npm run test:e2e tests/acceptance/features/DemoLogin.feature

Note: It will be generate the step definition

Using above-mentioned snippet, we will add steps in the DemoLoginStep.js file

We have to create a context file named DemoLoginSteps.js inside the tests/acceptance/stepDefinitions directory and add it to the following script in your package.json file.

“–require tests/acceptance/stepdefinitions/*.js” specifies that the test should require all JavaScript files (*.js) in the tests/acceptance/stepdefinitions/ directory. These are the likely step definition files that define the behavior of the steps in the Cucumber scenarios.

Step 7: Playwright POM Implementation

Now we’re at the final stage of the Playwright Page Object Model implementation process.

• First up, create a folder named “pages” at the project level.
• Use this folder to store classes or modules that represent various web pages or components within an application.
• Inside this “pages” folder, create .js files named loginPage.js, and homePage.js for better clarity.
• These files encapsulate the functionality and elements specific to the respective pages, facilitating easier interaction and testing of the functionality.

Define the web elements and Methods for the two pages we’ve created (i.e.) LoginPage and HomePage.

In the above snippet, we are maintaining the web elements in the Loginpage.js file.

We’ve created test scripts as functions and now we want to use these functions in our step definitions. We’ve also defined our web pages using the ‘require’ keyword in Step definition. Additionally, we’re using a page instance to ensure that the browser instance is shared across all pages.

So we have implemented the Playwright Page Object Model for the Login and Home Page by specifying the methods and objects in the js files.

Execute the test scripts specifically for a feature file named DemoLogin.feature, which is located in the tests/acceptance/features/ directory by using the below-mentioned command.

<npm run test:e2e tests/acceptance/features/DemoLogin.feature

Note: The browser will open and execute all the scenarios defined in the feature file.

Conclusion:

We hope you now have a clear understanding of the Playwright Page Object Model implementation by adhering to best practices and design patterns. We’ve additionally explored the advantages of utilizing the Page Object Model (POM). If the process of adding new scripts is time-consuming, it could indicate a lack of reusable scripts or that you’re in the initial stages of implementing automation testing for your project. Being a leading test automation service provider, we always implement the Page Object Model in our projects and hope you will do so as well.

Playwright Cross-browser Testing Tutorial

by Anika Chakraborty | Jan 9, 2024 | Automation Testing, Blog | 0 comments

Playwright is a robust tool that automates cross-browser testing across Chromium, Firefox, and WebKit using a single API. It is an open source software developed and launched by Microsoft in 2020 and quickly gained popularity. Cross-browser testing using Playwright is a seamless process that enables efficient testing to identify and address potential issues, guaranteeing a seamless user experience. Being an Automation Testing company, we have hands-on experience using Playwright for cross-browser testing. So, in our Playwright cross-browser testing tutorial blog, we’ll be explaining how to set up and run test scripts for different browsers in Playwright.

Why is Cross-Browser Testing Needed?

Cross-browser testing is pivotal to ensure web applications work efficiently across different browsers. Users access our website or web application on a diverse landscape of browsers and it’s crucial that our platform performs well on their preferred browser. If our site fails to function adequately, they may switch to a competitor’s website instead.

In Carrie Ryan’s words, “Survivors aren’t always the strongest; sometimes they’re the smartest”.

Effective cross browsing testing makes our website or application the smartest in the ecosystem. It helps maintain consistency in the user interface and prevents issues like broken layouts or non-functional features. Missing out on supporting a major browser can result in losing a significant portion of the potential user base.

Why Playwright?

Playwright is a Node.js library and many testers consider it to be a reliable framework for its multi-browser support, web-first assertions, unified API, built-in reports, and parallel test execution capabilities. It has remarkably advanced features and is notable for its concise syntax and execution speed. And like Selenium, Playwright facilitates the use of multiple languages including TypeScript, JavaScript, Python, .NET, and Java. Playwright cross-browser testing helps deliver a high-quality web experience due to its benefits such as early issue detection, regulatory compliance, and performance optimization.

List of Supported Browsers:

• Google Chrome
• Safari
• Firefox

Tutorial to setup Playwright for Cross-Browser Testing

In order to help you navigate through the blog with ease, we have segregated the Playwright cross-browser testing tutorial as shown below,

• How to Install and Run Playwright Cross-Browser Test Script
• Running Test Scripts on Multiple Browsers
• Running Test Scripts in a Particular Browser
• Alternate approach to run the test in different browsers
• Creating a Cross-Browser Testing Function

How to Install and Run Playwright Cross-Browser Test Script

First up, let’s find out how you can install and run Playwright.

Step 1:

Create a demo folder and open it in VS Code.

Step 2:

Install Playwright by entering the below command in that particular folder.

<npm init playwright@latest>

Step 3:

Once Playwright is installed, you will see a project structure that you can use to run test scripts on multiple browsers.

Running Test Scripts on Multiple Browsers

Now that we are all set, let’s find out how we can run the test scripts on multiple browsers at once in our Playwright cross-browser testing tutorial.

Step 1:

Open the playwright.config.js file in the project structure. Ensure that different browsers are configured by default in the playwright.config.js file.

Step 2:

Run an example test in the tests folder using the below command

<npx playwright test>

It will execute the tests in different browsers that are configured in the playwright.config.jsfile.

Step 3:

After the tests have been executed, you can see the report by executing the following command

<npx playwright show-report>

Running Test Scripts in a Particular Browser

Apart from running the test scripts in multiple browsers, you’ll also face the need to run your test scripts on a particular browser. And that is what we’ll be covering now in our Playwright cross-browser testing tutorial.

Chrome:

Run the below command to execute the tests in the Chrome browser

<npx playwright test --project=chromium>

You can view the report by executing the below command

<npx playwright show-report>

Firefox:

Run the below command to execute the tests in the Firefox browser

<npx playwright test --project=firefox>

You can view the report by executing the specified command

<npx playwright show-report>

Safari:

Run the below command to execute the tests in the Safari browser

<npx playwright test --project=webkit>

You can view the report by executing the mentioned command

<npx playwright show-report>

Alternate approach to run the test in different browsers

There is also an alternative approach you can follow to achieve Playwright Cross-browser testing. All you have to do is Click on TEST EXPLORER -> Click the drop down icon on the Run Test button. Here you will find different browsers to execute the test.

If you click on any of the browsers listed, the test will be executed on that particular browser. We can also change the default browser by clicking the Select Default Profile and choosing the default browser from the list.

Launching Different Browsers using Code

Playwright supports testing on Chromium, Firefox, and WebKit-powered browsers. You can launch different browsers by importing the respective browser classes from Playwright:

<const { chromium, firefox, webkit } = require("playwright");>

To launch a specific browser, use the launch() method:

<const browser = await chromium.launch();>

Replace Chromium with Firefox or Webkit to launch Firefox or WebKit browsers.

Creating a Cross-Browser Testing Function

Now that we know how to launch different browsers, let’s create a function that accepts a website URL and tests it across multiple browsers in our Playwright cross-browser testing tutorial. This function launches each browser, navigates to the specified website URL, and runs the tests or assertions.

<const { chromium, firefox, webkit } = require("playwright");
const testOnAllBrowsers = async (websiteUrl) => {
 const browsers = [chromium, firefox, webkit];
 for (const browserType of browsers) {
   const browser = await browserType.launch();
   const context = await browser.newContext();
   const page = await context.newPage();
   await page.goto(websiteUrl);
   // Perform your tests/assertions here
   // ...
   await browser.close();
 }
};
>

Note: Remember to close the browser using browser.close() after you finish your tests.

Conclusion

Playwright offers a seamless way to assess the website’s performance across various browsers and viewport dimensions. Through the automation capabilities and advanced features provided by Playwright, you can streamline the testing procedure, guaranteeing a uniform user experience and identifying potential issues early in the development cycle. We hope you now have a clear understanding of how to perform Playwright cross-browser testing and found value in reading our blog. Stay connected to our space for more such informative software testing content.

A Conclusive Allure Report Tutorial with Sample Report

by Mollie Brown | Mar 16, 2023 | Automation Testing, Blog | 10 comments

In our Allure Report Tutorial, we will be explaining the steps to generate an Allure report and show you the different features that are available as reporting is an integral part of every automation testing framework. Without proper reports, you will not be able to analyze the results of your execution and take further action. Though automation tests are created and executed by people with technical knowledge, the people who read the reports may not possess too much technical knowledge. So it is important for reports to be visually strong and easy to understand.

We have chosen Allure as it is an open-source test reporting tool that can be used to represent the results of your test execution concisely in the form of interactive and comprehensive web reports. We also have first-hand experience in using Allure reports to create top-notch reports while delivering high-quality automation testing services to our clients. So using that experience, we have created and used a sample report in our Allure Report tutorial to make it easier for you to understand.

Allure Report Tutorial

You’d have to follow the below-mentioned installation steps if you haven’t yet installed Allure on your computer. If you already have Allure installed and are aware of the dependencies, you can directly proceed further in our Allure Report Tutorial. We have listed the important annotations you’ll have to know, defined the project structure, and provided the code snippets you can use to create your Allure report.

Installation & Set up

1. Download the latest version as a zip archive from Github Releases.

2. Unpack the archive to the allure-commandline directory.

3. Navigate to the bin directory.

4. Use allure.bat for Windows or allure for Unix platforms.

5. Add allure to the system PATH.

Note: Allure CLI requires Java Runtime Environment to be installed.

Add the Dependencies & Run

• Update the Properties section in the Maven pom.xml file
• Add Selenium, JUnit4 and Allure-JUnit4 dependencies in POM.xml
• Update Build Section of pom.xml in Allure Report Project.
• Create Pages and Test Code for the pages

Once you have completed all the above steps, you can run the test and generate your Allure Report by following the steps mentioned later on in our Allure report tutorial. Now let’s take a look at the code for your POM.xml file.

Pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>

   <groupId>org.example</groupId>
   <artifactId>Selenium-Allure-Demo</artifactId>
   <version>1.0-SNAPSHOT</version>

   <properties>
       <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
       <selenium.version>3.141.59</selenium.version>
       <testng.version>7.4.0</testng.version>
       <allure.testng.version>2.14.0</allure.testng.version>
       <maven.compiler.plugin.version>3.5.1</maven.compiler.plugin.version>
       <maven.compiler.source>8</maven.compiler.source>
       <maven.compiler.target>8</maven.compiler.target>
       <aspectj.version>1.9.6</aspectj.version>
       <maven.surefire.plugin.version>3.0.0-M5</maven.surefire.plugin.version>
   </properties>

   <build>

       <plugins>
           <!-- Compiler plug-in -->

           <plugin>
               <groupId>org.apache.maven.plugins</groupId>
               <artifactId>maven-compiler-plugin</artifactId>
               <version>${maven.compiler.plugin.version}</version>
               <configuration>
                   <source>${maven.compiler.source}</source> <!--For JAVA 8 use 1.8-->
                   <target>${maven.compiler.target}</target> <!--For JAVA 8 use 1.8-->
               </configuration>
           </plugin>

           <!-- Added Surefire Plugin configuration to execute tests -->
           <plugin>
               <groupId>org.apache.maven.plugins</groupId>
               <artifactId>maven-surefire-plugin</artifactId>
               <version>${maven.surefire.plugin.version}</version>
               <configuration>
                   <suiteXmlFiles>
                       <suiteXmlFile>TestNG.xml</suiteXmlFile>
                   </suiteXmlFiles>
                   <argLine>
                       -javaagent:"${settings.localRepository}/org/aspectj/aspectjweaver/${aspectj.version}/aspectjweaver-${aspectj.version}.jar"
                   </argLine>
               </configuration>
               <dependencies>

                   <!-- https://mvnrepository.com/artifact/org.aspectj/aspectjweaver -->
                   <dependency>
                       <groupId>org.aspectj</groupId>
                       <artifactId>aspectjweaver</artifactId>
                       <version>${aspectj.version}</version>
                   </dependency>
               </dependencies>
           </plugin>
       </plugins>
   </build>
   <dependencies>

       <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
       <dependency>
           <groupId>org.seleniumhq.selenium</groupId>
           <artifactId>selenium-java</artifactId>
           <version>${selenium.version}</version>
       </dependency>

       <!-- https://mvnrepository.com/artifact/org.testng/testng -->
       <dependency>
           <groupId>org.testng</groupId>
           <artifactId>testng</artifactId>
           <version>${testng.version}</version>
           <scope>test</scope>
       </dependency>

       <!-- https://mvnrepository.com/artifact/io.qameta.allure/allure-testng -->
       <dependency>
           <groupId>io.qameta.allure</groupId>
           <artifactId>allure-testng</artifactId>
           <version>${allure.testng.version}</version>
           <scope>test</scope>
       </dependency>
   </dependencies>

</project>

Project structure with Allure Report:

In our Allure report tutorial, we have basically kept two packages called ‘pages’ and ‘tests’. The pages package will include all the pages you want to test and the tests package will include the different tests that you want to perform.

Pages Package:

There are two pages that we have added to our package, and they are the Dashboard page and the Login page.

Dashboard page:

package AllureDemo.pages;

import io.qameta.allure.Step;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.testng.Assert;

public class DashboardPage {

   WebDriver driver;

   By dashboardPageTitle = By.xpath("(//span[.='Dashboard'])[1]");

   By options = By.xpath(
           "//div[@title='Assign Leave']");

   public DashboardPage(WebDriver driver) {
       this.driver = driver;

   }

   @Step("Verify title of Dashboard page")
   public void verifyDashboardPageTitle() {
       String DashboardPageTitle = driver.findElement(dashboardPageTitle).getText();
       Assert.assertTrue(DashboardPageTitle.contains("Dashboard"));
   }

   @Step("Verify Quick Launch Options on Dashboard page")
   public void verifyQuickLaunchOptions() {
       String QuickLaunchOptions = driver.findElement(options).getAttribute("title");
       Assert.assertTrue(QuickLaunchOptions.contains("Assign Leave"));
   }

}

Login page:

package AllureDemo.pages;

import io.qameta.allure.Step;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.testng.Assert;

public class LoginPage {

   WebDriver driver;

   By userName = By.name("username");

   By password = By.name("password");

   By titleText = By.name("username");

   By login = By.xpath("//button[@type='submit']");

   By errorMessage = By.xpath("//p[.='Invalid credentials']");

   public LoginPage(WebDriver driver) {
       this.driver = driver;
   }

   // Set user name in the textbox
   public void setUserName(String strUserName) {
       driver.findElement(userName).sendKeys(strUserName);
   }

   // Set password in the password textbox
   public void setPassword(String strPassword) {
       driver.findElement(password).sendKeys(strPassword);
   }

   // Click the login button
   public void clickLogin() {
       driver.findElement(login).click();
   }

   @Step("Verify title of Login Page")
   public void verifyPageTitle() {
       String loginPageTitle = driver.findElement(titleText).getAttribute("name");
       Assert.assertTrue(loginPageTitle.contains("username"));
   }

   /* Failed Test */
   @Step("Verify error message when invalid credentail is provided")
   public void verifyErrorMessage() {
       String invalidCredentialErrorMessage = driver.findElement(errorMessage).getText();
       Assert.assertTrue(invalidCredentialErrorMessage.contains("Invalid credentials"));
   }

   @Step("Enter username and password")
   public void login(String strUserName, String strPasword) {

       // Fill in the user name
       this.setUserName(strUserName);

       // Fill in the password
       this.setPassword(strPasword);

       // Click the Login button
       this.clickLogin();

   }
}

Tests Package:

For our Allure Report tutorial, we have added 3 tests by the names base test, dashboard test, and login test. Let’s take a look at the code snippets for each of these tests below.

Base test:

package AllureDemo.tests;

import AllureDemo.pages.DashboardPage;
import AllureDemo.pages.LoginPage;
import io.qameta.allure.Step;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.BeforeMethod;

import java.util.concurrent.TimeUnit;

public class BaseTest {

   public static WebDriver driver;
   LoginPage objLogin;
   DashboardPage objDashboardPage;

   @Step("Start the application")
   @BeforeMethod
   public void setup() {
       System.setProperty("webdriver.chrome.driver",
               "C:\\Users\\Codoid\\Documents\\QA-SAM-March2023-Stories\\resources\\drivers\\chromedriver_win.exe");
       driver = new ChromeDriver();
       driver.manage().window().maximize();
       driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
       driver.get("https://opensource-demo.orangehrmlive.com/");
   }

   @Step("Stop the application")
   @AfterMethod
   public void close() {
       driver.close();
   }
}

DashboardTests

package AllureDemo.tests;

import AllureDemo.pages.DashboardPage;
import AllureDemo.pages.LoginPage;
import io.qameta.allure.*;
import org.testng.ITestNGListener;
import org.testng.annotations.Listeners;
import org.testng.annotations.Test;

@Epic("Web Application Regression Testing")
@Feature("Dashboard Page Tests")
@Listeners(TestExecutionListener.class)
public class DashboardTests extends BaseTest {

   LoginPage objLogin;
   DashboardPage objDashboardPage;

   @Severity(SeverityLevel.BLOCKER)
   @Test(priority = 0, description = "Verify Dashboard Page")
   @Description("Test Description : After successful login to application opens Dashboard page")
   @Story("Successful login of application opens Dashboard Page")

   public void DashboardTest() {

       objLogin = new LoginPage(driver);

       // Login to the application
       objLogin.login("Admin", "admin123");

       // Go to the dashboard page
       objDashboardPage = new DashboardPage(driver);

       // Verify the dashboard page
       objDashboardPage.verifyQuickLaunchOptions();

   }

   private class TestExecutionListener implements ITestNGListener {
   }
}

LoginTests

package AllureDemo.tests;

import AllureDemo.pages.DashboardPage;
import AllureDemo.pages.LoginPage;
import io.qameta.allure.*;
import org.testng.annotations.Listeners;
import org.testng.annotations.Test;

@Epic("Regression Tests")
@Feature("Login Tests")
@Epic("Web Application Regression Testing")
@Feature("Login Page Tests")
@Listeners(TestExecutionListener.class)
public class LoginTests extends BaseTest {

   LoginPage objLogin;
   DashboardPage objDashboardPage;

   @Severity(SeverityLevel.NORMAL)
   @Test(priority = 0, description = "Verify Login Page")
   @Description("Test Description : Verify the title of Login Page")
   @Story("Title of Login Page")
   public void verifyLoginPage() {

       // Create Login Page object
       objLogin = new LoginPage(driver);

       // Verify login page text
       objLogin.verifyPageTitle();
   }

   /* Failed Test */
   @Severity(SeverityLevel.BLOCKER)
   @Test(priority = 1, description = "Login with invalid username and password")
   @Description("Test Description : Login Test with invalid credentials")
   @Story("Unsuccessful Login to Application")
   public void invalidCredentialTest() {

       // Create Login Page object
       objLogin = new LoginPage(driver);
       objLogin.login("test", "test123");

       // Verify login page text
       objLogin.verifyErrorMessage();

   }
}

TestExecutionListener

package AllureDemo.tests;

import io.qameta.allure.Attachment;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.testng.ITestListener;
import org.testng.ITestResult;

public class TestExecutionListener implements ITestListener {

   @Attachment(value = "Screenshot of {0}", type = "image/png")
   public byte[] saveScreenshot(String name, WebDriver driver) {
       return (byte[]) ((TakesScreenshot) driver).getScreenshotAs(OutputType.BYTES);
   }

   @Override
   public void onTestFailure(ITestResult result) {
       saveScreenshot(result.getName(), BaseTest.driver);
   }

}

TestNG XML

Test Execution

In order to execute your tests, you have to open command prompt, go to the project directory, and write the below command.

allure serve allure-results

Allure in Cucumber BDD

You can also add Allure to your Cucumber BDD framework by adding the below dependency in the POM.xml file.

<!-- https://mvnrepository.com/artifact/io.qameta.allure/allure-cucumber-jvm -->
   <dependency>
       <groupId>io.qameta.allure</groupId>
       <artifactId>allure-cucumber6-jvm</artifactId>
       <version>2.14.0</version>
   </dependency>

</dependencies>

Add the following plugin to your Runner cukes file by referring to the below screenshot

"io.qameta.allure.cucumber6jvm.AllureCucumber6Jvm"

Sample Allure Report

Before we proceed to see the sample report in our Allure report tutorial, let’s first explore the 5 most important or commonly used annotations used in Allure. You can expand the capabilities of an Allure report by using more annotations, but these 5 will help you generate your basic first report.

• Allure Report Overview
• Categories in Allure Report
• Suites in Allure Report
• Graphs in Allure Report
• Behaviors in Allure Report
• Timeline in Allure Report
• Packages in Allure Report

Important Annotations used in the Allure report

• @Step – This annotation is used as a step definition to define any modifier with the parameter.
• @Epic – This annotation is used to define the large component or a whole product under which the Allure depends on.
• @Feature – We can use it to represent all the possible test coverage options based on the Test scenarios.
• @Stories – Every Epic has many stories and each of those stories represent a sub-product or sub-component.
• @Attachment – At the end of our test execution, we will have to add screenshots to our reports. And this annotation can be used to define the position of the screenshot.

Allure Report Overview

As you can see in the above screenshot, the Allure report overview has different sections such as suites, environment, categories, and so on. Let’s find out what they are in our Allure report tutorial.

Suites

A suite is a group of tests that share a common context such as a specific test environment or a particular test category. Suites are represented by colored blocks in the report’s timeline, and you can drill down into the details of each suite by clicking on them.

Environment:

The environment section contains information about the operating system, browser, framework, and version of the tools used.

Features By Stories:

In order to group test cases by features or user stories in an Allure report, you can use the @Feature or @Story annotations in your test code.

Categories:

Once this annotation is added to the test, the test cases will be grouped under the “smoke” and “regression” categories when your Allure report is generated. It is also possible to use the allure.category property to add the category information to the test case.

Executors:

Allure also supports custom executors that can be used when your current executors do not match the requirements of your project. Kindly note that they have to be implemented as a separate component.

Graphs:

Graphical representation of the status, severity, duration, and duration trend will also be available in an Allure report’s overview.

Timeline:

This section in an Allure report’s overview provides a graphical representation of the test execution. It will show the duration of each test case, and also specifies the order in which they were executed.

Categories in Allure Report

Next up in our Allure report tutorial, we’re going to explore the Categories tab that gives you the way to create custom defects classification for your test results.

By default, there will be two categories of defects in an Allure report:

• Product defects (Tests that failed due to an issue in the product)
• Test defects (Broken tests)

But you also have the option to create custom defect classifications such as skipped tests, outdated tests, and so on. You can do so by adding a categories.json file to the allure-results directory before report generation.

categories.json

[
  {
    "name": "Ignored tests", 
    "matchedStatuses": ["skipped"] 
  },
  {
    "name": "Infrastructure problems",
    "matchedStatuses": ["broken", "failed"],
    "messageRegex": ".*bye-bye.*" 
  },
  {
    "name": "Outdated tests",
    "matchedStatuses": ["broken"],
    "traceRegex": ".*FileNotFoundException.*" 
  },
  {
    "name": "Product defects",
    "matchedStatuses": ["failed"]
  },
  {
    "name": "Test defects",
    "matchedStatuses": ["broken"]
  }
]

(mandatory) category name

(optional) list of suitable test statuses. Default [“failed”, “broken”, “passed”, “skipped”, “unknown”]

(optional) regex pattern to check test error message. Default “.*”

(optional) regex pattern to check stack trace. Default “.*”

Test result falls into the category if their status is in the list and both the error message and stack trace match the pattern.

Suites in Allure Report

As you can see in the above screenshot, the Suites tab shows a standard structural representation of the executed tests, grouped by the suites and classes that can be found.

Graphs in Allure Report

Graphs allow you to see different statistics collected from the test data such as status breakdown, severity, and duration diagrams. They will be very effective in helping us understand the status of our test execution easily.

Behaviors in Allure Report

Behaviors group the test results according to Epic, Feature, and Story tags. It also consists of the status of each and every execution and has a detailed description as well.

Timeline in Allure Report

Allure adaptors will collect the accurate timings of the tests and arrange them in a sequential or parallel structure based on the timing. This visualization of the test execution will be available in the Timeline section of our Allure report.

Packages in Allure Report

The packages tab represents a tree-like layout of the test results, grouped by different packages as shown in the above image.

Advantages of Allure Report

In general, effective reporting can help shorten the development/QA lifecycle by providing both the developers and testers with all the information they will need. As seen above in our Allure report tutorial, it enables us to categorize the test failures into bugs, broken tests, and logs. Other vital information such as steps, fixtures, attachments, timings, history, and integrations with TMSs are also available to configure bug-tracking systems.

Managers and stakeholders will have a clear understanding of the project’s big picture, progress, timeline, defects clustering info, and so on. Now let’s take a look at the technical advantages that Allure reports have to offer.

• Allure is an open-source report engine built using AngularJS.
• It supports various frameworks such as JUnit, TestNG, Cucumber-Java, Selenide, Pytest, behav, Jasmine, Mocha, RSpec, Spock, PHPUnit, SpecFlow, NUnit, MSTest, etc.
• You can create visually rich reports that can be easily understood even by non-technical team members such as Stakeholders and Business Analysts.
• It has a command line interface to generate reports based on maven surefire plugins.
• It supports popular CI/CD platforms like Jenkins, TeamCity, Banboo, Gradle, Maven, and CodeFresh.
• Modularity and extensibility of Allure guarantee that you will always be able to fine-tune it to make Allure suit your needs better.

Conclusion

As a lightweight, flexible, multilingual test report tool, Allure Framework provides a neat web report that not only illustrates what has been tested in a concise manner. It also gives everyone involved in developing the maximum amount of useful information from testing every day. We hope that our Allure Report tutorial has given you a clear understanding of how to generate Allure reports for your project. As a leading automation testing company, we have also written a blog highlighting the key differences between Allure report and Extent report. So make sure to subscribe to our newsletter to not miss out on any of our latest blogs and updates.