Getting started with Python and Ranorex Webtestit


#1

Ranorex Webtestit is well-known as a test automation toolset for testing with Protractor and Selenium supporting Java and TypeScript programming languages.
Well, this is no longer the case. Say hello to the newest member of the Ranorex Webtestit family - Python. :wink:

Ranorex Webtestit utilizes the unittest framework for testing with Python. It is a module in Python’s standard library that contains plenty of tools to support test automation with Python. Although mainly intended for unit testing, the unittest framework can be also used for web GUI testing, as we’ll explain in this article. The most important thing is that you don’t have to worry about the whole test and framework setup because Ranorex Webtestit does that for you, just like it generates TestNg and Protractor environments for Java and TypeScript projects.

Install Python

Windows:

  1. Navigate to https://www.python.org/ and download the latest Python version

  2. Install Python and make sure to add Python to PATH
    image

  3. Check the installation by entering python in a command-line window.

  4. (Re-)Start Webtestit

macOS

  1. Navigate to https://www.python.org/ and download the latest Python version for macOS

  2. Install Python and make sure to add Python to PATH

  3. Check the installation by entering python in a terminal

  4. (Re-)Start Webtestit

Linux

  1. Open up the terminal

  2. Type in the following commands:
    sudo apt update
    sudo apt install software-properties-common
    sudo add-apt-repository ppa:deadsnakes/ppa
    sudo apt update
    sudo apt install python3.7

  3. Check the installation by entering python 3.7 in a terminal window.

  4. Make sure to install the Pip package management system by typing in the following command into the terminal:
    sudo apt install python3-pip

  5. (Re-)Start Webtestit

Opening a new project

The first step after opening Ranorex Webtestit would be to create a new project.
From the dialog, set a project name and choose Python and unittest for the language and framework. Click the ‘Save’ button to save the project and allow Ranorex Webtestit to prepare the working environment for you.

Creating Page Objects

To test the web GUI with Python, we first need to find web page elements using selectors. Ranorex Webtestit uses recommended Page Object pattern to organize selectors. By creating Page Objects for the important components on a web page, such as headers, menus or content regions, you can handle web elements for each component much easier, thus making your test more maintainable.

So, after creating your Python project in Ranorex Webtestit, the next step would be to create a Page Object.
We’ll use our demoshop page to show you how to identify and obtain Page Objects.
Here, you can see that we can create at least three Page Objects from this page, including header, items overview, and shopping cart.

For now, we’ll create a Page Object for the header component. Click create ‘New Page Object file’ button or right-click the ‘pageobjects’ folder and then choose ‘New > Page Object file.’

Creating Page Object classes which have ‘Po’ as a suffix is a good practice. Since we use Python, we suggest that you use the snake case, i.e. place an underscore and no spaces between characters when naming page objects.
So, the Page Object for the Header component should be named header_po.py.

We’ll use the same strategy when creating Page Objects for other components of the demoshop page, which means they would be named items_overview_po.py, shopping_cart_po.py, etc.
However, for this demonstration, we won’t create these. We need another Page Object for the “Super Cool Goo” detail page so we’ll create it and name it detail_page_po.py.

Adding elements to the Page Object file

Once we’ve created Page Objects, it’s time to add some elements to them. We can do that manually with the help of CSS, XPath, or link-text selectors. However, writing these selectors is complex and difficult to master even for the most experienced testers.
Instead, we’re going to use free Chrome extension called Ranorex Selocity that autogenerates complex selectors and sends them directly to Ranorex Webtestit with a single click.

  1. First, you need to download Ranorex Selocity from the Chrome Web Store.
  2. After installation, navigate to demoshop page in Google Chrome. Locate the search input in the header area and right-click it. Select ‘Inspect’ from the context menu.
  3. Open the Ranorex Selocity tab in the Elements section. If you don’t see it, click the arrow in the Section’s menu or expand the DevTools window.
  4. Click the ‘Connect’ button to connect Ranorex Selocity to Ranorex Webtestit (make sure that header_po Page Object is active in Ranorex Webtestit).
  5. Click the ‘Send selector to Ranorex Webtestit’ button next to the selector’s name.

send%20selectors

The chosen selector will appear automatically in the ‘Elements’ tab with a generic _search_for_ name that isn’t too descriptive. We suggest you rename the element to _search_input using the snake case with a leading underscore which is the standard when naming variables in Python.

Using Ranorex Selocity, we’ll add two more elements for subtotal in header_po and name them cart_amount and cart_count.

After that, using the same method, we’ll add the following elements to the second Page Object file detail_page_po: _product_name, _product_price and _add_to_cart_button.

For this test with Python, we need one more element for the ‘Remove’ button in the cart overlay that we’ll add manually in the detail_page_po file.

  1. To do that, click the + button in the ‘Elements’ tab to create a new element.
  2. Name it _cart_confirmation_message
  3. In the Selector field, add the following: [role='alert']
  4. From the Strategy dropdown, select css
  5. Click the ‘Close’ button

Creating Page Object actions

Now that we’ve added all elements to our Page Objects, we’re going to initiate some actions on them.
To do that, simply drag and drop an element from the ‘Elements’ tab into the Page Object code. Ranorex Webtestit will create a method reflecting the action.
We’ll first drag _search_input into the header_po code. After you released the mouse, the drop-down menu would appear, allowing you to select the action you want the method to be based on. For this element, choose Do > Type into element from the pop-up menu to send the text.

Name the function insert_search_text so your code looks like this:

def insert_search_text(self, text):
    self.wait.until(EC.visibility_of_element_located(self.search_input)).send_keys(text)
    
    return self

Repeat the drag and drop method for the remaining elements within header_po but this time choose Get > Element's text from the pop-up menu. Your code should look like this:

def get_cart_amount(self):
    cart_count_count = self.wait.until(EC.visibility_of_element_located(self._cart_count)).text
               
    return cart_count_count
        
def get_cart_count(self):
    cart_count_text = self.wait.until(EC.visibility_of_element_located(self._cart_count)).text
        
    return cart_count_text

In the same way, add all elements to detail_page_po code and choose appropriate action for each, e.g. Do > Click on element for buttons, Get > Element's text for textual elements, etc.
You can view the list of all actions on elements available in Ranorex Webtestit here.

Eventually, the methods in your detail_page_po should look like this:

def get_product_name(self):
    product_name_text = self.wait.until(EC.visibility_of_element_located(self._product_name)).text
            
    return product_name_text
        
        
def get_product_price(self):
    product_price_text = self.wait.until(EC.visibility_of_element_located(self._product_price)).text
            
    return product_price_text
        
def add_product_to_cart(self):
    self.wait.until(EC.visibility_of_element_located(self._add_to_cart_button)).click()
            
    return self
        
        
def get_confirmation_message(self):
    cart_confirmation_message_text = self.wait.until(EC.visibility_of_element_located(self._cart_confirmation_message)).text
            
    return cart_confirmation_message_text

Keep in mind that you can continue to edit all the actions freely or drag more elements into the newly generated methods.

Writing the test

After adding all elements and initiating actions on them, it’s time to create our test. Right-click the ‘tests’ folder in your project tree and select ‘New > Test file’. Name the file tc1.py. As you can see, we didn’t use the snake case for the test file name, because the test file requires camelCase without underscores or spaces.
The new test file will be generated with an empty stub instructing you how to write your tests using AAA (Arrange, Act, Assert) pattern to help you keep your tests well-structured, clean, and readable.

Ranorex Webtestit also takes care of some important requirements that the unittest framework has for writing and executing tests, such as putting tests into classes as methods and using special assertion methods in the unittest.TestCase class instead of the built-in assert statement.
In the end, your test should look like this:

def test_search_for_item(self):

    driver = self.get_driver()
    """
    1. Arrange
    Create a new Page Object instance by right-clicking into
    the code editor and selecting "Instantiate Page Object"
    at the bottom of the context menu
    """
    header = header_po(driver)
    detail = detail_page_po(driver)

    header.open("https://demoshop.webtestit.com")
    """
    2. Act
    Call an existing action from your Page Object instance
    """
    header.insert_search_text("Super")
    """
    3. Assert
    Use unittest assertions to verify results.
    e.g.:
    self.assertEqual(title, "Test Automation for GUI Testing | Ranorex")
    """
    self.assertEqual(detail.get_product_name(), "Super Cool Goo")
    self.assertEqual(detail.get_product_price(), "€1,500.00")


def test_add_item_to_cart(self):

    driver = self.get_driver()

    header = header_po(driver)
    detail = detail_page_po(driver)
    detail.open("https://demoshop.webtestit.com/product/super-cool-goo/")

    detail.add_product_to_cart()
        
    self.assertTrue(detail.get_confirmation_message in "“Super Cool Goo” has been added to your cart")
    self.assertEqual(header.get_cart_count(), "1 item")
    self.assertEqual(header.get_cart_ammount(), "€1,500.00")

Executing the test

To execute our test, we need to create an endpoint. An endpoint is a set of configurations about the runtime environment of our test, such as browsers, operating systems, and devices to use, and much more. In Ranorex Webtestit you can define local, remote or custom endpoints to run your tests.
To create an endpoint, click the ‘Add endpoint’ button in the ‘Execution’ tab. After adding all the required parameters, click the ‘Save endpoint’ button. Then, click either the ‘Run current test file’ or ‘Run all test files’ button to execute your tests.

addEndpoint

Once the test execution is finished, Ranorex Webtestit will create a new folder ‘reports’ in your project. The report for your test will be opened automatically in the ‘Report’ tab, showing you the results of your test run. You can also open reports by clicking XML files in the ‘reports’ folder. If you followed all the steps in this article, your test cases should execute without errors. However, it may happen that your tests fail. In that case, Ranorex Webtestit offers you the ability to create bug tickets and resolve issues right from your test report thanks to the integration with Jira.

You will find a lot of useful articles here on Discourse, explaining all the useful features you can find in Ranorex Webtestit.
If you have any questions, suggestions, or feature requests, feel free to join the discussion.

Happy testing!