Step by Step Guide: How to Create Your First Ranorex Webtestit Project


#1

After downloading and installing Ranorex Webtestit, it is time to create your first project to start testing your web pages.

In this guide, you will learn how to:

1. Create a new project in Ranorex Webtestit
2. Set up the framework
3. Create the Page Object files
4. Add web elements to the Page Object files
5. Create Page Object actions
6. Write the test
7. Execute the test
8. View test reports

1. Create a new project in Ranorex Webtestit

  1. Open Ranorex Webtestit and log in with your credentials (email address and password).
  2. Click the ‘New Project’ link in the Start menu. The ‘Create new project’ dialog will open.
  3. In the dialog, choose the name for your project.
  4. Select a location where you want to save your project. You can keep a default location or choose your own.
  5. Pick a programming language (Java, TypeScript or Python)*
  6. Finally, click the ‘Save’ button to create your project.

*Step 5 requires that you already have basic programming knowledge in the supported languages, as well as other requirements, such as Java JDK installed for Java projects, Node.js and npm setup for TypeScript projects, and Python 3.6+ installed for Python projects.

2. Set up the framework

In the next step, Ranorex Webtestit will set up the automation framework and install all the required dependencies for you. This step will depend on the programming language you’ve chosen.
For TypeScript, Ranorex Webtestit will generate Protractor, for Java TestNg, and for Python the unittest framework.

Here is the overview of the Ranorex Webtestit user interface with all tabs.

3. Create the Page Object files

Ranorex Webtestit uses the Page Object pattern to organize selectors for the important components on a web page, such as headers, menus or content regions.

So, the first step in your project would be to create a Page Object for the components of your web page, which can be done with the help of Ranorex Selocity extension.

  1. Add Ranorex Selocity to Google Chrome
  2. Open the webpage you want to test in Chrome
  3. Press F12 to open Google Chrome Developer Tools
  4. Select ‘Ranorex Selocity’ from the ‘Elements’ tab
  5. Click the ‘Connect’ button to establish a link between Ranorex Webtestit and Ranorex Selocity
  6. Click the ‘Create new Page Object’ button in Ranorex Selocity tab
  7. Draw a rectangle in the browser window to take a screenshot representing a new Page Object
  8. Click the ‘Continue’ button
  9. Enter the Page Object name. Creating Page Object classes which have ‘Po’ as a suffix is a recommended practice, e.g. HeaderPo in Java/TypeScript or header_po in Python
  10. Click the ‘Send’ button to create a Page Object file in Ranorex Webtestit.

After we created our Page Objects, it’s time to add some web elements to them.

4. Add web elements to the Page Object files

We’ll use Ranorex Selocity for this task too.

  1. Make sure that the Page Object we created and sent to Ranorex Webtestit is open and Ranorex Selocity and Ranorex Webtestit are connected.

  2. Right-click the element you want to send to the Page Object file and choose ‘Inspect’ from the drop-down menu

  3. Click the ‘Send selector to Ranorex Webtestit’ button next to the selector’s name. The selector for the chosen page element will appear in the ‘Elements’ section in Ranorex Webtestit.

    send%20selectors

The added elements will have auto-generated names, conforming to your language’s naming conventions, but you can always rename them.

5. Create Page Object actions

After you’ve added all the elements you need for your test, it’s time to create some actions to work on them. In Ranorex Webtestit, you can simply drag and drop the imported element into the Page Object code to generate methods by selecting an action from a drop-down menu.
Here’s how you do it:

You’ll find a detailed guide on how to create Page Object actions with the code examples for this scenario here.

Also, here you can view the list of all Page Object actions available in Ranorex Webtestit.

6. Write the test

After creating the Page Object and adding elements to it, you can start writing your test. Right-click the ‘tests’ folder and select ‘New test file.’

The new test file will be created with a default name and an empty stub with the comments instructing you how to write your tests using AAA (Arrange, Act, Assert) pattern to help you keep your tests well-structured, clean, and readable.

To see how the test scenario should look like, you can check Java, TypeScript and Python code examples here.

7. Execute the test

Once the test has been written, you’re all set. But before you can run your test, you need to add an endpoint. In Ranorex Webtestit you can define local, remote or custom endpoints to run your tests by clicking the ‘Add endpoint’ button in the ‘Execution’ tab.

addEndpoint

After saving an endpoint, you can proceed and run either a single test file or all test files in your project.

8. View the test report

Upon completion of the test execution, Ranorex Webtestit will create a new folder ‘reports’ in your project tree. The report for your test will be opened automatically in the ‘Report’ tab, showing you the results of your test run. If you followed all the steps correctly, your test cases should execute without errors.

If the test failed, you’ll be able to see the details why the failure happened, along with the screenshots of failed test elements.

You can also create a bug ticket, resolve issues, and reopen tickets directly from your test report thanks to Ranorex Webtestit integration with your JIRA account.

Ranorex Webtestit offers plenty of other things like the ability to customize predefined tests or to integrate with other popular testing solutions, such as TestRail, Sauce Labs, Applitools, Jenkins, etc.

You will find a lot of useful articles here on Discourse, explaining all the features you can find and use in Ranorex Webtestit to improve your workflow.