Generate and Validate Selectors using ChroPath

     ChroPath helps to generate and validate selectors like relative xpath with iframe, svg support. ChroPath generates all possible selectors just by one click. ChroPath can also be used as an editor for selectors. It makes it easy to write, edit, extract and evaluate XPath queries on any webpage.

     ChroPath also supports multi selectors generation, dynamic attributes, generate relative xpath with custom attribute, automation script steps generation. ChroPath has the capability to record and generate all the XPath, once the record complete there is a way to export all inspected locator in an excel file. In this article, we will discuss features of ChroPath, ChroPath extensions, how to use ChroPath and how to use it for inspect multiple elements using record option.

 Features of ChroPath
  • Single Click Locators Generation
  • Verify and Modify Locators
  • iframe Support & SVG element support
  • Multiple XPath and Automation command
  • Dynamic attribute Support
  • Save configuration in local
ChroPath extensions for different browsers
How to use ChroPath?
  1. Right-click on the web page, and then click Inspect.
  2. On the right side of the Elements tab, click on the ChroPath tab which will be the last tab.
  3. To generate selectors, inspect elements or click on any DOM node, it will generate the unique relative XPath and all possible Selectors with their occurrences. Scroll in the ChroPath panel to see all generated Selectors.
  4. To evaluate XPath/CSS, type the XPath/CSS query and press the enter key.
    As you enter, it will query in DOM for the relevant element/node. You can view the total number of the matching node(s) and nodes value as per their sequential occurrence. A green color outline appears around to highlight the first matching elements and rest in blue color in the web page.
  5. If you mouse hover on any matching node in the ChroPath tab, the green/blue dashed outline will convert into dotted orange-red to highlight the corresponding element on the webpage.
  6. If the found element is not in a visible area on a webpage then mouse hover on the found node in the ChroPath panel will scroll that element in the visible area with a dotted orange-red outline.
  7. If the found element is not highlighted but visible then on mouse hover on the matching node on the ChroPath tab it will highlight element with a dotted orange-red outline.
  8. Copy the locators just by clicking on the copy icon.
  9. Click on the edit icon if want to edit any locator.
How to generate XPath for multiple-element in a few seconds?
  1. Click on the record button (circular icon) in the ChroPath tab.
  2. Now just inspect all the elements one by one or click on the DOM node for which you want to generate the XPaths.
  3. It will generate XPath along with the label name.
  4. You can copy, edit, delete any of the rows in the table.
  5. Label and XPath fields are editable, so you can directly edit them there itself.
  6. Click to CopyAll icon given in the header to copy all XPaths value.
  7. You can also export all the generated XPaths, just by clicking the Export icon given in the table header in the ChroPath tab.
  8. At any point of time if you want to stop recording and go back to the default view, just click on the record button again. This will not delete your recorded selectors but if you will close the DevTool then you will lose them.
  9. Click on DeleteAll icon to clear all the rows.
  10. You can also stop recording at anytime just by clicking on ON/OFF button.
  11. Every time when you will open DevTool and then ChroPath, it will be a fresh window.

      I hope you really enjoyed to read this article. Also, learned the concept and use of ChroPath free XPath and timesaver tool. You can install this tool in your desired browser as an extension and start inspect strong element locators for your selenium automation script.

make it perfect!

23 CI/CD Tools

      CI/CD is one of the best practices for DevOps teams to implement. It is also an agile methodology best practice, as it enables software development teams to focus on meeting business requirements, code quality, and security because deployment steps are automated. In this article, we will discuss various 23 CI/CD tools and their features in brief.

1. Jenkins

Jenkins is the leading open-source automation server and also Continuous Integration tool. Built with Java, it provides over 1,700 plugins to support automating virtually anything. Jenkins allows seamless, ongoing development, testing, and deployment of newly created code. Continuous Integration is a process wherein developers commit changes to source code from a shared repository, and all the changes to the source code are built continuously. This can occur multiple times daily. Each commit is continuously monitored by the CI Server, increasing the efficiency of code builds and verification. This removes the tester’s burdens, permitting quicker integration and fewer wasted resources. Some of the key features of Jenkins includes:

  • Jenkins is a platform-agnostic, self-contained Java-based program, ready to run with packages for Windows, Mac OS, and Unix-like operating systems.
  • Jenkins is easily set up and configured using its web interface, featuring error checks and a built-in help function.
  • There are thousands of plugins available in the Update Center, integrating with every tool in the CI and CD toolchain.
  • Jenkins can be extended by means of its plugin architecture, providing nearly endless possibilities for what it can do.
  • Jenkins can easily distribute work across multiple machines for faster builds, tests, and deployments across multiple platforms.
  • Jenkins is an open-source resource backed by heavy community support.

2. GitLab

GitLab CI/CD tool is a part of GitLab and a powerful alternative to Jenkins. It is an open-source web interface that can be used to apply all the continuous methods like integration, delivery, and deployment to your project without any third-party application. It provides a user-friendly interface along with distributed version control services. Some of the top features that make it one of the best alternatives to Jenkins are:

  • Just like Jenkins, it is an open-source tool too.
  • You can test your build in parallel, thereby reducing time.
  • It allows docker integration and helps in automating release and application delivery.
  • It provides better support.

See how to Build An Automated Testing Pipeline With GitLab CI/CD

3. Atlassian Bamboo

Bamboo is a product of Atlassian, and it’s a useful tool for continuous integration, development, and deployment. It runs builds and tests and efficiently integrates with JIRA to update issues and commits and connect test results for an end to end visibility within the team. It supports multiple technologies like AWS, Amazon S3 buckets, Git, SVN, Mercurial, etc. Some of the key features of Bamboo includes:

  • It can be used to run parallel batch tests.
  • It provides seamless integration with JIRA, BitBucket, and Fisheye.
  • It is effortless to set up.

4. CircleCI

CircleCI is a flexible tool with easy maintenance and can run in almost any environment. Every commit leads to automatic build execution. To add to it, if any new build is triggered, any queued or running build is automatically canceled. Besides, it provides features like:

  • Integration with GitHub, Bitbucket, and GitHub Enterprise.
  • It splits tests among multiple containers, thereby reducing build time.
  • It provides SSH support so that users can access the Virtual Machine via SSH and run commands.
  • Very easy to maintain as it allows for automatic upgrades.

5. TeamCity

TeamCity is also known as the “Intelligent CI Server” because of its ease of use and integration. It offers different installation packages for different operating systems. It is a powerful tool developed from JetBrains, which allows building, and running tests even before changes are committed, hence keeping the code clean. Some of its features that make it one of the best Jenkins alternatives are:

  • It is well documented and provides easy installation.
  • It provides integration with tools like Docker, JIRA, etc.
  • It offers well-defined APIs available for extension.

6. Travis CI

Travis CI is a continuous integration and testing CI/CD tool. It is free of cost for open source projects and provides seamless integration with GitHub. It supports more than 20 languages, like Node.js, PHP, Python, etc. along with Docker. Some of the key features of Travis CI includes:

  • Very easy to set up with broad user community support.
  • No project is merged before tests are passed successfully.
  • You can easily customize the build environment as per your requirements.

7. BuildMaster

BuildMaster by Inedo is one of the best Jenkins alternatives that offers continuous integration on different platforms. With BuildMaster, you can manage your apps and deploy them to the environment without any hassle. Moreover, it doesn’t require extensive expertise to set up the pipelines. Some of its features include:

  • Create release management platforms that can be self-managed.
  • Automated gates prevent the release of untested software.

8. Bitrise

Bitrise comes as a platform as a service (PaaS) for continuous integration and continuous delivery in mobile applications. Each build runs on its virtual machine, and at the end of the build, the data is scrapped. It offers a free plan and allows integration with services like Slack, HockeyApp, etc. Also, it provides features like:

  • Apps are delivered without any manual intervention.
  • It integrates with major third-party testing and deployment services.
  • It allows quick setup having service integration with a lot of services.

9. Spinnaker

Spinnaker is an open-source platform developed by Netflix for continuous delivery. It is powerful and provides integration with major cloud providers. It supports multiple hosting technologies like Docker, Kubernetes, etc. It is useful for cloud-focused approaches. Some of the key features of Spinnaker includes:

  • Powerful and flexible pipeline management system.
  • It provides integrations to the major cloud providers like Google Cloud Platform, AWS, Microsoft Azure, and Oracle Cloud.

10. UrbanCode

An IBM product, UrbanCode, is a continuous integration application that provides multiple features like visibility, traceability, and auditing bundled in a single package. It enables you to deliver applications faster. Irrespective of the environment, you can quickly deploy applications to data centers, cloud, or virtual environments with no error. Some of its features that make it a preferred Jenkins alternative are:

  • It minimizes deployment errors.
  • Drag and drop feature in the editor makes it convenient to use.
  • Increased frequency to deliver applications.

11. Buddy

Buddy, also known as Buddy Works, is a continuous integration and delivery software with an interactive user interface, making for a perfect Jenkins alternative. It helps to build, test, and deploy applications faster quickly. You can get your CI/CD pipeline running in just a few minutes’ configurations. Besides, it provides feature like:

  • It offers on-premise solutions.
  • It provides support for multiple languages.
  • One can customize the build and test environment as per requirements.

12. Drone

Drone is considered one of the best Jenkins alternatives when it comes to integrating and deploying for busy development teams. It is a continuous self-service integration and delivery platform. It provides you the ability to customize multiple features on the go. It integrates easily with GitHub, GitLab, Bitbucket, and GitHub Enterprise. Some of its top features include:

  • It supports multiple languages and operating systems.
  • It provides plugins for pre-configured steps.
  • Every build is executed in an isolated container.
  • It provides auto-scaling with a single binary file.

13. AWS CodePipeline

AWS CodePipeline is a continuous integration and continuous delivery service that easily and quickly automates your release pipelines for updates. Every time you change the code, AWS CodePipeline will build, test, and deploy your application. Also, it can be easily integrated with GitHub. Some of its features that make it an ideal Jenkins alternative are:

  • Follows the pay for what you use approach. You need not block your money or pay any fees. You only pay for what you are using.
  • It provides a workflow that can be configured as per your release stages.
  • It offers parallel execution, thereby increasing the workflow speed.

14. CruiseControl

CruiseControl is a continuous integration tool, and it provides a framework that can be extended to create customized build processes. Though written in Java, it can be used in different projects with the help of builders provided by it. It can integrate with different source control systems. Some of the key features of CruiseControl includes:

  • Provide remote management support.
  • You can build multiple projects on a single server.
  • Provides email and messaging notifications.

15. Integrity

Integrity is a continuous integration server that builds your code and runs your test as soon as a commit happens. A report is then generated, and the users or the team is notified. The only limitation is that it can be used only with GitHub but can be mirrored with other SCM. Some of its features include:

  • It supports multiple notification mechanisms.
  • It works fine with GitHub Repos, public and private.

16. Shippable

Shippable provides an easy way to set up continuous integration and delivery for applications. It optimizes DevOps operations and provides ready-to-use build images. It provides analytics to help you improve. It also offers machine-level isolation to secure the workflows. Some of the key features of Shippable includes:

  • Enable Continuous Improvement with rich analytics and insights.
  • Secures your workflows with Role-Based Access Control (RBAC)

17. CodeShip

CodeShip is a hosted continuous integration and continuous delivery platform found by CloudBees. It provides fast feedback and customized environments to build applications. It provides integration with almost anything and is good at helping you scale as per your needs. It comes free for up to 100 monthly builds. Besides, it provides feature like:

  • Parallel execution for fast feedback and minimum to no wait times.
  • Easy to configure.
  • It provides support for headless browsers.

18. Buildkite

Buildkite enables you to run continuous integration pipelines on your infrastructure. It provides fast and secure integration. It allows you to run multiple builds with maximum control. It has an interface that provides visibility of your pipelines, which you can monitor. Some of its features include:

  • It provides unlimited language support.
  • It provides chat support for quick resolutions.
  • It offers easy integration with tools like Slack, HipChat, etc.

19. GoCD

GoCD comes as a continuous open-source integration and continuous delivery server with an end-to-end map showing the path to production in a single view. You can integrate it with popular environments like Kubernetes, Docker, and many more. It has advanced features of traceability wherein you can easily debug a broken pipeline. Some of its features that make it a capable Jenkins alternative are:

  • It has a great support community.
  • Easy to upgrade even when plugins are integrated.
  • It provides fast feedback.

20. Semaphore CI

Semaphore provides you features for continuous integration and delivery by removing technical challenges. You need not depend on hiring staff specifically for deployments. You only need to define a workflow, and there you go with building a great application. Some of the main features of Semaphore CI includes:

  • It provides flexible pipelines for complex projects.
  • It offers parallel testing for faster movement.
  • Debugging capabilities for quick resolutions.

21. Microtica

Microtica is a DevOps tool for automation with a complete software delivery process. It allows you to use reusable pieces of code to help you build infrastructure in no time. With Microtica’s pipeline workflow, you can get an overview of the build process at any given time. It’s not just all. It also allows you to automate sleep cycles, thus reducing AWS cost drastically. Also, it provides features like:

  • It allows you to deploy microservices with Kubernetes in no-time.
  • Reduce AWS costs for non-production environments

22. AppVeyor

AppVeyor provides continuous integration and delivery services for any platform. You can quickly build, test, and deploy your applications in a fast manner. It supports GitHub, Bitbucket, Kiln, etc. Each build executes in an isolated and clean environment. Some of its features include:

  • The console output makes it easy to debug the failure.
  • It provides faster builds with virtual machines and pseudo access.
  • It integrates with any source control tool.

23. Azure DevOps (Azure Pipelines)

Azure DevOps presents a simplified process for creating a continuous integration (CI) and continuous delivery (CD) pipeline. You can bring your existing code and Git repo, or you can select a sample application. Through this process, deliver value faster to your customers with a continuous integration and continuous deployment (CI/CD) pipeline which pushes each of your changes automatically. A CI/CD Pipeline implementation, or Continuous Integration/Continuous Deployment, is the backbone of the modern DevOps environment. It bridges the gap between development and operations teams by automating the building, testing, and deployment of applications. Some of the key features of Azure DevOps includes:

  • As a SaaS offering, Azure DevOps is reliable, scalable and globally available.
  • Azure DevOps pipeline is very simple and easy to configuration.

      I hope you really enjoyed to read and learn all the CI/CD tools. You can try each tool based on your needs in your project and organization. Enjoy your CI/CD pipelines.

Reference: LambdaTest

make it perfect!

Accessibility Testing Approaches – Part II

      In the previous article, we discussed about Accessibility Testing basics, importance of Accessibility Testing, main focus areas while doing Accessibility Testing, Accessibility Testing using Axe browser extension and Axe command line. Also, we discussed basic about Axe core library to perform the accessibility testing and identify the violations. In this article, we will discuss more about Axe core library and the implementations.

Axe Core Library

      This is one of the advanced approach to perform the accessibility testing and identify the violations. In this approach we can use Axe core library and automate the accessibility testing in between your functional regression automation. In the approach we are using the selenium dependency of com.deque.html.axe-core, and analyze method of AxeBuilder class. Once you create Accessibility Testing suite, you can configure in CI/CD pipelines for continuous testing.

Prerequisites:

      Following are the prerequisites to start Accessibility Testing,

  • Install Java SDK 8 and above.
  • Install Eclipse or IntelliJ IDEA IDEs.
  • Following maven dependencies:
    • testng
    • selenium-java
    • selenium-server
    • selenium from the group com.deque.html.axe-core
    • jackson-databind
    • jackson-dataformat-csv
    • poi-ooxml-schemas
    • poi-ooxml
    • poi
Step-by-step approach:

Step 1: Create a maven project and add the above dependencies in pom.xml of the project.

Step 2: Create a Java class AccessibilityTestHelper to keep the logic to track violations. Implement following methods:

  • trackViolations – this is a public method that can be used in your test classes to track the violations. In this method we used analyze method of AxeBuilder class to identify the violations, after that create an excel file if not exist with help of createExcelFile method. Once the file gets created, writing the violation details (violation id, description, impact, help, help URL, and WCAG tags) into the file using writeToExcel method. Also there are logic to track violations in JSON and text files. The actual implementations are below:
/**
 * Method to track the violations using AxeBuilder support
 * 
 * @author sanojs
 * @param driver
 * @param pageName
 */
public void trackViolations(WebDriver driver, String pageName) {
	Results violationResults;
	try {
		violationResults = new AxeBuilder().analyze(driver);
		if (!new File(System.getProperty("user.dir") + "\\Results").exists()) {
			(new File(System.getProperty("user.dir") + "\\Results")).mkdir();
		}
		int j = 2;
		String filePath = System.getProperty("user.dir") + "\\Results\\AccessibilityTestReport.xlsx";
		createExcelFile(filePath);
		for (int i = 0; i < violationResults.getViolations().size(); i++) {
			writeToExcel(filePath, pageName, 1, j, violationResults.getViolations().get(i).getId());
			writeToExcel(filePath, pageName, 2, j, violationResults.getViolations().get(i).getDescription());
			writeToExcel(filePath, pageName, 3, j, violationResults.getViolations().get(i).getImpact());
			writeToExcel(filePath, pageName, 4, j, violationResults.getViolations().get(i).getHelp());
			writeToExcel(filePath, pageName, 5, j, violationResults.getViolations().get(i).getHelpUrl());
			writeToExcel(filePath, pageName, 6, j, violationResults.getViolations().get(i).getTags().toString());
			j++;
		}
		AxeReporter.writeResultsToJsonFile(
				System.getProperty("user.dir") + "\\Results\\" + pageName + "_" + getCurrentDateAndTime(),
				violationResults);
		AxeReporter.writeResultsToTextFile(
				System.getProperty("user.dir") + "\\Results\\" + pageName + "_" + getCurrentDateAndTime(),
				violationResults.getViolations());
	} catch (Exception e) {
		e.printStackTrace();
	}
}
}
  • createExcelFile – this is a private method that helps to create an excel file if not exists. The file will be created at the project level. The actual implementations are below:
/**
 * Method to create a new excel file
 * 
 * @author sanojs
 * @param filePath
 * @return
 */
private XSSFWorkbook createExcelFile(String filePath) {
    XSSFWorkbook workbook = null;
    try {
        File fileName;
        FileOutputStream fos = null;

        File file = new File(filePath);
        if (!file.exists()) {
            fileName = new File(filePath);
            fos = new FileOutputStream(fileName);
            workbook = new XSSFWorkbook();
            workbook.createSheet("Instructions");
            XSSFSheet sheet = workbook.getSheetAt(0);
            Row header = sheet.createRow(0);
            header.createCell(0).setCellValue("Accessibility Testing Report");
            XSSFCellStyle style = workbook.createCellStyle();
            style.setBorderTop((short) 6);
            style.setBorderBottom((short) 2);
            style.setBorderRight((short) 2);
            XSSFFont font = workbook.createFont();
            font.setFontHeightInPoints((short) 15);
            font.setBoldweight(XSSFFont.BOLDWEIGHT_BOLD);
            style.setFont(font);
            header.getCell(0).setCellStyle(style);

            Row row = sheet.getRow(0);
            sheet.autoSizeColumn(0);
            sheet.autoSizeColumn(1);
            row = sheet.getRow(1);
            if (row == null)
                row = sheet.createRow(1);
            Cell cell = row.getCell(0);
            if (cell == null)
                cell = row.createCell(0);
            cell.setCellValue("Please go through following tabs to know the violations");
            workbook.write(fos);
            fos.flush();
            fos.close();
            workbook.close();
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return workbook;
}
  • writeToExcel – this is a private method that helps to write the violations into the created excel file. The actual implementations are below:
/**
 * Method to write the violations in a excel report
 * 
 * @author sanojs
 * @param sheetName
 * @param columnIndex
 * @param rowNum
 * @param data
 * @return
 */
private boolean writeToExcel(String filePath, String sheetName, int columnIndex, int rowNum, String data) {
    InputStream in = null;
    XSSFWorkbook wb = null;
    Sheet newSheet = null;
    FileOutputStream fileOutStream = null;
    try {
        if (filePath == null || filePath.trim().equals(""))
            throw (new Exception());
        if (filePath.endsWith(".xlsx") || filePath.endsWith(".xls")) {
            in = new FileInputStream(filePath);
            wb = new XSSFWorkbook(in);
        } else {
            throw (new Exception());
        }
        if (rowNum <= 0)
            throw (new Exception());
        try {
            newSheet = wb.getSheet(sheetName);
            if (newSheet != null) {
                throw new Exception("Sheet Already exist...");
            }
            newSheet = wb.createSheet(sheetName);
        } catch (Exception e) {
        }
        int index = wb.getSheetIndex(newSheet);
        if (index == -1)
            throw (new Exception());
        XSSFCellStyle style = wb.createCellStyle();
        style.setBorderTop((short) 6);
        style.setBorderBottom((short) 1);
        XSSFFont font = wb.createFont();
        font.setFontHeightInPoints((short) 15);
        font.setBoldweight(XSSFFont.BOLDWEIGHT_BOLD);
        style.setFont(font);
        XSSFSheet sheet = wb.getSheetAt(index);
        Row header = sheet.createRow(0);
        header.createCell(0).setCellValue("Violation ID");
        header.createCell(1).setCellValue("Violation Description");
        header.createCell(2).setCellValue("Violation Impact");
        header.createCell(3).setCellValue("Violation Help");
        header.createCell(4).setCellValue("Violation Help URL");
        header.createCell(5).setCellValue("Violation Issue Tags");
        for (int j = 0; j <= 5; j++)
            header.getCell(j).setCellStyle(style);
        Row row = sheet.getRow(0);
        if (columnIndex < 1)
            throw (new Exception());
        sheet.autoSizeColumn(columnIndex - 1);
        row = sheet.getRow(rowNum - 1);
        if (row == null)
            row = sheet.createRow(rowNum - 1);
        Cell cell = row.getCell(columnIndex - 1);
        if (cell == null)
            cell = row.createCell(columnIndex - 1);
        cell.setCellValue(data);
        XSSFFormulaEvaluator.evaluateAllFormulaCells(wb);
        fileOutStream = new FileOutputStream(filePath);
        wb.write(fileOutStream);
    } catch (Exception e) {
        e.printStackTrace();
        return false;
    } finally {
        try {
            wb.close();
            fileOutStream.close();
            in.close();
        } catch (Exception e) {
        }
    }
    return true;
}
  • getCurrentDateAndTime – this is a private method that helps to generate current timestamp that used suffix to the JSON and text files. The actual implementations are below:
/**
 * Method to get the current date and time
 * 
 * @author sanojs
 * @return
 */
private String getCurrentDateAndTime() {
    DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
    DateFormat timeFormat = new SimpleDateFormat("HH-mm-ss");
    Date date = new Date();
    String currdate = dateFormat.format(date);
    String currtime = timeFormat.format(date);
    return currdate + "_" + currtime;
}

Step 3: Create a TestNG class SampleAccessibilityTest with logic to start the driver session and create a test case let say accessibilityTesting. In the test case, we just need to load the browser that you need to perform the Accessibility Testing and after that call the method trackViolations. The actual implementations are below:

@BeforeClass
public void setUp() throws InterruptedException {
try {
    ChromeDriverService chromeservices = new ChromeDriverService.Builder()
                .usingDriverExecutable(new File("path to your driver executable")).usingAnyFreePort().build();
    driver = new ChromeDriver(chromeservices);

    } catch (WebDriverException e) {
        e.printStackTrace();
    }
}
@Test
public void accessibilityTesting() {
try {
    driver.get("https://journeyofquality.com/");
    new AccessibilityTestHelper().trackViolations(driver, "Home Page");

    } catch (Exception e) {
    e.printStackTrace();
    }
}

Step 4: Execute above test case and see the reports in the format of excel, JSON and text files. These reports will be generated in Results folder of the project structure. Based on the above trackViolations method a sheet Home Page will be created in the excel report track all the violations. If you are using trackViolations method for different pages of your web application, it will create new sheets to track the violations of your different pages. Below is the project structure:

      Accessibility Testing is one of the important types of testing that add value to your business and deliver user friendly applications. Axe Core is a very powerful framework that can help the team to build web products that are inclusive. In this article we discussed about different ways to test the Accessibility and also the automation part. I hope everyone enjoyed with the concept of testing the Accessibility and the implementations. Please try to utilize this opportunity in your testing world.    

make it perfect!

Accessibility Testing Approaches – Part I

      We know that Accessibility testing is the practice of making the web and mobile apps usable to as many people as possible. It makes apps accessible to those with disabilities, such as vision impairment, hearing disabilities, and other physical or cognitive conditions. We have to perform the accessibility testing to meet the needs of all users. It’s also the law between the Web Content Accessibility Guidelines (WCAG), Section 508, and the Americans with Disabilities Act (ADA), you have plenty of regulations to meet. We need to ensure that the applications work with screen readers, speech recognition software, screen magnification, and more. In this article, we will discuss about what need to be tested as part of accessibility, importance of accessibility testing, how we can achieve accessibility testing using AXE for web applications.

Importance of Accessibility Testing

      In Accessibility Testing, we not only check the usability, but we also check how the application would be used by the people with Visual, Auditory, Motor, Cognitive and Speech Disabilities. Accessibility Testing is important for businesses to enable and make their critical web applications and mobile applications to be easily accessible even to people with disabilities. As per the publishing of Web Accessibility testing initiative, the WCAG aims to make the website easily understandable, accessible, and usable on all websites. Also, WCAG is a definitive guideline that should be followed by businesses during the website development which is achieved by leveraging accessibility test, as this helps in many ways such as:

  • To make the website easily accessible for users with challenges or disabilities.
  • To attract the users and increase the company market share.
  • To be accessible for users with low-bandwidth.
  • To make the website and the information available for the users across regions

What need to be tested in Accessibility?

      In the Accessibility Testing, we have to focus mainly on following areas,

  • Text contrast, also ratio between text or images and background color.
  • Hit area size.
  • View hierarchy of UI, determines how easy the Android app is to navigate.
  • Dynamic font size.
  • HTML validation
  • Headings in the application
  • Alternate text in the images
  • Captions and transcripts for audio and video content
  • Skip navigation option for people with mobility impairment.
  • Link text
  • Form labels should be accessible with valid tooltip
  • Keyboard operations for dynamic elements such as drop down.
  • PDF files on the web page need to be verified.

How can we achieve Accessibility Testing?

      We can achieve Accessibility Testing following way using accessibility testing engine Axe,

  • Axe browser extension.
  • Axe command line.
  • Axe core library.
Axe Browser Extension

      This approach is pretty straightforward to perform the Accessibility Testing. Using the Axe browser extension we can directly analyse and see the violation details per web page. The Axe browser extension available for Google Chrome, Firefox and Edge browser. Following are the direct links to get the browser extension based on your browser type,

      Here I would like to share the Accessibility Testing approach using Firefox browser. When you load the above Axe browser extension in Firefox, you will get a page like below,

      You can add this extension and restart Firefox browser. Next step, you can load the website that you need to perform the Accessibility Testing and open the developer tool in the browser (press F12). Go to the Axe tab and you can see below screen,

      Click on ANALYZE button to begin the test, after few seconds you will get the results that includes violation details, issue description, issue information, issue tags. You need to manually go through each and every violations and share the details with developer team to improve the accessibility of your website. Below is the results of the analyze,

Axe Command Line

      Axe command-line approach is another way to test the accessibility and identify the violations. This can be achieved with support of NodeJS and node package manager (npm). You must install NodeJS in your system prior to start this way of accessibility testing. Once NodeJS is installed, one can install axe-core by the following command:   

npm install axe-cli –g

      This installs axe globally and can be accessed from any folder in the file system. Once installed, to test your web page, use the following command,

axe web-page-url –timeout=120 –save results.json  –tags wcag2a

      The above command will test the page at the specific url and save the results in a file called results.json. The value of the time out can be changed. The tags option specifies the rules to be run. There are several tags supported out of the box by axe framework. For the above example we are running the WCAG2.0 rules at level A. We can use the same website that used during Axe browser extension and see the output.

axe http://www.journeyofquality.com –timeout=120 –save results.json –tags wcag2a

      A detailed report is saved in file results.json (available in your system user folder). Open this file in a JSON editor. Drill down to the violations attribute. The details of the Accessibility violations along with suggestions for fixes will be seen.

Axe Core Library

      This is one of the advanced approach to perform the accessibility testing and identify the violations. In this approach we can use Axe core library and automate the accessibility testing in between your functional regression automation. In the approach we are using the selenium dependency of com.deque.html.axe-core, and analyse method of AxeBuilder class. Once you create Accessibility Testing suite, you can configure in CI/CD pipelines for continuous testing. We will discuss more about this automation approach to do Accessibility Testing in the Second Part.

      I hope you really enjoyed to read this article and got the concept of Accessibility Testing. Try to utilize the browser extension and command-line methods in your testing world for a quick Accessibility Testing and analysis.

make it perfect!

Automate iPadOS Split View Multitasking With Appium

      iPad Pros run a slightly different version of iOS called iPadOS, and this version of iOS comes with several really useful features. One of the favorite is the ability to run two apps side-by-side. This is called Split View Multitasking by Apple, and getting it going involves a fair bit of gestural control for the user. Here’s how a user would turn on Split View:

  1. Open the first app they want to work with
  2. Show the multitasking dock (using a slow short swipe up from the bottom edge)
  3. Touch, hold, and drag the icon of the second app they want to work with to the right edge of the screen

      From this point on, the two apps will be conjoined in Split View until the user drags the app separator all the way to the edge of the screen, turning Split View off. Of course, both apps must be designed to support split view for this to work. 

      Let’s now discuss how we can walk through this same series of steps with Appium to get ourselves into Split View mode, and further be able to automate whichever app of the two we desire. Unfortunately, there’s no single command to make this happen, and we have to use a lot of tricky techniques to mirror the appropriate user behavior. Basically, we need to worry about these things:

  1. Ensuring both apps have been opened recently enough to show up in the dock
  2. Executing the correct gestures to show the dock and drag the app icon to trigger Split View
  3. Telling Appium which of the apps in the Split View we want to work with at any given moment

We’re going to describe how to achieve above steps.

Ensuring applications are in the dock

      For our strategy to work, we need the icon of the app we want to open in Split View in the dock. The best way to make this happen is to ensure that it has been launched recently in fact, most recently apart from the currently-running app. Let’s take a look at the setup for an example where we’ll load up both Reminders and Photos in Split View. In our case, we’ll want Reminders on the left and Photos on the right. Because we’re going to open up Photos on the right, we’ll actually launch it first in our test, so that we can close it down, open up Reminders, and then open up Photos as the second app.

DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability(“platformName”, “iOS”);
capabilities.setCapability(“platformVersion”, “13.3”);
capabilities.setCapability(“deviceName”, “iPad Pro (12.9-inch) (3rd generation)”);
capabilities.setCapability(“app”, PHOTOS);
capabilities.setCapability(“simulatorTracePointer”, true);
driver = new IOSDriver(new URL(” http://localhost:4723/wd/hub “), capabilities);
wait = new WebDriverWait(driver, 10);
size = driver.manage().window().getSize();

      In this setUp method, we also construct a WebDriverWait, and store the screen dimensions on a member field, because we’ll end up using them frequently. When we begin our test, the Photos app will be open. What we want to do next is actually terminate Photos, and launch Reminders. At this point, we’ve launched both the apps we want to work with, so they are both the most recently-launched apps, and will both show up in the recent apps section of the dock. Then, we go back to the Home Screen, so that the dock is visible:

// terminate photos and launch reminders to make sure they’re both the most recently launched apps
driver.executeScript(“mobile: terminateApp”, ImmutableMap.of(“bundleId”, PHOTOS));
driver.executeScript(“mobile: launchApp”, ImmutableMap.of(“bundleId”, REMINDERS));

// go to the home screen so we have access to the dock icons
ImmutableMap pressHome = ImmutableMap.of(“name”, “home”);
driver.executeScript(“mobile: pressButton”, pressHome);

      In the next step of this flow, we figure out where the Photos icon is, and save that information for later. Then we re-launch Reminders, so that it is active and ready to share the screen with Photos.

// save the location of the icons in the dock so we know where they are //when we need to drag them later, but no longer have access to them as //elements
Rectangle photosIconRect = getDockIconRect(“Photos”);

// relaunch reminders
driver.executeScript(“mobile: launchApp”, ImmutableMap.of(“bundleId”, REMINDERS));

      There is an interesting helper method here. getDockIconRect just takes an app name, and returns the position of its dock icon in the screen:

protected Rectangle getDockIconRect(String appName) {
By iconLocator = By.xpath(“//[@name=’Multitasking Dock’]//[@name='” + appName + “‘]”);
WebElement icon = wait.until(
ExpectedConditions.presenceOfElementLocated(iconLocator));
return icon.getRect();
}

      Here we use an xpath query to ensure that the element we retrieve is actually the dock icon and not the home screen icon. Then, we return the screen rectangle representing that element, so that we can use it later.

Showing the dock and entering into Split View

      At this point we are ready to call a special helper method designed to slowly drag the dock up in preparation for running the Split View gesture:

// pull the dock up so we can see the recent icons, and give it time to settle
showDock();
Thread.sleep(1000);

protected void showDock() {
swipe(0.5, 1.0, 0.5, 0.92, Duration.ofMillis(1000));
}

      We are using showDock method to perform a slow swipe from the middle bottom of the screen, up just far enough to show the dock. Now that the dock is shown, we can actually enter Split View. To do that, we make use of a special iOS-specific method mobile: dragFromToForDuration, which enables us to perform a touch-and-hold on the location of the Photos dock icon, then drag it to the right side of the screen. We wrap this up in a helper method called dragElement. Below is the implementation:

// now we can drag the photos app icon over to the right edge to enter split view, also give it a bit of time to settle
dragElement(photosIconRect, 1.0, 0.5, Duration.ofMillis(1500));
Thread.sleep(1000);

protected void dragElement(Rectangle elRect, double endXPct, double endYPct, Duration duration) {
Point start = new Point((int)(elRect.x + elRect.width / 2), (int)(elRect.y + elRect.height / 2));
Point end = new Point((int)(size.width * endXPct), (int)(size.height * endYPct));
driver.executeScript(“mobile: dragFromToForDuration”, ImmutableMap.of(“fromX”, start.x, “fromY”, start.y, “toX”, end.x, “toY”, end.y, “duration”, duration.toMillis() / 1000.0));}

      Essentially, we take the rect of a dock icon, pass in the ending x and y coordinate percentages, and the duration of the “hold” portion of the gesture. The dragElement helper converts these to the appropriate coordinates, and calls the mobile: method.

Working with simultaneously open applications

      At this stage in our flow, we’ve got both apps open in Split View! But if we take a look at the page source, we’ll find that we only see the elements for one of the apps. And in fact, we can only work with one app’s elements at a time. We can, however, tell Appium which app we want to work with, by updating the defaultActiveApplication setting to the bundle ID of whichever app you want to work with:

driver.setSetting(“defaultActiveApplication”, PHOTOS);
wait.until(ExpectedConditions.presenceOfElementLocated(MobileBy.AccessibilityId(“All Photos”)));
driver.setSetting(“defaultActiveApplication”, REMINDERS);
wait.until(ExpectedConditions.presenceOfElementLocated(MobileBy.AccessibilityId(“New Reminder”)));

      In the code above, you can see how we call driver.setSetting, with the appropriate setting name and bundle ID. After doing this for a given app, we can find elements within that app, and of course we can switch to any other app if we want as well.

      So that’s the way we can enter into a Split View and automate each application on the screen. Try to utilize above capabilities in your iPadOS automation.

Reference: Appium Pro

make it perfect!