Blog

CI-friendly UI testing tools: what are your options?

UI testing automation is all the fuss due to an advent of new solutions promising to either excel or complete the functionality of “tried-and-true” tools of the past years. But how many of these automated testing tools (both new and old) are CI-friendly? Besides, how many of them are good at handling visual testing of websites and web apps? Let’s see what the market of UI automation testing has to offer in the way of CI support. But first, let’s answer the following question. Does solid CI support really matter for UI testing automation solutions? The short answer is yes — because continuous integration solutions are the first line of defense against bugs and errors. Here’s what a typical process looks like: one job creates a build, while another launches unit tests on it, allowing early spotting of most easy-to-find problems. If the build passes this stage successfully, testers can step in with their usual routine. They’ll take a quick look at the UI and, if everything is fine, proceed with functional testing. Now, this process seems to have a lot of room for improvement, doesn’t it? In particular, it would be super awesome to automate this quick UI sanity... More

A better way to do visual regression testing

The concept of visual regression testing isn’t new, but it’s been in the spotlight lately. There are two factors causing this growth of attention. First, the advent of rich UIs and responsive design has made it next to impossible to efficiently test web apps and websites without focusing on CSS and visual layout. Second, the ever-increasing competition among internet businesses forces companies to search for faster ways of testing their products. Can manual testing do the job? Given these trends, manual regression testing doesn’t seem like a viable option — it’s just too slow and inefficient. In fact, very few companies can afford to run visual regression tests manually after each UI revamp. Besides, humans aren’t that good at spotting visual differences in the first place due a thing called change blindness. Basically, if we don’t expect to see a minor change, we’re subconsciously bound to overlook it. Now, the problem here is that tweaking CSS is all about unexpected changes. Once you add a new class or CSS rule on one age, it will almost certainly override something on a completely different page. As a result, your users are more likely to spot the bug than your testers. Visual... More

Are TDD and automated UI testing compatible?

Image credit: SoapUI Test-driven development is awesome — unless you’re dealing with UI testing automation. Sure, test-driven UI development is technically possible, but TDD isn’t exactly ideal for situations requiring full functional tests, and full functional tests are indispensable to UI testing. For this reason, using TDD for UI border on overengineering. Choose this path, and you’ll end up working with mock objects or project object models (POM), adding new layers of complexity to your project. And in many cases, you won’t be able to tell if doing this will pay off. Besides, the way UI testing automation is done in real-life projects another problem. In real life, UIs — and web UIs in particular — undergo a lot of tweaking. No matter how well-specked your UI is, once you do a UI prototype and play around with it, changes are always coming. So how do people do UI testing automation in a TDD project? The short answer is they don’t. What they do instead is clearly separate concerns between the UI and the underlying logic with MVC, MVP, MVVM, or similar architectural patterns. Basically, the main idea here is to keep the UI logic minimal so it's mostly a... More

UI automation testing with Smart Locators

When it comes to UI test automation for web projects, element locators can become one hell of an issue. But is there anything you can do about it? The thing is, poorly-written locators are just a part of the problem. Writing good locators is, in fact, not that difficult. After all, good locators are merely a matter of either accessing IDs or building robust CSS or XPath selectors. And you can always get your developers to throw in a couple of extra IDs, right? Actually, there’s a whole bunch of other factors to consider. Once these factors come into play, UI test automation turns into a challenge for any QA specialist, no matter how experienced. Let’s look at a couple of scenarios to see what factors can affect the work of your QA team. Scenario 1. Throwing in extra IDs Let’s start with something we all can agree on. An ID-based locator is the best option for 100% of UI test automation cases. But in real life, developers will not put IDs on every element upfront, and any data-driven content (e.g. a table) will have repeated elements that cannot have unique IDs anyway. In cases like this, path-dependant locators will... More

CI for CSS regression testing with Screenster

Now that the CI integration plugin has been successfully rolled out, it is time to recall how it all began... Ready for a tale about defeating a horde of CSS regression testing challenges with the help of a Jenkins server and a visual QA automation tool? Why did we need CSS regression tests on our CI Our team has realized the necessity of automating the visual regression testing process last winter, when our other product AjaxSwing gained a significant number of new users, who were actively requesting improvements. A new version was released each week, sometimes even more often. AjaxSwing generates web UI for desktop applications so you can imagine how much visual UI verification we had to accomplish each time a build was ready. It just seemed never-ending. We had unit tests in our continuous integration environment running against every new build, but they didn’t help with verifying the visual aspects of the UI such as CSS, formatting and layouts. That’s when our QA team decided it is time to try our new automation testing tool Screenster in real action, despite it being in its early Beta at the time. We upgraded our CI environment to the following state:... More

Integration with CI tools — a new plugin for Screenster

Good news! Now you can easily run Screenster visual tests in your continuous integration environment. Just visit the Downloads page on our Portal, get the CI plugin and follow our guidelines to install it and synchronize with your favorite CI tool. We have been receiving dozens of questions from our customers and guests lately about a way to closely integrate Screenster with CI platform to run CSS and web UI regression tests. This necessity is absolutely clear: it is often critically important to run quick visual tests against your web application with the help of an automation testing tool after each new fix or feature deployment. Our users have a variety of CI tools such as Jenkins, Bamboo, TeamCity, Travis and others so we designed a universal solution that works with all of them. It took a lot of efforts and hot discussions, but finally the plugin is here for you! Enjoy running visual tests on your CI server and feel free to leave a comment here about your experience! [raw] Want to try Screenster on the cloud? Try Online [/raw]

Automation testing of Gmail UI

Are you overloaded with web UI regression testing and finding that manual visual testing is a pain? You definitely need some automation testing tool and guess what: we have just the thing for you! Skeptical about tools abilities to handle complex sites that use not just plain HTML, Web 1.0-styled pages? You should be, because most of them suck at it :-)  Let me demonstrate you how I built UI regression testing automation process for Gmail inbox (let us imagine we are developing new Google Mail UI) in 15 minutes. My objective was to get unwanted changes highlighted as bugs while leaving out any types of expected behavior. When a new email is received, the correct behavior for an email UI is: New mail gets added to the inbox Sender’s ID or signature are displayed next to the email Date and time is displayed for sent and received mail Alert icons (like the “!” sign) displayed on tabs where new items appear Such UI changes are expected and an automation testing tool should identify them correctly. But since a human-like AI still remains far from being officially released anywhere, we could be content with a tool that ensures that expected changes... More

Here’s how you can edit automated UI tests with Extend

Last week I had to record a bunch of tests for a site that required a user to be logged in. Which is why I would like to talk about one Screenster’s feature which was most helpful for me during all that time. So, let me introduce the Feature of the Week in our blog: the ‘Extend’ command! Each tester has to employ a few different test environments from time to time. CSS regression testing process often includes checking several product versions at once. Naturally, one does not want to re-write tests anew in order to run them on another server and/or with different user credentials. Why do that if they just require a couple of actions to be changed: the starting URL and the login + password combination? In such a case you can edit the test steps but there is a faster way with Screenster - click on the ‘+’ button at the right side of this test on the Project View page, and the ‘Extend Test’ popup menu opens. How does it make UI regression testing simpler? With this command we are actually adding a new step which launches a base scenario with new parameters. Now it... More

UI regression testing challenges solved

Quality control is an important part of product development process. Some good amount of time and resources should be invested into it. New UI functionality must be covered by tests as soon as it is ready. And it is not enough to verify it once: each time an important changes are introduced, the UI regression testing phase must follow. Manual UI regression testing tends to take more and more of the project time. A common solution for a big project is to automate this process. However, the UI regression testing automation, with all the benefits it brings, comes at a price. Firstly, you need to invest into the automation in order to reap benefits later. And it could take a long time at the initial stage. The fact is, you need to spend resources to set up a framework such as Selenium, to build the tests (which should also be tested themselves) and to run them properly and return useful data. These resources could be spent to speed up manual visual regression testing instead. Secondly, the completed automated visual regression tests should be supported afterwards. Their coverage may become insufficient as the product grows and evolves. Sometimes tests should be amended... More

QA automation for Ajax UI tools: testing AjaxSwing with Screenster

AjaxSwing automatically converts Java desktop applications to web applications. It was the first product built by our company and is still the only platform capable of automatically running Java Swing apps on mobile devices running iOS and Android. For the first 10 years (10 YEARS PEOPLE!) we were struggling with changes to AjaxSwing because we could never truly understand the effects of each code change. We wanted to automate the UI regression testing with Selenium and tried a few other alternatives, but since none were testing the page visually these tools failed to detect broken CSS and HTML formatting. Touching anything in Java or CSS code was like walking on a minefield with delayed explosions but real pain. Screenster, a visual regression testing tool gets into action! We have now been running pain-free with Screenster as part of our CI. We use it for visual testing, CSS testing and most of the functional testing. Given that Screenster ensures pixel-perfect regression testing, our developers are now fearless. We've built over 50 tests that go over common scenarios, and with TDD we keep adding new tests every week. Every time our CI catches visual differences of a few pixels, cropped borders or... More
WordPress Image Lightbox Plugin