You will see detailed examples of how Applitools Autnonmous addresses different types of testing like functional, visual, and API testing.<\/p>\n\n\n\n
Challenges In Testing Modern Applications<\/h2>\n\n\n\n
Below are some of the challenges we often face while testing modern applications.<\/p>\n\n\n\n
Too Many Scenarios<\/strong><\/p>\n\n\n\n Modern applications are highly complex, with hundreds of end-to-end scenarios that need to be tested across a vast array of screens, devices, and browsers.\u00a0<\/p>\n\n\n\n Too Many Screens & Devices<\/strong><\/p>\n\n\n\n In modern applications, users access digital content on a wide variety of devices, browsers, and screen sizes, each with its own unique characteristics. Manually verifying that an application looks and functions correctly across all these environments is nearly impossible without automated assistance. Traditional testing methods cannot scale to meet this demand, often resulting in inconsistent user experiences and missed visual bugs.<\/p>\n\n\n\n Constant UI Changes<\/strong><\/p>\n\n\n\n In dynamic development environments, user interfaces (UIs) are constantly evolving. Even minor changes to the UI can require updates to test scripts. This constant maintenance burden can slow down the development process and lead to outdated or ineffective tests.<\/p>\n\n\n\n Different Skill Sets<\/strong><\/p>\n\n\n\n Teams often consist of members with varying technical skills, leading to the use of different tools and approaches to testing. This creates silos within the organization, where engineers and non-technical testers might not collaborate effectively. So far we have seen the challenges in testing modern applications.<\/p>\n\n\n\n Applitools Autonomous, powered by Applitools\u2019 proven Visual AI, offers a game-changing solution that allows teams to automate and streamline testing across various dimensions. In this blog, we’ll explore the types of testing you can perform using Applitools Autonomous and how it simplifies the testing process.<\/p>\n\n\n\n One of the key features of Applitools Autonomous is its ability to conduct a Full Website Test with minimal effort. Simply by entering your website\u2019s URL, Autonomous crawls the sitemap and automatically creates a test suite covering every web application page.<\/p>\n\n\n\n With just a URL input, Applitools Autonomous handles the heavy lifting of testing, giving teams complete coverage across all environments.<\/p>\n\n\n\n If you don\u2019t need to test your entire website, or if you want to focus on specific pages, Applitools offers URL List Testing. This allows you to upload a list of important URLs that you want to validate across different browsers and devices.<\/p>\n\n\n\n This method gives you granular control over which parts of your web application are tested, ensuring the most important areas receive detailed attention.<\/p>\n\n\n\n For complex workflows, Applitools Autonomous offers Custom Flow Testing, which allows you to simulate end-user actions across your site. For example, you can test user journeys like logging in, adding items to a cart, and checking out \u2014 with every action captured step by step.<\/p>\n\n\n\n Custom Flow Testing is ideal for complex, multi-step processes, such as eCommerce workflows or user registration flows.<\/p>\n\n\n\n Cross-browser testing can be a significant bottleneck in the development process, but Applitools Autonomous eliminates this pain point. It replicates browsers in seconds, cutting down the time required for Cross-Browser and Device Testing by up to 90%.<\/p>\n\n\n\n By reducing the time spent on browser replication, teams can focus on identifying and resolving any browser-specific issues faster.<\/p>\n\n\n\n Applitools Autonomous doesn\u2019t just stop at visual testing\u2014it also enables API Testing. You can initiate HTTP requests directly in your tests, manage application states, and store responses for use in later test steps.<\/p>\n\n\n\n API Testing combined with visual validation ensures that your web app\u2019s functionality works correctly and efficiently across the board.<\/p>\n\n\n\n In the below section, you will see the different types of testing you can perform using Applitools Autonomous.<\/p>\n\n\n\n In full website testing, users provide the URL they want to scan and specify the test environments where they want to execute the scan. Additionally, users can set optional settings such as a maximum number of URLs and select a custom flow to run before the test. Once these steps are completed, the website is ready to be scanned.<\/p>\n\n\n\n For example, let’s look at the site https:\/\/dan.sandbox.applitools.com\/e-commerce<\/a>.<\/p>\n\n\n\n A URL list test allows users to create a list of URLs with combinations that will be used for testing. This is especially useful when you have no sitemap, want to crawl specific URLs in your domain, or need to crawl URLs of other domains too.<\/p>\n\n\n\n While setting up your URL list test you should create a file with the URL to be tested and check if all of them are properly loaded. The list should be in CSV, XLS, TXT, or a sitemap .xml file format. The sitemap .xml should only contain the URLs you are going to test\u2014not all URLs on your site.<\/p>\n\n\n\n The Autonomous Applitools Custom Flow Test is an intelligent and streamlined way to automate end-to-end testing of specific workflows on a website. This feature enables testers to design a sequence of actions or user scenarios, for instance, login, adding items to a shopping cart, and navigating to a checkout page while at the same time, every action is recorded for evaluation purposes.<\/p>\n\n\n\n Let’s take the example of https:\/\/www.saucedemo.com\/<\/a> where a user may perform the actions below.\u00a0<\/p>\n\n\n\n For the given use case, we have two options to write the test script:<\/p>\n\n\n\n Both approaches can be utilized based on the specific requirement or convenience. In the screenshot below you can see the above use case is recorded.<\/p>\n\n\n\n Debug or Modify a Test<\/strong><\/p>\n\n\n\n In the screenshot below you can see we can perform various actions by clicking on any existing action. The user has clicked on an action (likely Step 7, clicking a button with a CSS selector) that reveals a dropdown menu providing options such as: Previewing Test Steps in the Interactive Browser<\/strong><\/p>\n\n\n\n This approach saves time during the test construction process because it enables previewing of the test steps as one proceeds with the development of the test script in an interactive browser.<\/p>\n\n\n\n When in an interactive browser running a test there is an option where you get to see the screen as it was before each step was performed and after.<\/p>\n\n\n\n How to Preview a Test Step<\/strong><\/p>\n\n\n\n Place the mouse pointer over<\/strong> an icon before one or several particular test steps, and you will be provided with a thumbnail of the screen. For a more detailed view of the screen, navigate to the icon on the toolbar to open the full-size picture preview. On the top of the preview window, you can find information such as the step number, command run, and its status\u2014pass or fail.<\/p>\n\n\n\n Use the icons behind the worksample Click on Action<\/strong> to see the screen before the step and Outcome<\/strong> to see the screen after the step. When viewing the action window the element clicked on during the step is highlighted in pink.<\/p>\n\n\n\n Running the Test from the Start<\/strong><\/p>\n\n\n\n To start the test from the first step you can just press the \u201cRun\u201d button or “Rerun test from start\u201d which is above the list of the steps.<\/p>\n\n\n\n Once started, Autonomous will go through each step one by one while taking a screenshot of the application at every step. If the browser is not already connected, then the Run will also create the connection before the test is carried out. This way it can be ensured all the steps are performed correctly and also shows the status of a particular step.<\/p>\n\n\n\n During the test, you can pause or stop <\/strong>it at any time by clicking the Pause <\/strong>or Stop <\/strong>buttons.<\/p>\n\n\n\n Applitools Autonomous is not limited to functional and visual testing. It can also be used for API automation. Supporting all CRUD operations, it allows you to execute standard HTTP actions like GET, POST, PUT, and DELETE in your tests. This adds versatility to its API testing capabilities. For GET requests let\u2019s take an example of https:\/\/gorest.co.in\/<\/a><\/p>\n\n\n\n Navigate to Test Management: <\/strong>In the navigation bar, go to Test Management <\/strong>> Tests.\u00a0<\/strong>Click on Create a new test<\/strong> and select the Custom Flow <\/strong>from the dropdown. Use Case 1: API Response With Positive Validation<\/strong><\/p>\n\n\n\n Objective: <\/strong>Hit the API endpoint and verify the following:<\/p>\n\n\n\n In the screenshot below you can see all the above validations have passed.<\/p>\n\n\n\n You can then hover over a response value to view options to copy the following information to the clipboard:<\/p>\n\n\n\n Use Case 2: API Response With Negative Validation<\/strong><\/p>\n\n\n\n Objective: <\/strong>Hit the API endpoint and verify the following:<\/p>\n\n\n\n In the screenshot below you can see title validation is failing when we are verifying the title of the first object.<\/p>\n\n\n\n For POST requests let’s take an example of the site https:\/\/reqres.in\/api\/users<\/a><\/p>\n\n\n\n Use Case 1: API Response With Creating User<\/strong><\/p>\n\n\n\nTypes of Testing Using Applitools Autonomous<\/h2>\n\n\n\n
Full Website Testing<\/h3>\n\n\n\n
Benefits of Full Website Testing:<\/strong><\/h4>\n\n\n\n
\n
URL List Testing<\/h3>\n\n\n\n
Benefits of URL List Testing:<\/strong><\/h4>\n\n\n\n
\n
Custom Flow Testing<\/h3>\n\n\n\n
Benefits of Custom Flow Testing:<\/strong><\/h4>\n\n\n\n
\n
Cross-Browser and Device Testing<\/h4>\n\n\n\n
Benefits of Cross-Browser Testing:<\/strong><\/h4>\n\n\n\n
\n
API Testing<\/h3>\n\n\n\n
Benefits of API Testing:<\/strong><\/h4>\n\n\n\n
\n
Example of Testing Using Applitools Autonomous<\/h2>\n\n\n\n
Full Website Testing<\/h3>\n\n\n\n
Steps to Create a Full Website Test<\/h4>\n\n\n\n
\n
\n
![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-create-full-website-test-1024x606.png\")
<\/figure>\n\n\n\n\n
Alternatively, you can enter the full path to the sitemap or a sub-directory, such as https:\/\/dan.sandbox.applitools.com\/e-commerce\/type\/books<\/a>.
If a sub-directory is specified, Autonomous will use the sitemap in the root directory to identify URLs within the sub-directory. If the sub-directory has its own sitemap, provide the full path to that sitemap.<\/li>\n<\/ol>\n\n\n\n![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-enter-full-website-test-URL-screenshot-1009x1024.png\")
<\/figure>\n\n\n\n\n
\n
\n
This helps the first test run quickly and get preliminary results. This setting only applies to the first run; future runs will include all URLs in the sitemap, with new URLs marked as \u201cNew\u201d in the results.
Note: If you have a trial account, note that there is a limit to the number of tests you can include in a full website test.<\/em><\/li>\n\n\n\n
You can select Basic authentication<\/strong> and enter a username and password. This adds an authentication-encoded string in each URL, ensuring the username and password are included.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
Once you click the Next button<\/strong>, Autonomous can then develop baseline data at every screen on the website. These are the initial test images which are in most cases used to identify changes in subsequent test iterations. The maximum count of baselines to be generated is obtained by multiplying the count of URLs in the test by the count of environments.
You can see baseline data is created for every screen in the screenshot below.<\/li>\n<\/ol>\n\n\n\n![\"\"](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-baseline-data-creation-screenshot-1024x698.png\")
<\/figure>\n\n\n\n\n
Clicking on the Results <\/strong>tab on the left side lets you see the details of the Pass and Fail test cases. In the screenshot, we can see one test case failed. When we tried to find out the reason it was discovered that this test case was failing because of the 404 error screenshot attached below.
This lets us automatically find technical issues, pages that were added or removed from the website, visual disparities, and unexpected alterations on any of the pages.<\/li>\n<\/ol>\n\n\n\n![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-exectuion-report-screenshot-1024x750.png\")
<\/figure>\n\n\n\nURL List Test<\/h3>\n\n\n\n
Steps to Create a URL List Test in Applitools Autonomous<\/h4>\n\n\n\n
\n
![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-create-a-URL-list-test-screenshot-1024x299.png\")
<\/figure>\n\n\n\n\n
\n
![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-test-details-screenshot-1024x474.png\")
<\/figure>\n\n\n\n\n
Alternatively, enter a single URL<\/strong> and click Add URL<\/strong> to manually add URLs one by one.<\/li>\n\n\n\n\n
Custom Flow Testing<\/h3>\n\n\n\n
Key Components of Autonomous Custom Flow Test<\/h4>\n\n\n\n
\n
The interactive browser records every action in real time and automatically translates them into test steps, simplifying the test creation process.<\/li>\n<\/ul>\n\n\n\n![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-interactive-browser-screenshot-1024x583.png\")
<\/figure>\n\n\n\n\n
![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-custom-flow-selection-screenshot.png\")
The below screen will then open when you click on Custom flow<\/strong>:![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-create-a-custom-flow-screenshot.png\")
In the screenshot below, you can see the recorded steps resulting from using the interactive browser:![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-interactive-browser-steps-screenshot.png\")
Actions performed in the browser, such as clicking or typing, are captured as plain English commands. These steps can be easily added, modified, or deleted.
For instance, a step might read: “Enter “standard_user” as username\u201d, Enter “secret_sauce” as password, and\u00a0 “Click on the Login button.” Autonomous also offers auto-suggestions to ensure that the commands are valid, reducing the risk of errors and speeding up the creation of test scripts.<\/li>\n\n\n\n
Screenshots act as baselines and provide insights into the accuracy of the UI across different devices and resolutions.![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-add-UI-validation-screenshot.png\")
In the below screenshot, you can see that after logging into the application we are visually verifying the page.![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-visually-verify-the-page-screenshot.png\")
<\/li>\n<\/ul>\n\n\n\nUse Cases of Custom Flow Testing<\/h4>\n\n\n\n
\n
\n
![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-custom-flow-of-Sauce-Labs-store-screenshot-1024x547.png\")
<\/figure>\n\n\n\n![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-modify-a-custom-flow-test-step-screenshot.png\")
<\/p>\n\n\n\n\n
![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-preview-a-test-step-screenshot.png\")
<\/p>\n\n\n\n![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-custom-flow-step-action-and-outcome-views-screenshot-1024x427.png\")
<\/figure>\n\n\n\n![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-start-and-rerun-test-screenshot-1024x918.png\")
<\/figure>\n\n\n\n\n
API Test<\/strong><\/h3>\n\n\n\n
Autonomous also enables you to validate test operations that cannot be confirmed via the UI, such as verifying form submissions through backend records. Additionally, it ensures backend APIs expose the correct endpoints, function as expected, and return proper responses, headers, and cookies.<\/p>\n\n\n\nGET Requests<\/h4>\n\n\n\n
<\/p>\n\n\n\n\n
![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-API-test-validations-screenshot-1024x611.png\")
<\/figure>\n\n\n\n\n
![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-API-test-reponse-details-screenshot-1024x508.png\")
<\/figure>\n\n\n\n\n
![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-API-test-title-validation-failure-screenshot-1024x846.png\")
<\/figure>\n\n\n\nPOST Requests<\/h4>\n\n\n\n
![\"Autonomous](\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2024\/10\/Autonomous-API-test-title-validation-failure-screenshot-1-1024x702.png\")
<\/figure>\n\n\n\n