How to test Internationalization with UI automation
// Introduction
I was recently working on a project for a client that is a leading global logistics company. Because the client handles business all around the world, they needed to have a web application that is capable of rendering its contents in multiple languages. This process is called Internationalization, aka “i18n”.
This immediately made me wonder: Just how will I go about testing such a feature when I don’t actually know any of the other languages that they are planning to support? Also, how will I go about implementing test automation that checks these languages using code?
Luckily, I found some solutions that helped me in this situation and can also help you. The following article will discuss approaches to internationalization testing in both manual and automated ways.
// Definition of internationalization
First, we need to know what internationalization is. Some may think of this as being the same as localization, aka “i10n”. While they are closely tied together, they are not quite the same thing.
Here is a quote from World Wide Web Consortium (aka W3C, the organization that develops “Web Standards”):
Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language. [1]
Whereas localization is:
Localization refers to the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a locale). [1]
So, in a nutshell, internationalization allows a web application to render its contents in foreign languages (phase 1) to then support localization at a later time (phase 2). [2]
// Scope of testing
Now that we know what internationalization is, let’s focus our attention on testing whether the target application can render its contents in a set of target foreign languages.
// Difficulties in testing
Testers are likely to face some challenges in testing internationalization, especially if they simply don’t know the target languages.
In manual testing, testers can trigger the target application to render in different languages, copy and paste the foreign text to translation services like Google Translate, and continue to test other languages. This approach requires testers to repeat these steps manually for many pages and languages, which will be a very repetitive, time-consuming, and tedious task.
Attempting to implement automated tests can also result in some challenges, because you will have to make code that understands exactly what languages it is scanning for the purpose of validation. So how do we tackle this puzzle?
// Target demo application
For demonstration purposes, I chose the non-profit organization Rotary International which brings together business and professional leaders to provide humanitarian services. [7] This was chosen because it was publicly available, and to help promote public awareness of the organization with its mission to help relieve people around the world.
// Automation
The following solution will utilize three major tools: Franc, Jasmine-Data-Provider, and Webdriver.io.
Ingredients
Franc [3] is a language detection tool that lets your code read text as input and outputs the detected language of this text in ISO code format. It reads three consecutive letters or words (aka a trigram in linguistic terms) to produce accurate results.
Jasmine-Data-Provider [4] is a data feeder for the Jasmine “Behavior-Driven Javascript” testing framework [5] which will be used with Webdriver.io. This lets you repeat the same testing logic but with different test datasets.
Webdriver.io [6] is a testing framework for Node.js. This lets you run Webdriver for UI automation via JavaScript. It’s a handy tool that gracefully handles the asynchronous nature of JavaScript applications.
Solution analysis
As a friendly reminder, the goal of testing internationalization is to check if the application correctly displays its contents in target languages.
First, Webdriver.io will run against the target application to scan text from the target page for validation. Second, Franc will read the text and output the detected foreign language. Third, the Jasmine assertion library will match the actual results (detected language) against the expected one. Lastly, the test will repeat this three-step process against the entire provided test dataset per Jasmine-Data-Provider, which contains a total of eight (8) languages for this demo: German, English, Spanish, French, Italian, Japanese, Korean, Portuguese.
The proposed solution correctly identifies target languages and validates the results for all eight (8) languages in around 10 seconds. This is significantly faster than manual testing, which would require testers to load the page, identify the language, and repeat the same process for each language.
This solution, however, comes with small limitation from using Franc. The out-of-the-box usage of this tool works great for identifying long strings of text, but short words or letters can be more challenging, especially when Franc is dealing with similar language characters. e.g. Portuguese vs Spanish, Japanese (Kanji) vs Traditional Chinese. This can be avoided by fine-tuning the Franc options, but will likely to require some time for trial and error.
// Conclusion
Internationalization is a must-have in today’s economy where the internet can bring customers from all around the world. Testing such features will be challenging given the limitation in language skillsets of test resources. Thankfully, a UI test automation solution can improve test accuracy and efficiency with the combination of Franc, Jasmine-Data-Provider, and Webdriver.io.
// Notes & References
The following Github link has all the code used in this article and more: i18nAutomation [8]. The repo has three separate folders for you to play around with (i.e. Franc, Jasmine-Data-Provider, and the Webdriver.io that combines all three.) The Readme file has instructions on how to install this code and execute it. Tests may fail later in time if the target application updates its UI.
[1] https://www.w3.org/International/questions/qa-i18n
[2] https://www.softwaretestinghelp.com/localization-and-internationalization-testing/
[3] https://github.com/wooorm/franc
[4] https://github.com/MortalFlesh/jasmine-data-provider
