PT GUI change – what and how

Last updated: August 31, 2013

Heads up for PractiTest clients
If you think you’d like to use our staging environment with the new GUI to get a feeling of the new system before the deployment, please don’t hesitate to contact us (email to support).


As many of you already know, we’re are going to be upgrading our GUI in the next couple of weeks (here’s why).

We’ve been wanting to do this project for a while now, but we started the concrete process only around April 2013. The idea was to improve a number of aspects in the User Interface, and also perform some technical changes and optimizations to our existing platform.

Here are some of interface issues we wanted to solve as part the GUI project:

  • Make better use of the available screen – most of our users use desktops, with large HD screens, when testing their software. We thought it was about time to make better use of the width of these wide screens and avoid the scroll if we can.
  • Flexible Text Areas – we have text areas in numerous of places (entities’ description, steps’ descriptions and more). Having them with a fixed height forced customers to use the scroll many times (either when scrolling the whole page, or scroll inside the text area itself). Now, these text areas expand and collapse dynamically as needed!
  • Replace the issue right pane with a preview pane. The “old” GUI used to have a right pane in the issues module that we didn’t like. It made the whole grid look awkward and usually it was used only to view the fields (and not to edit them). So we took it away, and added a popover when hovering those items, to see the fields. The popover was added to many other grids as well.
  • Better support for tablets. As much as we said that our users work with their desktops, we found that a number of users are starting to work with tablets during part of their testing operations. The new GUI is smart enough to resize itself all the way to “tablet size” and help you work seamlessly with these devices.
  • Reduce the amount of tabs we have in each entity. It came to our attention that we had too many tabs and that we could reduce this number by grouping part of the information into existing tabs. So now, for example, you will be able to add comments and attachments from the general tab.
  • And many other changes and improvements.

In addition to the externally perceived changes in the GUI, we also did some important improvements to the GUI infrastructure “behind the scenes”. One of them was the adoption of Twitter Bootstrap.

There were many reasons for selecting this framework, and the main ones are the following:

  • We like its clean and simple design, and we feel it helps us to set design boundaries.
  • It encourages us (as designers and developers) to use their standard, and we love coding standards 🙂
  • It is quite easy to implement, even in a large application such as PractiTest.
  • It has almost all the components we need, and we can probably get rid of some collected javascripts code.

  • It supports responsive design.

Here’s how the Tests’ grid looks now:

Test-Library-List

And so, after completing the design of the Graphical Interface, we started the development phase of the “new GUI project” on April. We did in parallel to all the rest of the on-going projects on a separate git branch.

We’re happy that up to now we’ve achieved the following accomplishments:

  • Changed ~ 27k lines of code (w/o white-space changes)
  • Made 752 commits
  • CSS lines of code dropped from ~8000 lines down to ~1000 lines in separate files- making it much more maintainable
  • We started to use only css.scss (instead of css), once again for easier code maintenance
  • We revised a lot of the javascript code, using namespaces, and refactoring old stuff
  • We dropped most of the images we used, using instead fortawesome (which will make everything load faster via sprites)

Completing this GUI project (which is now in advanced testing stages) was very intensive. We had to scope out many items we wanted todo (revise reports GUI, change to a standard grid, and more), that will be postpone for further releases in the coming weeks/months. But overall we are very happy and excited with the results!

Finally I’d like to thank the people who worked hard to make this project happen: Einav, Ortal, Boris, Joel, Nir & Stas