Globalization Automation Library
Overview
The Globalization Automation Library (GAL) is a JavaScript library that can be used with WebDriver based e2e test frameworks (like Protractor) to identify internationalization issues.
The library can be used to detect the following most common types of globalization issues on a web pages:
- Hard-coded Strings
- Corrupt Characters
- Truncated Characters
- Overlapping elements
- Incorrect Date/Time formats
Demo
Usage with Protractor
Add the package to our project
npm i glob-auto-library -D
Import GAL in your spec file
var gal = require;
Configure parameters related to the page you're testing
var screenshotPath = '~/screens'; // Path to screenshot foldervar screenName = 'MyScreen'; // Screenshot namevar language = 'ja-JP'; // Language of the test pagevar checkXPath = '/html/body'; // Which element to testvar highlightElements = false; // Add a border around issues
The ‘screenshotPath’ variable is the path to where any screenshots taken by GAL will be saved. If the directory does not exist, it will be created automatically during execution. A separate directory for each language is also automatically created.
The ‘screenName’ variable is the name of the screenshot. You should not use any file extension when providing the name. Screenshots are automatically saved as PNG files.
The ‘language’ variable is used to specify the language of the application being tested. It should be an IETF language tag, i.e. ([language]-[country]).
The ‘checkXPath’ variable is used to specify which parent element the GAL will test. GAL will also test the children of this parent element. This should be a valid XPath to the element being tested.
The ‘highlightElement’ variable is used to highlight any issues on the page. When set to true, GAL will create a coloured border around each element that has a globalization issue. This may interfere with other automation tests as it changes the DOM. This variable only changes if elements are highlighted during execution and does not change how GAL detects, or reports issues. A different colour border is used for each type of defect GAL detects:
- Hard-coded Strings: Red
- Date/Time Issues: Green
- Overlapping: Orange
- Corrupted Characters: Yellow
- Truncated Text: Blue
Select the check you want to perform
var checks = ;checks;checks;checks;checks;checks;
You can select which type of GAL check you want to perform by adding it to a list. The above example shows all five GAL checks.
You can also assign optional arguments to each GAL check, such as specifying whitelisted strings (i.e. text you want GAL to ignore). Each check takes different arguments:
var hardcodeWhitelist = ;hardcodeWhitelist; // Ignore strings that containhardcodeWhitelist; // Windows and Mac var checks = ;checks;
DateTimeCheck – Takes a list of date/time formats to check. GAL will return true if the format is detected. By default the formats “MM/DD/YY” and “MM/DD/YYYY” are used. These formats will be void when an argument is passed.
var dateFormat = ;dateFormat; // Detects: 15 February, 2019dateFormat; // or 15 Feb, 2019 var checks = ;checks;
CorruptionCheck – Takes a list of whitelisted characters as argument.
var corruptionWhitelist = ;corruptionWhitelist; // Ignore this character var checks = ;checks;
ClippedCheck – Takes an element’s overflow value as argument. The overflow property specifies what happens if text overflows an element’s size. By default, GAL will ignore any element that has an overflow value of ‘visible’.
var checks = ;// Ignore any element that has an overflow property set to hiddenchecks;
Execute GAL
gal;
Example (using Protractor)
var gal = GalFunction; var screenshotPath = '~/screens';var screenName = 'MyScreen';var language = 'ja-JP';var checkXPath = '/html/body';var highlightElements = false; var hardcodeWhitelist = ;hardcodeWhitelist; var checks = ;checks;checks; ;
Results
GAL will save the screenshot (PNG) and test results (JSON) in the specified folder (screenshotPath/screenName).
The detected issues will be reported in following format: