Fall 2019 releases

The latest releases of Ranorex Webtesit have introduced Python support. In this blog article you will see how you can leverage the world’s most flexible programming language in your UI tests without the hassle. You will witness how Ranorex Webtestit makes your Python test project setup even easier with automatic driver download functionality. Ranorex Webtestit is the best place for snake case with built-in best practices such as Page Object pattern. Problems generating reports for Python tests are now a thing of the past, Ranorex Webtestit creates report folders that include results, screenshots, XML file, and more. Let’s have a look at this in practice then.

Python is a programming language that is primarily used in server-side web development, software prototyping, and development, as well as in handling big data and performing complex mathematical operations. However, Python can also be used in test automation.

In fact, many developers nowadays favor Python over Java or other languages when it comes to testing. The rationale behind this is that Python tests are more readable, they run faster, and above all, Python is simpler and easier to learn, making it perfect for quick test automation tasks.
In addition to these benefits, Python offers a range of built-in testing frameworks and it can be integrated with numerous testing tools.

There are many testing frameworks available for Python, including unittest which is a module in Python’s standard library that contains plenty of resources to support test automation.

But unittest means it’s used for unit tests. What about web UI testing?

It is true that the web user interface (UI) testing is completely different from unit testing. Unit tests are aimed at testing small portions of your code, such as individual classes or methods, as opposed to UI tests where you test the whole system, app, or page. Unit tests can’t verify that the web page is displayed correctly to your user, that there are no broken icons, missing buttons or mislabeled fields on the page. To test these things, we need UI tests.

So, how do we test UI with Python then?

There are many frameworks, tools, and libraries that support UI test automation with Python, such as pytest, nose, PyQt, and more. A lot of developers use Selenium Webdriver which supports testing with Python among other languages.

Despite its name, the unittest framework can also be used for UI testing, if configured properly. But here comes the tricky part. Setting up the testing environment is never easy, especially for Python UI testing, even if you use a great framework such as unittest.

You’re likely to lose a lot of time, patience, and energy trying to set up web UI tests, write the code, deal with all the flakiness, and maintain the test cases once they’re set up. You’ll probably end up frustrated more than once wondering why your tests don’t work even after you configured everything as you should.

But, hey, where are you going? No, no. Don’t run away. We didn’t mean to scare you. It’s not that bad. Actually, there is a solution if you’re a Python aficionado and want to write robust web UI tests.

How to test UI with Python (this time for real)?

You can easily create Python UI tests with Ranorex Webtestit, a complete toolset for test automation supporting three different languages and frameworks, including Python and unittest.

How you may wonder? Well, Ranorex Webtestit takes care of all the tedious framework and code setup, so you don’t have to lift a finger. Okay, that’s not exactly the truth. You need to lift your finger to click a few buttons here and there, to rename methods, or to drag and drop elements into the code to create actions from a drop-down menu.

Out-of-The-Box Web Test Automation

for Selenium or Protractor

How does it work?

We suppose that you already have Python installed on your computer. If not, you need to download and install Python 3.6+, as well as pip.

After you’ve taken care of Python, download and install Ranorex Webtestit. Next, open Ranorex Webtestit and log in with your credentials. You can choose to open a sample project that you can run instantly.

However, instead of that, we’d like to show you how to create a project and write a test from scratch to better understand the whole process. We’ll use the Ranorex Webtestit Demoshop page for this demonstration.

Click the ‘New Project’ link in the Start menu to open a dialog.

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.

In addition to setting up the unittest framework, Ranorex Webtestit also takes care of all the important requirements for writing and executing tests in the unittest framework, such as putting tests into classes as methods, adding unittest hooks (setUp() and tearDown()), and using special assertion methods in the unittest.TestCase class instead of the built-in assert statement.

Creating Page Objects for our test

To test the web GUI with Python, we first need to find web page elements using selectors. Ranorex Webtestit uses the recommended Page Object pattern to organize selectors. Creating Page Objects for the important components on a web page, such as headers, menus or content regions, helps you 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 create two Page Objects, one for the header component on the Demoshop’s home page and one for the “Super Cool Goo” detail page.

Click the ‘Create New Page Object file’ button or right-click the ‘pageobjects’ folder and then choose ‘New’ > ‘Page Object file.’

Creating Page Object classes that have ‘po’ as a suffix is a recommended practice. In Python, we shall also 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 and for the “Super Cool Goo” detail page detail_page_po.py.

Adding Elements to the Page Object File

Once we’ve created the 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 developers.

Instead, we’re going to use a free Chrome extension called Ranorex Selocity that autogenerates robust 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 the 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.
  5. Make sure that header_po Page Object is selected and active in Ranorex Webtestit, then in Ranorex Selocity, click the ‘Send selector to Ranorex Webtestit’ button next to the selector’s name.

The chosen selector will appear automatically in the ‘Elements’ tab with a generic _search_for_ name. 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 approach, we’ll navigate to the “Super Cool Goo” detail page and 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 that will display a message that the item has been added to the cart after clicking the ‘Add to cart’ button. We’ll add this one manually.

  1. To do that, click the ‘+’ button in the ‘Elements’ tab in Ranorex Webtestit 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

In the end, we’ll have 4 elements in detail_page_po file, as shown in the image below.

Creating Page Object actions

Now that we’ve added all elements to our Page Objects, we’re going to create some actions to work on them.
Ranorex Webtestit allows you to simply drag and drop an added element from the ‘Elements’ tab into the Page Object code to create a method reflecting the action.

Drag _search_input into the header_po code. After you released the mouse, a 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 create a snippet that does just that.

Name the function insert_search_text so your code looks like this:

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

Next, add all elements from the “Super Cool Goo” Page Object to the detail_page_po code and choose the appropriate action for each, e.g. Do > Click on element for button, 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:

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 a ‘camelCase’ without underscores or spaces.

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

We’ll add two tests to the tc1.py file. The first one will open Demoshop page, type “Super” into the search field to get the Super Cool Goo product, and then verify the product name and price. The second test will open the Super Cool Goo detail page, click the button to add the product to the cart and check the confirmation message, the number of items in the cart and the total amount.

In the end, your test should look like this:

Executing the test

To execute our test, we need to create an endpoint, which is a set of configurations about the runtime environment of your 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.

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.

Conclusion

As we’ve demonstrated in this article, the UI testing with Python doesn’t have to be a frustrating experience if you have all things set up in advance thanks to Ranorex Webtestit which is available on a free, full-featured 30-day trial. Once the hardest part is done, you can focus on what matters the most — the actual testing to make sure that your web pages work flawlessly.

You might also like these articles