Visual testing with Applitools

Using Applitools for visual testing of any website can ensure that the UI remains consistent and visually correct across different devices, browsers, and screen sizes. Below is a guide on setting up and using Applitools for visual testing of such a site.

Steps:

Sign Up and Get API Key

• Visit the Applitools website and sign up for an account.
• Retrieve your API key from the Applitools dashboard. You will need this key to integrate Applitools into your test scripts.

Set Up Your Testing Environment

1. For Selenium (Java Example)

Add Dependencies: Ensure you have the required dependencies in your pom.xml if using Maven:

<dependencies>
    <dependency>
        <groupId>org.seleniumhq.selenium</groupId>
        <artifactId>selenium-java</artifactId>
        <version>4.0.0</version>
    </dependency>
    <dependency>
        <groupId>com.applitools</groupId>
        <artifactId>eyes-selenium-java3</artifactId>
        <version>4.5.3</version>
    </dependency>
</dependencies>

Create a Test Script: Below is an example test script for an Amazon-like website:

import com.applitools.eyes.selenium.Eyes;
import com.applitools.eyes.RectangleSize;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class AmazonVisualTest {
    public static void main(String[] args) {
        // Set up WebDriver
        WebDriver driver = new ChromeDriver();

        // Initialize the Eyes SDK
        Eyes eyes = new Eyes();
        eyes.setApiKey("YOUR_API_KEY");

        try {
            // Start the test and set the browser's viewport size to 1200x800
            eyes.open(driver, "Amazon App", "Home Page Test", new RectangleSize(1200, 800));

            // Navigate to the Amazon-like website
            driver.get("https://www.amazon.com/");

            // Visual checkpoint #1: Home Page
            eyes.checkWindow("Home Page");

            // Click on logo
            driver.findElement(By.className("nav-logo-link nav-progressive-attribute")).click();
            
            // Visual checkpoint #2: Refreshed Home Page
            eyes.checkWindow("Main Page");

            // End the test
            eyes.close();
        } finally {
            // Close the browser
            driver.quit();

            // If the test was aborted before eyes.close() was called, this will close it.
            eyes.abortIfNotClosed();
        }
    }
}

2. For Cypress

Get Navya PS’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Install Applitools Cypress SDK:

npm install @applitools/eyes-cypress

Configure Applitools: Add the following to your cypress/support/index.js:

import '@applitools/eyes-cypress/commands';

Create a Cypress Test: Below is an example test script for an Amazon-like website:

describe('Amazon-like Visual Test', () => {
    it('should look correct', () => {
        cy.visit('https://www.amazon.com/');
        
        // Start visual testing with Applitools
        cy.eyesOpen({
            appName: 'Amazon App',
            testName: 'Home Page Test',
            browser: [
                { width: 1200, height: 800, name: 'chrome' },
                { width: 800, height: 600, name: 'firefox' },
                { deviceName: 'iPhone X' },
            ],
        });

        // Take a visual checkpoint
        cy.eyesCheckWindow('Home Page');

        // Click on logo
        cy.get('a[href="/ref=nav_logo"').click();

        // Take another visual checkpoint
        cy.eyesCheckWindow('Main Page');

        // End visual testing
        cy.eyesClose();
    });
});

Execute Your Tests

• For Selenium: Run your Java test script as part of your test suite.
• For Cypress: Use the command cypress run to execute your tests.

Key Features and Benefits of Applitools

1. Visual AI: Detects visual bugs that traditional tests might miss by comparing screenshots against a baseline.
2. Cross-Browser Testing: Ensures your site looks consistent across different browsers (Chrome, Firefox, Safari, etc.) and devices.
3. Responsive Design Testing: Validates your site’s UI across various screen sizes and resolutions.
4. Batch Testing: Groups multiple tests into a batch for better organization and reporting.
5. Integration with CI/CD: Seamlessly integrates with CI/CD pipelines to automate visual testing.

Best Practices for Using Applitools

1. Baseline Management: Regularly review and update baseline images to reflect the expected UI state, minimizing false positives.
2. Selective Region Validation: Focus on specific UI regions to ignore dynamic content that changes frequently.
3. Consistent Environment: Maintain a consistent test environment to avoid inconsistencies in visual testing results.
4. Version Control: Use version control for baseline images to track changes and manage updates effectively.

Example Scenario for an e-commerce Website

1. Home Page: Validate the layout, banners, product listings, and navigation menu.
2. Product Page: Check the product images, descriptions, pricing, and add-to-cart functionality.
3. Cart Page: Ensure the cart summary, product details, and checkout button are displayed correctly.
4. Checkout Page: Verify the layout, form fields, and payment options.

By using Applitools, you can ensure your Amazon-like website maintains a high-quality user experience, with visually consistent and bug-free interfaces across all platforms and devices. This not only improves user satisfaction but also helps in maintaining the overall quality and reliability of your web application.