The previous blog post explored the initial steps of setting up Azure DevOps, creating projects, and navigating the Overview section. Now, let’s delve deeper into the other core sections of the Azure DevOps interface, Boards, and Repos, each playing a crucial role in your development lifecycle.

Read the first part of the blog here: A Beginner’s Guide to Azure DevOps

Navigating the Azure DevOps Interface

The Azure DevOps interface is divided into sections mainly – Overview, Repos, Pipelines, Boards, Test Plans, and Artifacts. Let’s continue learning about the different sections.

Boards

Azure DevOps Boards enable teams to organize, visualize, and track their work effectively throughout the development lifecycle. It provides a set of features that help teams organize their tasks, collaborate effectively, and deliver high-quality software.

Work Items

Work Items are the building blocks of Azure DevOps Boards. They represent tasks, issues, or ideas that need to be tracked and managed. Work Items can be of different types:

• User Stories: Capture user requirements and functionalities planned for your application.
• Tasks: Break down user stories into smaller, actionable items for developers to complete.
• Bugs/Issues: Track and manage software defects discovered during development or testing.
• Epics: Group large or complex user stories that span multiple development cycles.

As a tester, you can use Work Items to track your testing activities, log bugs and issues, and collaborate with your team members. You can assign work items to team members, link to other Work Items, and schedule for specific iterations or sprints.

Boards

Boards provide a visual representation of Work Items and their status. Azure DevOps Boards offer display using Kanban methodology. Kanban Boards are ideal for managing work in progress. They provide a visual representation of Work Items moving through different stages of completion, such as To Do, In Progress, and Done. Testers can use Kanban Boards to track the progress of their testing activities and ensure that all tasks are completed on time.

Backlogs

Backlogs are lists of all Work Items that are yet to be scheduled or planned. Backlog serve as a central repository for user stories, bugs, and other tasks. Azure DevOps Boards offer Product Backlogs and Sprint Backlogs to help teams manage their work effectively.

• Product Backlog: Product Backlog contains a list of all Work Items that you need to be complete for the project. Testers can use the Product Backlog to prioritize their testing activities and ensure that critical tasks are addressed first.
• Sprint Backlog: Sprint Backlog contains a list of Work Items that you are planning for a specific sprint. Testers can use the Sprint Backlog to track their testing tasks for each sprint and monitor their progress.

Sprint

Sprint is a time-boxed iteration in which a set of Work Items is completed. Sprints are used in Agile methodologies to deliver incremental value to the customer. Testers can use Sprints to plan their testing activities for each iteration and ensure that all tasks are completed within the specified timeframe.

Queries

Queries allow teams to create custom queries to filter and sort Work Items based on specific criteria. Testers can use Queries to create lists of Work Items for testing, identify bugs and issues, and track the progress of their testing activities.

• Pre-defined Queries: Azure DevOps offers pre-built queries for common use cases, such as viewing open bugs or tasks assigned to a specific developer.
• Custom Queries: You can create custom queries with specific filters to target work items based on various attributes like work item type, priority, or creation date.

Delivery Plans

Delivery Plans provide a timeline view of Work Items across multiple teams and projects. Testers can use Delivery Plans to track the progress of their testing activities in relation to the overall project timeline and identify any dependencies or bottlenecks.

Analytics View

Analytics View provides a set of interactive reports and dashboards that help teams track and visualize their progress. Testers can use Analytics View to gain insights into their testing activities, identify trends and patterns, and make data-driven decisions to improve their testing process. Analytics views let you create filtered views of simple board data for Power BI reporting

Repos

Azure DevOps Repos stands as the cornerstone of your codebase management within Azure DevOps. Integrated seamlessly with Git and industry-standard version control system (VCS).

Files

Files are the individual units of your codebase in Azure DevOps Repos. They contain the actual code, configuration, or documentation for your project. Testers can view, edit, and manage files directly within Azure DevOps, making it easy to update test scripts, documentation, or configuration files as needed.

Commits

Commits represent a snapshot of changes made to one or more files in your repository. Each commit has a unique identifier and includes a message describing the changes. Testers use commits to track changes, review the history of the codebase, and understand the reason for specific changes.

Pushes

Pushes are the action of uploading commits from your local machine to the Azure DevOps repository. When you complete a set of changes and are ready to share them with the team, you push your commits to the repository. This makes the changes available to other team members for review and integration.

Branches

Branches are separate lines of development within the repository. They allow testers to work on features or fixes without affecting the main codebase. You can create branches from the main branch, make changes, and merge them back when the work is complete. Branches help isolate changes, enabling parallel development and easier collaboration. This allows parallel development and experimentation.

Tags

Tags are a way to bookmark specific commits, such as a release or a milestone. Testers can use tags to identify important points in the project’s history, making it easier to reference specific versions of the codebase. You can use Tags in conjunction with releases to track which code was deployed to a particular environment.

Pull Requests

Pull Requests (PRs) are a mechanism for code review and collaboration in Azure DevOps Repos. Once developer completes their work on a branch, they submit a pull request (PR) for review and merging. This initiates a collaborative process:

• Code Review: Other developers can review the changes proposed in the PR, providing feedback and suggestions.
• Merging: After a successful review, you can merge the changes in the branch back into the main codebase, integrating the work into the project.

Advanced Settings

Azure DevOps Repos offers a range of advanced settings to customize the behavior of your repository. Testers can configure settings related to permissions, branch policies, merge strategies, and more.

These components work together seamlessly in Repos. Developers make changes to files, commit them with descriptive messages, and push them to the repository. Branches allow for the isolated development on features, while PRs facilitate collaboration and code review. Finally, advanced settings provide granular control over access and code quality.

Conclusion

This concludes our second part of the exploration of the core sections within the Azure DevOps interface. By understanding the functionalities of each section, you can leverage the platform’s full potential to streamline your software development lifecycle, foster collaboration, and deliver high-quality applications effectively.

Stay tuned for the next posts where we will delve into other core sections of Azure DevOps.

Introduction

Azure DevOps is a complete collection of tools and services that assist in the development, testing, and deployment of software applications. There is a list of services presented, which includes version control, agile planning, build automation, and release management all with integration on a single platform. In this beginner’s guide, we’ll take a look at how to set up Azure DevOps, create projects, familiarize yourself with the interface, and understand the various sections.

Why Azure DevOps is Ideal for Testing

Azure DevOps offers a comprehensive suite of tools that cater to the diverse needs of testing teams. Here’s why Azure DevOps stands out for testing:

1. Test Planning and Management: Azure DevOps provides tools for creating and managing test plans. Teams can define test suites, test configurations, and test cases, and track the progress of testing activities. This helps in organizing testing efforts and ensuring comprehensive test coverage.
2. Automated Testing: Azure DevOps supports automated testing through integration with popular testing frameworks like Selenium, JUnit, and NUnit. Teams can automate test execution as part of their CI/CD pipelines, enabling faster and more reliable testing.
3. Continuous Integration and Deployment (CI/CD): Azure DevOps offers robust CI/CD capabilities, allowing teams to automate build, test, and deployment processes. This helps in delivering high-quality software faster and more frequently.
4. Collaboration and Communication: Azure DevOps promotes collaboration among team members by providing shared dashboards, real-time updates, and integration with communication tools like Microsoft Teams. This enhances team coordination and visibility into testing activities.
5. Reporting and Analytics: Azure DevOps provides detailed reporting and analytics capabilities. It allows teams to gain insights into testing performance, identify bottlenecks, and make data-driven decisions to improve testing efficiency.
6. Integration with Azure Services: Azure DevOps integrates seamlessly with other Azure services, such as Azure Boards, Azure Repos, and Azure Pipelines. This enables teams to leverage the full power of the Azure ecosystem in their testing projects.
7. Security and Compliance: Azure DevOps prioritizes security and compliance, ensuring that testing data is secure and meets regulatory requirements. This is crucial for organizations operating in regulated industries.
8. Scalability and Flexibility: Azure DevOps is highly scalable and flexible, making it suitable for teams of all sizes. Whether you’re a small team or a large enterprise, Azure DevOps can accommodate your testing needs.

Setting Up Azure DevOps

To get started with Azure DevOps, follow these steps:

1. Sign Up for Azure DevOps: Go to the Azure DevOps website (https://azure.microsoft.com/en-us/products/devops) and sign up for an account. You can use your Microsoft account or create a new one.
2. Create an Organization: In Azure DevOps, an organization is a logical container for projects and teams. It serves as the top-level management unit within Azure DevOps, allowing you to group related projects and resources together. When you sign up for Azure DevOps, you are required to create an organization, which acts as a central hub for all your software development activities. After signing up, we will create an organization. Give your organization a name and select a region for your data.
3. Access Your Azure DevOps Account: After creating your organization, click on the Organization, it will take you to the Azure DevOps dashboard. This is where you will manage your projects. You can access your organization’s Azure DevOps URL by “https://dev.azure.com/<organization-name>”.

Creating Projects

In Azure DevOps, a project is a container for all the work done within a specific team or for a product. It provides a structure for organizing your work items, repositories, pipelines, and other resources related to your software development process. With your Azure DevOps account set up, you can now create a new project:

1. Navigate to the Projects Page: Click on the “Projects” tab in the Azure DevOps dashboard to access the Projects page.
2. Create a New Project: Click on the “New Project” button to create a new project. Enter a name and description for your project, choose visibility (Public or Private), choose a version control system (Git or Team Foundation Version Control), and select a process template (Basic, Agile, Scrum, or CMMI).
3. Configure Project Settings: Once your project is created, you can configure its settings, such as adding team members, setting up work items, and configuring boards.

Navigating the Azure DevOps Interface

The Azure DevOps interface is divided into several main sections:

Overview

The Overview section in Azure DevOps provides a high-level summary of your project, including key metrics, recent activities, and important information. It serves as a central hub for team members to quickly access relevant project information and stay up-to-date with project progress.

1. Summary: The Summary tab provides a snapshot of your project’s status and progress. It includes information such as the number of work items completed, in progress, and planned. The Summary tab also displays recent activities, such as code changes, build results, and work item updates. It helps team members stay informed about the latest developments in the project.
2. Dashboard: The Dashboard tab allows you to create customizable dashboards. It provides a visual representation of your project’s metrics and KPIs. You can add various widgets to your dashboard, such as charts, graphs, and work item queries, to track progress, monitor trends, and visualize data. Dashboards can be shared with team members, providing transparency and enabling collaboration. Dashboards update in real time.
3. Wiki: The Wiki tab provides a collaborative space for team members to create and share project documentation, meeting notes, and other information. The Wiki supports Markdown formatting, making it easy to create well-formatted and organized content. Team members can collaborate on wiki pages, track changes, and refer back to previous versions, ensuring that project documentation is up-to-date and accessible.

Additional Resources

• Azure DevOps Documentation: https://learn.microsoft.com/en-us/azure/devops/?view=azure-devops
• Azure DevOps Tutorials: https://azure.microsoft.com/en-us/solutions/devops/tutorial

Conclusion

Azure DevOps provides a powerful set of tools for managing the entire software development lifecycle. In this guide, we covered the basics of setting up Azure DevOps, creating projects, and navigating the interface. We covered one section in this blog and will discuss the remaining sections in the upcoming blog   As you become more familiar with Azure DevOps, you can explore its advanced features to further streamline your development process.

Katalon Studio is a robust test automation tool that offers a range of features to streamline the testing process. One such feature is StudioAssist, which provides intelligent suggestions and code completion to help testers write tests more efficiently. This blog will explore how StudioAssist can enhance your test automation efforts and provide practical tips for using this feature effectively.

StudioAssist

StudioAssist is a powerful feature within Katalon Studio. It helps improve automated and manual testing for web, mobile, and desktop applications. Support for programming languages like Groovy and Java allows for the creation of intricate and adaptable test scripts. It leverages machine learning algorithms to analyze your test scripts and provide contextually relevant suggestions, saving you time and effort in writing and maintaining test scripts. StudioAssist is built based on OpenAI GPT API and is capable of intelligent code generation and explanation.

StudioAssist has two main features: it generates test script code from the prompt given in plain text and explains code from a test case script. We will dive into each concept one by one.

StudioAssist Prerequisites

• StudioAssist feature is available from Katalon Studio Version 9.4 and above. The feature is auto-enabled by default.
• To use the StudioAssist code generation feature with maximum efficiency, you need to have existing objects from previous record and playback sessions in your object repository.

Code Generation with StudioAssist

To understand the code generation feature of StudioAssist, we will use a sample website to create our test cases.

As stated in the pre-requisite, we need to store the test objects (web elements) in the Object Repository to use the code generation feature more efficiently. For the same, we can either record a test using the ‘Record Web’ feature, which captures all the web elements, or we can use the ‘Web Spy’ feature to capture the web elements individually and store them in the Object Repository.

You can refer to my blog series on Katalon Studio to learn more about Katalon Studio and its features Demystifying Test Case Creation in Katalon Studio: Record, Manual, and Script Modes / Blogs / Perficient.

Let’s use the recording feature, record a test, and try to capture as many web elements as possible. I used a sample website with a Registration page for our demo purpose.

Creating a Test Case Using the Recording Feature

1. Create a demo test case > Click Record Web > Enter demo page URL > Click Record.
2. Perform all actions like clicking buttons, clicking checkboxes, dropdown actions, error popup messages, entering details in the form, etc. > Save the script.
3. All the web elements that interacted during recording will be saved as Test Objects in the Object Repository. Below is a screenshot of the interface. On the left side, under the Object Repository, we have all the Test Objects. We can also rename them to identify them easily and use them in our future test cases. On the right side, we have all the steps we have performed.
4. Now, we will be using these Test Objects in creating multiple test cases using StudioAssist

Creating a Test Case Using the StudioAssist Feature

Now, let’s create a test case using the AI feature

1. Create a new test case > Switch to Script mode.
2. Write a prompt in steps for the test case in plain text.
3. Select all the steps, right-click > Source > Add Block Comment. This will comment out all the text.
4. Again, select all commented text > right-click > StudioAssist > Generate Code
5. Now, it will create code for each step as below:
6. Now we have our script ready, we can run the test and verify

Similarly, we can create multiple test cases by just writing a prompt and using the test objects.

Optimizing Test Development with StudioAssist

1. Provide Clear Examples: Include specific examples in your prompts to guide the AI in generating the desired code.
2. Direction for Formatting Responses: Specify the format you expect the response to be in, which helps maintain consistency across tests.
3. Evaluate Quality Regularly: Continuously assess the quality of generated tests to ensure they meet the required standards.
4. Enhance Clarity with Bullet Points: When detailing actions in your test scripts, use bullet points to outline each step. This method helps maintain clear and direct communication, ensuring that StudioAssist generates the most accurate automation scripts based on your input.
5. Clearly mention the Test Object: When writing the step to interact with any element on a page, clearly mention the respective Test Object name stored in the Object Repository to avoid errors in finding the element on the page.

Code Explanation Capabilities

StudioAssist significantly enhances the understanding of complex test scripts by providing detailed, context-based explanations. When you select a snippet of code within Katalon Studio in Script mode, right-clicking and choosing “StudioAssist > Explain Code” triggers the tool to generate a comprehensive explanation below the selected script.

This feature is particularly beneficial for those new to the platform or non-technical testers who need to understand the functionality of existing code. It fosters greater collaboration across diverse team members by enabling a deeper understanding and self-sufficiency in handling test scripts.

Known Limitations and How to Navigate Them

While Katalon StudioAssist significantly boosts the efficiency of AI automation testing, it’s essential to be aware of its limitations and strategize accordingly to ensure optimal performance.

You can read more about it here: StudioAssist in Katalon Studio | Katalon Docs

Through this blog, we have explored the Katalon Studio and its StudioAssist features. We’ve traversed the cutting-edge intersection where AI and automation testing converge. StudioAssist’s capabilities, from automated smart test case generation to insightful code explanations, not only streamline the testing process but significantly elevate the quality of the end product.

By harnessing artificial intelligence, Katalon Studio empowers developers to tackle the complexities of software testing with unprecedented ease and efficiency, ensuring digital experiences are optimized across various platforms.

You can check out more AI features of Katalon Studio through the community forum and official documentation.

Testing applications hosted locally or in private environments presents a unique challenge for testers. Accessing these applications for testing purposes requires setting up a secure connection, commonly known as a tunnel. This detailed guide will explore the concept of test cloud tunnels and provide a step-by-step configuration process to enable test execution in a private domain. By following these steps, testers can ensure secure data movement and effectively test applications in private environments.

Understanding TestCloud Tunnels

Test cloud tunnels bridge your local or private domain and the cloud testing platform, allowing for secure communication and data transfer. This enables testers to execute tests on applications that are not publicly accessible, ensuring comprehensive test coverage.

Users can test applications in a restricted environment, avoiding unwanted external access from the global network.

You can find more details and architecture of the Katalon Test Cloud Tunnel in the official documentation: Local testing with TestCloud | Katalon Docs

Step-by-Step TestCloud Tunnels Configuration Process

Setup Tunnel in Local

1. Login to Katalon TestOps
2. Go to Settings > TestCloud Tunnels > Setup
3. Follow the steps, and download the binary file:
4. Open the command prompt from the file directory> paste the command from Step-3 of Setup to configure the Tunnel.
5. Finally, paste the command from Step-4  of Setup to start the Tunnel.
6. Click on the Tunnels Tab to verify the Tunnel is active
7. Now, our TestCloud Tunnel is running locally, and we can execute Tests from TestOps locally.

Execute Tests in the TestCloud Tunnel

You can add your GIT script repository by connecting the GIT Repository from TestOps > Settings > Script Repository

Running TestOps tests in local

1. Go to TestOps > Executions > Schedule Test Run
2. Select Repository > Select Test Suite
3. In Environment > select TestCloud
4. Now we have multiple options to select from Desktop browsers, mobile browsers, and web services. We can select any one of our choice
5. Enable the Private/Local Testing toggle to run the selected browser in the Local TestCloud Tunnel.

Running Automated Tests in Private Domain With the Test Cloud Tunnel in place, you can now execute your automated tests. You can run tests on various browsers and devices, ensuring compatibility and functionality of your web applications in different environments.

Monitoring and Troubleshooting

During test execution, it’s essential to monitor the tunnel connection and troubleshoot any issues that may arise. BrowserStack provides detailed logs and debugging tools to help you diagnose and resolve connectivity issues quickly.

9 Best practices for using Katalon TestCloud Tunnels

1. Regularly Update the Tunneling Client: Ensure that you regularly update the tunneling client provided by Katalon to benefit from the latest features, improvements, and security patches.
2. Monitor Tunnel Status: Continuously monitor the status of the tunneling client to ensure that the connection is stable and secure during test execution.
3. Optimize Test Scripts: Optimize your test scripts for execution in the TestCloud Tunnel to ensure compatibility and efficiency.
4. Use Environment Variables: Utilize environment variables to store sensitive information, such as authentication details, and avoid hardcoding them in your test scripts.
5. Regularly Review Test Results: Review test results and logs regularly to identify and address any issues or failures promptly.
6. Collaborate with Development Teams: Collaborate with development teams to ensure test cases align with application requirements and updates.
7. Implement CI/CD Pipelines: Integrate the TestCloud Tunnel into your CI/CD pipelines to automate the testing process and ensure consistent test execution.
8. Keep Documentation Up to Date: To facilitate knowledge sharing and troubleshooting, maintain up-to-date documentation of your test cases, configurations, and results.
9. Monitor Test Execution Performance: Monitor the performance of your test execution in the TestCloud Tunnel to identify any bottlenecks or areas for improvement.

By following these best practices, you can ensure a smooth and efficient testing process when using Katalon TestCloud Tunnel.

8 Advantages of using Katalon TestCloud Tunnels over other Cloud Servers

1. Seamless Integration: Katalon TestCloud Tunnel integrates seamlessly with Katalon Studio and Katalon TestOps, providing a unified testing ecosystem.
2. Secure Testing in Private Domains: Katalon TestCloud Tunnel allows for secure testing in private domains, ensuring data privacy and compliance with security standards.
3. Efficient Testing Process: With Katalon TestCloud Tunnel, testers can execute tests on applications hosted locally or in private environments without the need for complex setup or configuration.
4. Comprehensive Test Coverage: Katalon TestCloud Tunnel enables testers to run tests on various browsers and devices, ensuring comprehensive test coverage for web applications.
5. Real-time Monitoring and Troubleshooting: Katalon TestCloud Tunnel provides real-time monitoring and troubleshooting capabilities, allowing testers to quickly identify and resolve issues during test execution.
6. Cost-effectiveness: Compared to other cloud servers, Katalon TestCloud Tunnel offers cost-effective testing solutions, making it an ideal choice for teams with budget constraints.
7. Flexibility and Scalability: Katalon TestCloud Tunnel offers flexibility and scalability, allowing testers to easily scale up or down based on testing requirements.
8. Enhanced Collaboration: Katalon TestCloud Tunnel enhances collaboration among team members by providing a centralized platform for test execution and result analysis.

Conclusion

Modern automation frameworks greatly benefit from parallel test execution. However, it can introduce complexities when dealing with shared resources like extent reports. Running tests in parallel can lead to chaos in the results, as multiple tests might update the same report simultaneously. This blog tackles a common hurdle: how to ensure thread safety in Extent Reports during parallel Selenium testing using the ThreadLocal class.

The Problem: Clash of the Tests

Extent Reports provide beautiful and detailed test reports, but when running tests in parallel, several issues arise:

• Overwritten Reports: One test might overwrite another’s report data, leading to inaccurate or incomplete results.
• Mixed-Up Steps: With multiple threads, test steps from different tests could get jumbled within the report, creating confusion.

Using ThreadLocal to Solve Concurrency Problems

ThreadLocal is a Java class that provides thread-local variables. Each thread accessing the variable has its own independently initialized copy of the variable. This makes ThreadLocal an ideal solution for managing resources that are specific to a thread, such as Extent Test instances.

Here’s how ThreadLocal helps tame concurrency in Extent Reports:

1. Thread-Specific Storage: Each thread running a test case gets its own copy of the ExtentTest object within the ThreadLocal variable.
2. Isolated Updates: Tests update their own ExtentTest object without affecting others running concurrently.
3. Clean Reports: After the test finishes, its specific ExtentTest object is used to generate a clear and organized report.

Implementing ThreadLocal with Extent Reports:

Let’s see how to implement ThreadLocal with Extent Reports and Selenium for parallel testing; below is the step-by-step code explanation of the process:

public class ListenersClass implements ITestListener {

    // Path for the report file
    String path = System.getProperty("user.dir") + "\\reports\\index.html";

    // Create an ExtentSparkReporter for the report file configuration
    ExtentSparkReporter reporter = new ExtentSparkReporter(path);
    reporter.config().setReportName("webAutomationRes");
    reporter.config().setDocumentTitle("Test Result");

    // Create an ExtentReports object and attach the reporter
    ExtentReports extent = new ExtentReports();
    extent.attachReporter(reporter);
    extent.setSystemInfo("Tester", "Mohim");

    //The extentTest object is created to manage the ExtentTest instances for each test method in your test suite. 
    //ExtentTest is a class provided by the ExtentReports library that represents a test in your test report.
    
    ExtentTest test;

    // ThreadLocal object to store the ExtentTest object for each thread
    ThreadLocal<ExtentTest> extentTest = new ThreadLocal<ExtentTest>();

    public void onTestStart(ITestResult result) {
        
        // Create a new test in the ExtentReports and assign it to the test variable
        test = extent.createTest(result.getMethod().getMethodName());
        
        // Store the test object in the ThreadLocal object, mapping it to the unique thread ID
        extentTest.set(test);
    }

    public void onTestSuccess(ITestResult result) {
        // Log a pass status for the test
        extentTest.get().log(Status.PASS, "test passed");
    }

    public void onTestFailure(ITestResult result) {
        // Log a fail status for the test
        test.log(Status.FAIL, "test failed");

        // Retrieve the driver object from the test result to take a screenshot
        try {
            driver = (WebDriver) result.getTestClass().getRealClass().getField("driver").get(result.getInstance());
        } catch (Exception e1) {
            e1.printStackTrace();
        }

        // TakeScreenshot code
    }

    public void onFinish(ITestResult result) {
        // Flush the ExtentReports to write the report to the file
        extent.flush();
    }

}

This code implements the ITestListener interface in TestNG, allowing you to listen to test events such as test start, success, failure, and test finish. The ExtentReports and ExtentTest classes are from the ExtentReports library, which generates HTML reports in Selenium testing.

Explanation:

1. A ThreadLocal variable “test” is created to store the ExtentTest object.
2. In onTestStart, a new ExtentTest object is created based on the test case name and stored in the test.
3. Subsequent methods like onTestSuccess and onTestFailure access and update the ExtentTest object specific to the current thread.
4. In onFinish, the report is flushed to generate the final report with each test’s information.

Three main classes from the ExtentReports library

1. ExtentSparkReporter: This class creates an HTML report file for your test results. It allows you to customize the report’s appearance, such as setting the report name and document title. In your code, you create an instance of ExtentSparkReporter and attach it to your ExtentReports object to generate the HTML report file.
2. ExtentReports: This class is the main reporting class in ExtentReports. It is used to create and manage the overall test report. You can attach one or more ExtentSparkReporter objects to an ExtentReports object to generate different types of reports (e.g., HTML, PDF). In your code, you are creating an instance of ExtentReports and attaching the ExtentSparkReporter to it.
3. ExtentTest: This class represents a test in your test report. You create an instance of ExtentTest for each test method in your test suite. You can use the ExtentTest object to log test steps, pass or fail a test, add screenshots, and more. In your code, you are creating a ThreadLocal object to store a unique instance of ExtentTest for each test method running in parallel. This ensures that each test method has its own ExtentTest instance and prevents concurrency issues when updating the Extent report.

Additional Considerations

• Proper Flushing: Ensure the extent report is flushed appropriately to capture all test data.
• Thread-Safe ExtentReports Generator: If you’re using a custom ExtentReports generator class, make sure it’s thread-safe to handle concurrent report creation.
• Parallel Execution Configuration: For this approach to be effective, configure your TestNG suite or framework to run tests in parallel.

Conclusion

In this blog, we learned about using the ThreadLocal class for concurrency and different classes of ExtentReport. By utilizing ThreadLocal, you may successfully handle the concurrency problems that occur while utilizing Extent Reports Library with concurrent test execution in Selenium. This technique guarantees accurate and well-organized reports, greatly enhancing your test analysis and debugging efforts. Remember that solid automation frameworks require an understanding of concurrency. So, harness the power of ThreadLocal to overcome your parallel testing issues!

Understanding OAuth 2.0: The Gatekeeper to Secure API Access

In API testing, ensuring secure and authorized access to protected resources is paramount. This is where OAuth 2.0, an industry-standard authorization framework, comes into play. It acts as a robust mechanism for granting temporary access tokens to applications. It enables them to interact with APIs on behalf of users without directly obtaining their credentials. This approach enhances both security and user experience.

In this blog, we will explore how to perform OAuth 2.0 authorization code flow using REST Assured in API testing.

Beyond Authorization Code: Exploring the Grant Landscape of OAuth 2.0

While the Authorization Code flow is a commonly used approach, OAuth 2.0 offers a variety of grant types to cater to diverse authorization scenarios:

• Authorization Code Grant: (This is the focus of this blog!) Ideal for web applications and server-side applications where you can safely store client secrets.
• Implicit Grant: This is suitable for public clients, such as JavaScript applications running in web browsers, where client secrets are not secure.
• Resource Owner Password Grant: This is used in limited situations when user consent is readily available, and client secrets can be securely stored.
• Client Credentials Grant: Designed for machine-to-machine (M2M) communication, where applications directly authenticate with the authorization server using client credentials

Real-World Example: Unlocking the Power of Authorization Code in Action

Popular websites like Facebook, Google, and GitHub utilize the Authorization Code flow to allow third-party applications to access user data with their consent.

For instance, when you log in to a fitness app using your Facebook credentials. Yoou grant the app temporary access to your fitness data on Facebook without sharing your actual Facebook password. The app follows the Authorization Code flow behind the scenes to obtain the necessary access token.

The Flow in Action: A Step-by-Step Guide

1. Initiating the Authorization Request: The client constructs a request containing parameters like client ID, redirect URI, and requested scopes to the authorization server.
2. Redirecting the User: The user is redirected to the authorization server’s login page. User authenticate and grant or deny the requested permissions.
3. Authorization Code Delivery: Upon consent, the authorization server redirects the user to the client’s redirect URI with an authorization code as a query parameter.
4. Token Request: The client sends a request to the token endpoint(resource server), including the authorization code and client credentials. The client exchanges the request for an access token.
5. Access Token Issuance: If the credentials are valid, the server grants the client an access token (and optionally a refresh token).
6. API Access: The client includes the access token in the authorization header for subsequent API requests, enabling authorized interaction with the protected resources.

Example Website Using OAuth 2.0 Authorization Code Grant

Let’s consider an example website, “example.com,” that uses an OAuth 2.0 authorization code grant for authentication. The website’s authorization endpoint is https://example.com/oauth/authorize, and the token endpoint (resource) is https://example.com/oauth/token.

Note: The API contract is usually available for testing APIs. It contains all the required information, such as URLs, client IDs, client secrets, redirect URIs, etc.

Performing OAuth 2.0 Authorization Code Flow with REST Assured

To perform OAuth 2.0 authorization code flow using REST Assured, we need to follow these steps:

1. Obtain Authorization Code: Redirect the user to the authorization server’s authorization endpoint to obtain an authorization code.
2. Exchange Authorization Code for Access Token: Use the authorization code to request an access token from the authorization server’s token endpoint.
3. Use Access Token: Use the access token to authenticate API requests.

Sample REST Assured Code for OAuth 2.0 Authorization Code Flow

Below is the Rest Assured code for the sample flow with the explanation:

ublic class OAuth2_AuthCode {

    public static void main(String[] args) throws InterruptedException {
        
          // STEP-1: Obtain Authorization Code
          //paste AUTHORIZATION server/url in browser
          WebDriverManager.chromedriver().setup(); 
          ChromeDriver driver = new ChromeDriver();
          driver.get("https://example.com/oauth/authorize"); 
          
          //sign in > ENTER email> ENTER password >CLICK submit
          driver.findElement(By.cssSelector("input[type='email']")).sendKeys("test@test.com");
          driver.findElement(By.cssSelector("input[type='email']")).sendKeys(Keys.ENTER); Thread.sleep(3000);
          driver.findElement(By.cssSelector("input[type='password']")).sendKeys("MohimPassword");
          driver.findElement(By.cssSelector("input[type='password']")).sendKeys(Keys.ENTER); Thread.sleep(3000);
          
          //get URL containing CODE 
         String url = driver.getCurrentUrl();
        
        //extract code from it using java functions
        String partial = url.split("code=")[1];
        String code =partial.split("&scope")[0];
        System.out.println(code);
        
        //STEP-2: Exchange Authorization Code for Access Token from Token Endpoint(resource) server/url
        
        //construct request as per the api contract include the code and add required details like id, secret, uri 
        String accessTokenResp = given().urlEncodingEnabled(false).queryParam("code", code)
                .queryParam("client_id", "692183103107-p0m7ent2hk7suguv4vq22hjcfhcr43pj.apps.googleusercontent.com")
                .queryParam("client_secret", "erZOWM9g3UtwNRj340YYaK_W")
                .queryParam("redirect_uri", "https://example.com/")
                .queryParam("grant_type", "authorization_code")
                .when().post("https://example.com/oauth/token")
                .then().log().all().extract().response().asString();
        
        //pass response into JsonPath class object to read json response and extract access_token from it
       
        JsonPath jp = new JsonPath(accessTokenResp);
        String token = jp.getString("access_token");
        
        //Finally execute GET Request using redirect url
        String response = given().queryParam("access_token",token)
                        .when().post("https://example.com/")
                        .then().log().all().extract().response().asString();
        
        System.out.println(response);   
        
    }
}

In this code snippet, we have used example URLs and sample data to understand the flow using Rest Assured.

Conclusion

In conclusion, OAuth 2.0 authorization code flow is a secure and widely used method for API authentication. By using REST Assured, you can easily perform OAuth 2.0 authorization code flow in your API tests. It ensures that your APIs are secure and compliant with OAuth 2.0 standards.

In the realm of web automation, handling various scenarios like file upload, file download, and various Windows GUI operations can be challenging. AutoIt, a powerful scripting language and automation tool, seamlessly integrates with Selenium to tackle these challenges. This blog provides a detailed guide on installing and configuring AutoIT and demonstrates its usage with Selenium for file upload and file download.

What is AutoIT?

AutoIT is a scripting language primarily designed for automating the Windows graphical user interface (GUI) and general scripting. It provides a simple scripting language with powerful automation capabilities, making it ideal for automating repetitive tasks, interacting with GUI elements, and handling various Windows-based operations.

Below are some of the applications in Selenium and Testing:

• Handling Dialogs
• File Upload/ File Download
• GUI Testing
• Window Management

Installing AutoIT

1. Download AutoIt: Visit the official AutoIT website https://www.autoitscript.com/site/autoit/downloads/ and download the AutoIT installer.
2. Install AutoIt: Run the downloaded installer, select x86(default) while installing, also keep others as default. Ensure that you install both AutoIt and AutoIT Editor.
3. After installation: SciTE(AutoIT editor) .exe file will be present at location “C:\Program Files (x86)\AutoIt3\SciTE” and Au3Info_x64 (Spy tool) at “C:\Program Files (x86)\AutoIt3”

Using AutoIT with Selenium: File Upload

For instance, we want to perform some test that involves uploading a file from the local system on the page. A Windows dialog box will open to select the file from the local system to upload, due to the limitation of Selenium, there is no direct method to interact with the Windows application dialog box. Here comes the role of AutoIt which helps to perform such types of actions.

How to Upload a File with AutoIT and Selenium

Follow the below steps to upload a file on a website or application from the local system:

1. Open Au3Info_x64 (Spy tool) and SciTE(AutoIT editor).
2. Open the page where you want to upload a file; on clicking the upload button, the upload window dialog box opens.
3. Using the spy tool, drag and drop the “FinderTool” icon on the “File Name” box.
4. Note down the element’s Title and Control ID (Class+Instance) (File Name box).
5. Repeat the step for the next element i.e. “Open” Button and note down the title and Control ID.
6. Now, open the Editor, and we will write the script that defines the steps to perform. We are using the Control Commands here; we can also use Window commands. The below image shows the script:
7. Syntax Explanation:
   • ControlFocus(“Title”, “text(optional)”, “Control ID”): To focus on an element using the title and control id.
   • ControlSetText(“Title”, “text(optional)”, “Control ID”, “new Text to enter”): To enter text in the selected element.
   • ControlClick(“Title”, “text(optional)”, “Control ID”): To click on an element.
   • You can refer to the documentation for more details: https://www.softwaretestinghelp.com/handle-windows-pop-up-in-selenium-using-autoit/
8. Save the file with the ‘.au3’ extension > right-click the file and select Compile(x86) > ‘.exe’ file will be created.
9. Now write the Selenium script to perform the test that requires the file upload action. We are navigating to the page > clicking the upload button > Running the AutoIt script .exe file to enter the path of the image and clicking on the open button. Below is the script:

   public class FileUpload {
       public static void main(String[] args) throws InterruptedException, IOException {
           
           //chrom driver automatically 
           WebDriverManager.chromedriver().setup();
           WebDriver driver  = new ChromeDriver();
           driver.manage().window().maximize();
           
           //Upload file
           //go to page and click on upload options
           driver.get("https://www.TestPage.com/jpg-to-pdf");
           driver.findElement(By.cssSelector("a[class*='upload-btn'] span[class='btn-label']")).click();
           
           //Execute the .exe file using java methods 
           Thread.sleep(3000);
           Runtime.getRuntime().exec("C:\\mohUploadsc.exe");
         }
   }
   

10. Finally, run the script

We achieved the file upload operation with this integration of selenium and AutoIt.

Conclusion

AutoIT offers seamless integration with Selenium, enabling testers to easily handle complex scenarios like file upload/download, automating the Windows GUI, and general-purpose scripting. Following this guide can enhance your web automation capabilities and streamline your testing process. You can also find articles to read more about various applications of AutoIt in testing. Stay tuned for more insights on advanced web testing techniques! Happy Testing!

In the realm of web testing, encountering sites with basic authentication is commonplace. Handling basic authentication seamlessly within test scenarios is essential for comprehensive testing coverage. Selenium offers various approaches to tackle basic authentication challenges. This blog delves into the nuances of working with basic authentication using Selenium’s uriPredicate function, exploring different strategies and techniques to ensure smooth authentication integration within your test suite.

Understanding Basic Authentication

Basic authentication is a simple authentication scheme built into the HTTP protocol. It involves sending a username and password in the HTTP request header. When accessing a protected resource on a website, the server prompts the client to provide credentials, typically via a login dialog box. Once authenticated, the client can access the resource. This type of dialogue box cannot be handled directly using locators, hence we need to use other strategies to handle it.

Approaches to Handle Basic Authentication

Selenium offers multiple strategies to handle basic authentication seamlessly during testing:

1. Exploring Selenium’s uriPredicate Function

Using URI Predicate Function: Selenium’s uriPredicate function allows you to intercept network requests and modify them before they are sent. This function is particularly useful for adding authentication credentials to URLs that require basic authentication.

public class BasicAuthenticationURI {
    public static void main(String[] args) {
        
        //chrome driver automatically 
        WebDriverManager.chromedriver().setup();
        WebDriver driver  = new ChromeDriver();
        
        //predicate URI
        Predicate<URI> predicatURI = uri -> uri.getHost().contains("the-internet.herokuapp.com");
        
        //wrap driver with authentication
        ((HasAuthentication)driver).register(predicatURI, UsernameAndPassword.of("admin", "admin"));
        
        // test
        driver.get("https://the-internet.herokuapp.com/");
        driver.findElement(By.linkText("Basic Auth")).click();     
        
    }
}

Predicate<URI>

• • This part of the code defines a predicate, which is a functional interface in Java’s java.util.function package. A predicate represents a boolean-valued function that takes an argument and returns true or false.
  • Here, the predicate operates on URI objects.

uri -> uri.getHost().contains("the-internet.herokuapp.com")

• • This is a lambda expression, which is a concise way to represent an anonymous function.
  • The input parameter of the lambda expression is, which represents an URI object.
  • The body of the lambda expression contains the logic to determine if the given URI meets certain criteria.
  • "uri.getHost()" retrieves the host part of the URI, which typically represents the domain name.
  • ".contains("the-internet.herokuapp.com")" checks if the host contains the specified substring “the-internet.herokuapp.com”.

The "predicateURI" is essentially defining a condition for when the basic authentication credentials should be applied.

In this case, it checks if the host part of the URI contains “the-internet.herokuapp.com”. If it does, the predicate evaluates to true, indicating that the authentication credentials should be used.

This approach allows us to selectively apply authentication based on the host/domain of the URI. In other words, the authentication will only be triggered when navigating to pages within the “the-internet.herokuapp.com” domain.

In summary, the "predicateURI" predicate defines the condition under which the basic authentication credentials will be applied. It checks if the host part of the URI matches a specified domain name, providing a flexible way to handle authentication based on the URL of the web page.

Registering Authentication Credentials

We then wrap the WebDriver instance with basic authentication credentials using the "register" method. This method is part of the "HasAuthentication" interface, which allows WebDriver instances to handle authentication. We provide the predicateURI and the credentials (username and password) using the "UsernameAndPassword.of" method.

Testing

After setting up the authentication, we navigate to the target website (https://the-internet.herokuapp.com/) using “driver.get()". Then, we interact with the page by clicking on a link with the text “Basic Auth”.

The "register" method is particularly interesting as it allows us to selectively apply authentication based on the URI of the web page. This can be useful when dealing with multiple domains or when we only want to apply authentication under specific conditions.

2. Browser Capabilities

Some browsers, such as Chrome, support passing basic authentication credentials directly in the browser URL. By embedding the username and password in the URL itself, Selenium can navigate directly to the authenticated page without the need for additional prompts.

public class BasicAuthentication {
    public static void main(String[] args) {
        
        //initialize chrome driver 
        WebDriverManager.chromedriver().setup();
        WebDriver driver  = new ChromeDriver();
        
        // add credentials username = admin, password = admin
        //Syntax to embed creds in the URL > "https://" + USERNAME + ":" + PASSWORD + "@the-internet.herokuapp.com/"

        driver.get("https://admin:admin@the-internet.herokuapp.com/");
        driver.findElement(By.linkText("Basic Auth")).click();      
    }
}

3. Third-Party Tools and Libraries: AutoIT

Various third-party tools and libraries integrate seamlessly with Selenium to handle basic authentication. For example, libraries like AutoIT offer functionalities to interact with authentication dialogs, enabling automated login processes. AutoIT is a powerful scripting language and automation tool primarily designed for Windows operating systems. While Selenium is proficient in web automation tasks, AutoIT specializes in automating Windows-based interactions, including handling authentication dialog boxes. By integrating AutoIT scripts into Selenium workflows, users can seamlessly perform various automation tasks like File Operations, Keyboard and Mouse Input, interacting with GUI elements such as buttons, text fields, and dialog boxes, and more

To use AutoIT, we need to perform installation and configurations. Hence, we will discuss the detailed process of using AutoIT with Selenium for basic authentication, file upload from local, and file download. Stay tuned for it!

4. Headless Browser Authentication

Headless browsers like Headless Chrome or PhantomJS can handle basic authentication without the need for visible browser windows. Selenium can leverage these headless browsers to execute tests involving basic authentication in a streamlined manner.

Conclusion

Handling basic authentication seamlessly within Selenium tests is crucial for robust and comprehensive web testing. By leveraging Selenium’s uriPredicate function and exploring alternative approaches, testers can streamline the authentication process and ensure smooth test execution. Stay tuned for more insights as we continue to explore advanced web testing techniques with Selenium and Chrome DevTools Protocol. Happy testing!

In our ongoing journey through Selenium Chrome DevTools integration, we’ve explored mobile browsing simulation, real-time insights with Selenium CDP Listeners, intercepting and mocking network/API responses, and testing failed network requests. Our exploration now delves into enhancing test efficiency by addressing unwanted network requests. This blog will guide you through the process of necessary network calls, ensuring focused and efficient web testing.

Catch up on our previous blogs:

1. Simulating Mobile Browsing
2. Selenium CDP Listeners
3. Intercepting and Mocking Network/API Responses
4. Detecting and Responding to Failed Network Requests

Blocking Unwanted Network Requests

Efficient web testing requires a focused environment, and unnecessary network requests can introduce noise and affect test reliability. Selenium and Chrome DevTools Protocol (CDP) can block unwanted network calls, optimizing test scenarios.

Blocking Network Requests

Let’s take a scenario where we just want to focus on the functionality of an application. Suppose we have a sample e-commerce page website “https://EcomDemoApp.com”, we just want to focus on basic functionality like going to the product page >select a product > add to cart > verifying a message “THIS PRODUCT IS ALREADY ADDED TO CART”. If we go through the usual flow, each time a page loads the images and CSS components on the pages also load, which takes time and makes execution slower. But if we just want to validate the functional logic, we don’t require the images and CSS to load. Hence we can block the loading by blocking the network request that is responsible for these, this makes execution extremely fast.

Note: For example, we are blocking images and CSS components, but as per our requirements, we can block any unwanted network request that seems to be insignificant and causes any kind of issue in testing.

Step-by-Step Guide to Block Network Requests

Let’s dive into a step-by-step guide on how to block unwanted network requests that will block the loading of images and CSS components. Below is the step-by-step code with an explanation for the action:

public class NetworkBlocking {

    public static void main(String[] args) throws InterruptedException {
        
        //initialize driver
        WebDriverManager.chromedriver().setup();
        ChromeDriver driver  = new ChromeDriver();
        
        //Create and start DevTool session
        DevTools devTools = driver.getDevTools();
        devTools.createSession();
        
        //send command to CDP methods> cdp method will invoke and get access to chrome devtools
        
        //enable network 
        devTools.send(Network.enable(Optional.empty(),Optional.empty(),Optional.empty()));
        
        // Block network request by passing list of request URLs as argument in Network.setBlockedURLs() method
        // We have used regular expression instead if complete URLs, as we know the request URL for the desired network requests ends with .css and .jpg
        devTools.send(Network.setBlockedURLs(ImmutableList.of("*.jpg","*.css")));
        
        
        //perform the test

//open application
        driver.get("https://EcomDemoApp.com");
//click link navigating to product page > select product > add to cart > get the text
        driver.findElement(By.linkText("Browse Products")).click();
        driver.findElement(By.linkText("Selenium")).click();
        driver.findElement(By.cssSelector(".add-to-cart")).click();
        System.out.println(driver.findElement(By.cssSelector("p")).getText());
        Thread.sleep(3000);
        
        //quit
        driver.quit();
        
                
    }

}

Blocking unwanted network requests with Selenium CDP commands elevates test efficiency by creating a focused testing environment. This strategy ensures that your tests remain free from interference, providing reliable and precise results, and making execution faster. Stay tuned for more insights in our Selenium Chrome DevTools integration series as we continue to explore advanced web testing techniques. Happy testing!

In our exploration of Selenium Chrome DevTools integration, we’ve covered simulating mobile browsing, harnessing real-time insights with Selenium CDP Listeners, and mastering the art of intercepting and mocking network/API responses. Our journey now advances into the realm of optimizing test scenarios by addressing failed network requests. In this article, we’ll navigate through a comprehensive guide on testing and handling failed network requests using Selenium CDP commands.

To catch up on our previous blogs:

Simulating Mobile Browsing: https://blogs.perficient.com/2024/01/22/optimizing-web-testing-mastering-mobile-simulation-with-selenium-cdp-device-metrics-override/

Selenium CDP Listeners: https://blogs.perficient.com/2024/01/24/decoding-web-interactions-unleashing-selenium-cdp-listeners-to-extract-network-responses/

Intercepting and Mocking Network/API Responses: https://blogs.perficient.com/2024/01/30/intercepting-and-mocking-network-responses-with-selenium-chrome-devtools/

Detecting and Responding to Failed Network Requests

In the dynamic landscape of web testing, handling failed network requests is crucial for robust test scenarios. Failed requests can lead to unexpected application behavior, and identifying and responding to these issues is paramount. Selenium and Chrome DevTools Protocol (CDP) commands offer a powerful solution to tackle this challenge.

How to Test and Handle Failed Network Requests

Let’s delve into a step-by-step guide on how to test and handle failed network requests using Selenium CDP commands:

Failing Network Request

Similar to the way we mocked a network request, we can fail a network request intentionally to perform the test on the failed network request, e.g., to check if an error message pops up when the error occurs. Let us understand it with a simple scenario. We have a sample website https://rahulshettyacademy.com/angularAppdemo, with a “Virtual Library” link that navigates to the Library page that displays the list of books.. We will pause and fail the request for the request URL: “https://rahulshettyacademy.com/Library/GetBook.php?AuthorName=shetty”, which is responsible for showing the book records on the  Library page. When we fail the given particular request, no records should be shown.

Step-by-step Guide to Fail Network Request

Below is the step-by-step code with an explanation for the action:

public class FailedRequest {

    public static void main(String[] args) throws InterruptedException {

        //initialize driver
        WebDriverManager.chromedriver().setup();
        ChromeDriver driver  = new ChromeDriver();
        
        //create devTools session
        DevTools devTools = driver.getDevTools();
        
        devTools.createSession();
        
        //Create Request Pattern Object to define the particular URL we want to target, as we don't want to apply failRequest method on all netowrk calls
        //we will pass only the first argument i.e. urlType for the Request Pattern class object.  
        Optional<List<RequestPattern>> pattern= Optional.of(Arrays.asList(new RequestPattern(Optional.of("*GetBook*"),Optional.empty(),Optional.empty())));
        
        //enable fetch method with pattern object argument to target the specific URL call
        devTools.send(Fetch.enable(pattern, Optional.empty()));
        
        //Pause the request and then fail the request for given url using the failRequest method
        devTools.addListener(Fetch.requestPaused(),request -> {
            
            //failrequest method accepts argument: requestID and ErrorReason (Allowed Values: Failed, Aborted, TimedOut, AccessDenied, ConnectionClosed, ConnectionReset, ConnectionRefused, ConnectionAborted, ConnectionFailed, NameNotResolved, InternetDisconnected, AddressUnreachable, BlockedByClient, BlockedByResponse)
                devTools.send(Fetch.failRequest(request.getRequestId(), ErrorReason.FAILED)); 
            });
        
        //perform the test
        driver.get("https://rahulshettyacademy.com/angularAppdemo/");
        driver.findElement(By.cssSelector("button[routerlink*='library']")).click();
        Thread.sleep(5000);
        
        //You can observe that no records are shown on the Library Page as we have failed the request 
        //Note the sample website we are using is not designed to show error message on request failure, hence we are not validating it, but in realtime applications we can validate the error message that shows after request failure
        
        //close the driver
        driver.quit();

    }

}

Hence, by following the above process, we can fail a request and test the request failure.

You can refer to official documentation for more details on various methods and events: Chrome DevTools Protocol

Conclusion

Testing and handling failed network requests with Selenium CDP commands provide a proactive approach to ensure the robustness of web applications. By leveraging the capabilities of Chrome DevTools Protocol, testers can detect and respond to failed requests in real time, enhancing the reliability and effectiveness of their test scenarios. Stay tuned for more insights as our Selenium Chrome DevTools integration series continues to explore advanced web testing techniques. Happy testing!

In the dynamic landscape of Selenium Chrome DevTools integration, we’ve explored simulating mobile browsing and harnessing real-time insights from network responses using Selenium CDP Listeners. Building upon this foundation, our journey now ventures into the realm of intercepting and mocking network/API responses—a crucial skill for comprehensive web testing. In this article, we’ll embark on a step-by-step guide, showcasing how Selenium, coupled with Chrome DevTools, empowers testers to intercept and manipulate network/API responses.

To learn more about Selenium and CDP, you can refer to my previous blogs

Optimizing Web Testing: Mastering Mobile Simulation with Selenium CDP Device Metrics Override / Blogs / Perficient

Decoding Web Interactions: Unleashing Selenium CDP Listeners to Extract Network Responses / Blogs / Perficient

Interception and Modification of Network Request

We can intercept the network request by pausing the request, making changes in the request, and then continuing the request with the changes made.

Let us understand it with a simple scenario.

We have a website, https://rahulshettyacademy.com/angularAppdemo/, with a “Virtual Library” link that navigates to the Library page displaying the book list. When there is only one book in the account, it displays the message “Oops, only 1 book is available”, which is associated with the request URL: “https://rahulshettyacademy.com/Library/GetBook.php?AuthorName=BadGuy“.

But when we navigate to the library page by clicking the “Virtual Library”, the request URL is default set with an account having multiple books: “https://rahulshettyacademy.com/Library/GetBook.php?AuthorName=shetty“.

Hence, to test the message, we cannot directly rely on UI Automation. We have to make changes in the network request URL while sending the request, which is mocking network requests.

This is where the Interception and Mocking of the network request feature come into play.

Step-by-step flow for Mocking Request

Below is the code for the above problem:

public class NetworkMocking {

        public static void main(String[] args) throws InterruptedException {
//Initialize driver  
          System.setProperty("webdriver.chrome.driver", "/Users/rahulshetty/Documents/chromedriver");
            
            ChromeDriver driver = new ChromeDriver();
            
//Create DevTools Object and start session
            DevTools devTools = driver.getDevTools();
            devTools.createSession();
            
//Enable Fetch Domain to work with network requests
            devTools.send(Fetch.enable(Optional.empty(), Optional.empty()));

//Add Listener to pause request
            devTools.addListener(Fetch.requestPaused(), request->
            {
//Filter url with if condition and make changes in URL with replace method
                if(request.getRequest().getUrl().contains("shetty"))
                {
//Mock URL - make change in the url by using replace method and change the authorName
                    String mockedUrl =request.getRequest().getUrl().replace("=shetty", "=BadGuy");
                    
                    System.out.println(mockedUrl);
                    
//Continue request with new mock URL                   
                    devTools.send(Fetch.continueRequest(request.getRequestId(), Optional.of(mockedUrl), Optional.of(request.getRequest().getMethod()),
                            Optional.empty(), Optional.empty(),Optional.empty()));
                }
                else {
                    
                    devTools.send(Fetch.continueRequest(request.getRequestId(), Optional.of(request.getRequest().getUrl()), Optional.of(request.getRequest().getMethod()),
                            Optional.empty(), Optional.empty(),Optional.empty()));
                    
                }
                
            });
//Perform test and verify the message
            driver.get("https://rahulshettyacademy.com/angularAppdemo/");
            driver.findElement(By.cssSelector("button[routerlink*='library']")).click();
            Thread.sleep(3000);
            
            System.out.println(driver.findElement(By.cssSelector("p")).getText());
                        
            
        }

    }

Below are the functions we have used above:

1. Fetch.enable:  Enable the Fetch domain, allowing the interception and modification of network requests. It accepts 3 parameters: maxTotalBufferSize(integer), maxResourceBufferSize(integer), and maxPostDataSize(integer), respectively.
2. Fetch.requestPaused: The requestPaused event triggers when we pause network requests. In this case, it’s paused by the listener to inspect and potentially modify the request.
3. Fetch.continueRequest: This method continues the paused request with optional modifications. In this case, it continues the request with either the original or modified URL based on the condition.

Hence by following the above process to create a mock network request, we can test the functionality that was otherwise impossible by direct automation.

You can refer to official documentation for more details on various methods and events: Chrome DevTools Protocol

Conclusion

In conclusion, mastering the art of intercepting and mocking network/API responses with Selenium and Chrome DevTools unveils a powerful dimension of web testing. The step-by-step guide empowers testers to dynamically manipulate network requests, enabling comprehensive testing scenarios beyond UI automation. Transitioning from simulating mobile browsing to real-time insights and now intercepting and mocking, Selenium’s capabilities continue to evolve. Stay tuned for more insights into our ongoing exploration. Happy testing!

Introduction

In the dynamic realm of Selenium CDP integration, where Selenium harnesses the power of the Chrome DevTools Protocol (CDP). We previously embarked on a journey to simulate mobile browsing using Device Metrics Override: Optimizing Web Testing: Mastering Mobile Simulation with Selenium CDP Device Metrics Override / Blogs / Perficient

Building on that foundation, our exploration now takes a deeper dive into the intricate web interactions with a focus on Selenium CDP Listeners. In this article on extracting network responses with Selenium CDP integration, we will delve into harnessing network responses and request data, enabling us to extract values like status code, URL, request-id, etc.

The Crucial Role of Network Responses:

In web testing, understanding the network responses of a page is paramount. Network responses, often represented by HTTP status codes, provide insights into the success or failure of requests made by a web page. These responses, encapsulating a wealth of data beyond status codes, provide insights into resource loading, API calls, and script execution on a web page.

Selenium CDP Listeners: Unveiling Real-time Insights

Selenium, in conjunction with CDP Listeners, empowers testers to tap into this wealth of information. Listeners, as the name suggests, ‘listen’ to events within the Chrome browser and allow us to capture and analyze network responses in real-time. This functionality becomes a game-changer, providing a dynamic approach to testing and debugging.

Extracting Comprehensive Network Data with Selenium CDP

Let’s delve into a practical demonstration of how Selenium CDP Listeners can be utilized to extract a plethora of data from network responses during a testing scenario. Consider a common situation where a web page is making multiple network requests for resources. By setting up listeners, we can intercept and extract a range of valuable information.

public class NetworkActivity {

    public static void main(String[] args) {
        
        WebDriverManager.chromedriver().setup();
        ChromeDriver driver  = new ChromeDriver();
        
        //create session
        DevTools devTools = driver.getDevTools();
        
        devTools.createSession();
        
        //send cmd to CDP methods> cdp method will invoke and get access to chrome devtools
        
        //enable network
        devTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));
        
        
        //event fires > listeners will capture the event
        
        //request event 
        devTools.addListener(Network.requestWillBeSent(), request->{
            
            Request req = request.getRequest();
            System.out.println(req.getUrl());
            System.out.println(req.getHeaders());
            
        });
        
        //response event
        devTools.addListener(Network.responseReceived(), response ->{
            
            org.openqa.selenium.devtools.v120.network.model.Response resp = response.getResponse();
            System.out.println(resp.getUrl());
            System.out.println(resp.getStatus());
            System.out.println(response.getRequestId());
             
            
        });
        
        //perform test
        driver.get("https://rahulshettyacademy.com/angularAppdemo");
        
        driver.findElement(By.linkText("Library")).click();

        driver.quit();
        
    }
}

In this example, we enable the Network domain and listen for the responseReceived and ‘requestWillBeSent’ events. Upon receiving the event, we extract the status code, request ID, URLs, and request header data from the response. Below are some functions we have used above

1. ‘Network.enable’ (Network Enablement): Sends a command to enable the network domain in Chrome DevTools, allowing interception of network events. It accepts 3 parameters: maxTotalBufferSize(integer), maxResourceBufferSize(integer), and maxPostDataSize(integer) respectively.
2. ‘Network.requestWillBeSent’ Event Listener: You can listen for the event triggered when a network request is about to be sent. Capture and print the URL and headers of the outgoing request.
3. ‘Network.responseReceived’ Event Listener: You can listen for the event triggered when a network response is received. Capture and print the URL, status, and request ID associated with the response.

We can further customize our actions based on the code.

Real-world Applications

Understanding network status codes in real time is invaluable for comprehensive testing. It enables us to identify potential bottlenecks, optimize resource loading, and ensure that the web application behaves as expected under different network conditions.

You can refer to official documentation for more details on various methods and events: Chrome DevTools Protocol

Conclusion

As we conclude this exploration into harnessing network responses with Selenium CDP Listeners, we unlock a new dimension of insight in web testing. The capability to extract and analyze a diverse range of data points from network responses enhances the precision and effectiveness of our testing strategies. Stay tuned for more revelations in Selenium CDP integration as we continue to decode the intricacies of web interactions. Happy testing!