Web Application Testing with Ranorex Studio

January 13, 2020
Fatema Zohra

In e-commerce and online world, web application plays a vital role. Testing those web applications is not an easy task. Different browsers are available, and these browsers support different operating systems. Testing the whole application throughout all browsers manually takes time and to generate a report for each browser manually is a time-eater. Ranorex can give you relief!

Ranorex Studio

Ranorex provides you with a quick “Record once, check multiple browsers” solution whenever you want. It is an all-in-one test automation solution that is easy for test automation beginners, but powerful for experts. Automate the regression tests with the reliable capture-and-replay tool, drag-and-drop UI objects, and keyword-driven testing code modules, or build C # or VB.NET tests using the full IDE of Ranorex Studio. Ranorex Studio allows a wide variety of technologies, including legacy desktop applications that are difficult to automate. Run your tests on computer, cloud, or phone testing endpoints. Ranorex supports development on real devices or simulators/emulators for iOS and Android. Selenium WebDriver is integrated into the Ranorex core API for web applications, allowing you to distribute cross-browser testing on a Selenium grid. Ranorex incorporates tools like JIRA, Jenkins, Azure DevOps, TestRail, Bugzilla, Git and more to create a complete automated test toolchain.

Web application testing with Ranorex

I would like to explain the easy steps in this blog to record and run the test in Ranorex for web applications. Thanks to the Ranorex plug-ins for Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, and Chromium, building and running web tests is essentially the same as doing so for desktop tests.
Supported browsers
The following test automation browsers are supported by Ranorex Studio:

  • Microsoft Internet Explorer
  • Microsoft Edge
  • Mozilla Firefox
  • Google Chrome
  • ChromiumTo allow test automation with these browsers, Ranorex Studio uses special browser plug-ins.
Web testing overview

Ranorex Studio web testing and desktop testing are very similar. Ranorex Studio’s basic web testing process is as follows:

Ranorex Studio for Web App Testing | Nascenia

Note: Web sites can have highly complex structures. This is why extending the above process by manually tweaking the recorded test with additional code may sometimes be a good idea or even necessary.

Build a web test

In this blog, you’ll learn how to build a simple web test from start to finish, including recording the test, running it, and viewing the test run report.

Test definition

Our test will contain the following steps:

  • Start the browser and open the URL www.ranorex.com/web-testing-examples/
  • Check if the Ranorex Studio logo is displayed at the top.

Ranorex | Web Automation Tool

  • Click Open dialog.
  • Click OK to confirm and close the dialog window.

Ranorex Studio | Web Automation Tool

  • Close the browser.

Note: In automated tests, using the action Close application is usually more robust than closing an application “manually” by clicking the X in the application window. This is why this action is being used by the default web test project.

Create a new web test
  • We’ll create a new web test using the ⇢ RocketStart wizard.
  • On the Ranorex Studio Start Page, click New test solution using wizard… or go to File > New > Solution using wizard…
  • Click Web.
  • Follow the instructions of the wizard. Name your solution WebTest. When prompted, select Mozilla Firefox as your browser (make sure it’s installed on your computer) and specify www.ranorex.com/web-testing-examples/ as the URL.

Web Automation | Nascenia

  • Select Add browsers to whitelist when asked to select the recording behavior, as our test will only cover interactions with the browser previously selected. If we wanted to interact with desktop applications in our test, we would select ‘Do not use whitelisting’.
  • On the final screen, click Finish. Ranorex Studio will then open the prepared solution.

The prebuilt web test will look like this:

Ranorex | Web Automation Tool

  • Test suite view
    This is where your tests are built and controlled. The solution comes with a test suite project that contains a simple prebuilt test suite structure. It contains a test case with three recording modules: OpenBrowser, which starts the browser and navigates to the URL; Recording1, which is empty and ready for you to record test actions; and CloseBrowser, which closes the browser.
  • Recording module view
    You can record and manage the test actions in the Recording1 view of the recording module.
  • Empty actions table
    This is where your recorded actions appear.
Record the test

Make sure that Firefox is running and that the URL www.ranorex.com/web-testing-examples/ is opened before you start recording. Don’t record these steps. They are already included in the prebuilt project.

Once that’s done, you can start recording. In the recording module view, Click RECORD. Ranorex Studio is minimized. The control panel of the Recorder sits at the bottom right.

Validate the logo
  • In the control panel, click Validate.
  • Mouse over the Ranorex Studio logo and click it when the purple frame surrounds it as in the screenshot.
  • The Select element window opens. Check if the correct image has been selected and click Next to confirm.
  • The Validation settings open. We’re checking that the logo exists and is visible. Both of these attributes should already be selected. Click OK to confirm.
Open and confirm the dialog window

In the browser, click Open dialog. A simple dialog window opens.
Click OK to confirm and close the dialog.

Finally, in the Recorder control panel, click Stop to finish the recording.

Results

The control panel disappears and Ranorex Studio comes back into focus, showing the following: Action table with three recorded actions.
Repository with repository items referring to the three interacted UI elements during the recording process.

Run the test and review the report

Let’s run the test and review the test run report.

  • Close all instances of Firefox.
  • Click the tab WebTest.rxtst to switch to the test suite view and click RUN.
Report

The report will appear once the test run is over. In our case, it should look like this:

Browser Automation using Ranorex Studio

A detailed view of the test case shows that all actions were executed successfully.

Ranorex Studio | Nascenia

Contributor:Jumaina Rahman Neen

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.