How to Automate Localization Testing using Cypress

The internet has removed the barriers and has connected citizenry across different locations of the world. Today the universe has turn an open market, as ware can be sold anywhere in the world, whether it is retail ware,, or even service.

While every country speaks different languages, they postdate different timezones, experience different currency to trade, and their sound and financial revenue laws are different. So when the organization wants to exhibit its presence globally, it needs to adjust to the localization to fit in with the local audience mindset.

What is Localization?

Localization is adapting the software or web covering specific to a region or land is called, and the technique to verify this adaptability is known as. For example, if you sail togoogle.comin a France-based fix, you will see the default lyric is Gallic.

Similarly, if you see google and search from Germany, it loads in German/Deutsch speech. In a real-world scenario, many different localization settings are required, such as currency, language, products, tax calculation, etc.

The localization feature involve identifying the user location; the user & # 8217; s emplacement can be identified using two method.

1. GPS-based Geo Location System
2. IP-based Geo Location System

GPS-based Geo location system works based on the GPS coordinates. The web application read the GPS coordinates and sets the area based on coordinates. The GPS-based Geo Location can be mocked up to some extent using automation.

works based on the connected device & # 8217; IP. IP-based Geolocation is not very accurate, but it is good enough for the localization of any coating. Most of the site works based on IP-based geolocation.

How to Automate Localization Testing using Cypress?

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

is the nigh popular, using Cypress you can do automated localization testing. The mechanization of localisation examination should be make base on the architecture designing of the coating.

For instance,

• If your application is designed to read the Localization data from GPS coordinate, then you require toMock the GPS organize data
• If your covering requires exclusively language-specific scope, then you can change exclusivelybrowser language settingsutilize automation dictation
• If your covering requires reading theIP-based locationparticular, then you need to use the VPN software or cloud-based testing providers such asBrowserStack. BrowserStack provides the feature to place a part or state apply configuration settings.

Try BrowserStack for Free

Let & # 8217; s see each option in item in the sections below.

Cypress Localization Testing using GPS-based Geolocation

You can bemock the GPS coordinates usingcy.stub()command in Cypress.cy.stub()requires any place or country & # 8217; s parallel and longitude coordinates.

Create a simple Cypress examgeo.test.jsto mock the Geo Location utilise GPS coordinates

//geo.test.js function mockLocation (parallel, longitude) {regress {onBeforeLoad (win) {cy.stub (win.navigator.geolocation, `` getCurrentPosition '') .callsFake ((cb, err) = & gt; {if (latitude & amp; & amp; longitude) {homecoming cb ({coords: {parallel, longitude}});} throw err ({codification: 1});});}};} describe ('Mock Geo Location ', () = & gt; {it ('Geo Location Test ', () = & gt; {cy.visit (`` https: //whatmylocation.com/ '', mockLocation (51.1642,10.4541));});})

The above code creates amockLocationfunction, which accepts the latitude and longitude, and thecy.stub()set the geo location to the tell latitude and longitude. If you desire to set the GPS coordinate of Germany, you can pass the 51.1642, 10.4541 as the coordinate it sets the Geolocation to Germany.

The disadvantage of the above approach is that most of the websites are not plan to use GPS-based coordinates, so even if you bemock the GPS-based coordinate, the location scope don ’ t trigger, or the website continues to show your real languages.

For exemplar, by using the above approaching, if you navigate to google.com, the site continues to show your original settings, such as language, up-to-dateness, etc., rather than mocked settings.

Localization Testing by alter the Browser Language

Browser language settings have a high impact on the content settings. Many websites are design to show the content found on the language settings.

For example, if you set the lyric to Deutsch, then the website get showing the content in the Deutsch language. Here, not simply language changes but also the content particular to the Deutsche part will be shown. But as mentioned previously, this count on the website plan.

Cypress allows you to set the browser language, so by setting the browser lyric, you can perform automation testing of localization.

How to set the Browser Language in Cypress to Localization Testing

Object.defineProperty ()should be used inside theonBeforeLoad ()function of Cypress like below to set the browser languages.

describe ('Mock Language ', () = & gt; {it ('Localization Language ', () = & gt; {cy.visit ('https: //www.amazon.com ', {onBeforeLoad (win) {Object.defineProperty (win.navigator, 'language ', {value: 'de-DE '}); Object.defineProperty (win.navigator, 'languages ', {value: ['de ']}); Object.defineProperty (win.navigator, 'accept_languages ', {value: ['de ']});}, heading: {'Accept-Language ': 'de ',},});});})

In the above line of code, the speech is being set as German-Germany using thelanguage codede-DE. So navigating toamazon.comnot only changes the words to German but also expose the content/product specific to that part i.e. Germany.

IP Based Geolocation for Localization Testing using Cypress

IP Based Geolocation approach is the most efficient way, but mock IP without a VPN is very unmanageable. And to use the VPN you need to buy a paid subscription. There are many VPN package such as Open VPN, Hide Me, NordVPN, etc. which help to graze websites from different locations.

By using the third-party VPN package you can run your Cypress Automated Localization tests topically, as VPN software lead at the Operating system level, your Cypress browser also can apply VPN-based IPs.

Let & # 8217; s consider you have connect to a Germany-based VPN then you can navigate to the website and test whether the title is exhibit in the Deutsch language.

describe ('Localization Testing ', () = & gt; {it ('Localization Demo ', () = & gt; {cy.visit ('https: //store.google.com/ '); cy.title () .should ('equal ', 'Google Store für Geräte und Zubehör von Google ');});})

Executing the Test using VPN results like below.

The above image shows that though the test is executed from India, the site has set the nonpayment lyric to Deutsch, and the up-to-dateness has alter to Euro as we are connected to VPN to the Germany location.

How to perform Automated Localization Testing without VPN?

BrowserStack provides an characteristic, which aid to run the tests on different geo-locations.

• Install Browserstack CLI

npm install -g browserstack-cypress-cli

• Create browserstack.json file

browserstack-cypress init

• Add the authentication
  • Login to BrowserStack
  • Navigate toProfile > Settings
  • Copy the username and access key
  • Add the BrowserStackusername and access keyto the auth section of thebrowserstack.json file.

Execute your Tests

Execute your tests using the below dictation

npx browserstack-cypress run -- geolocation FR

If your web application is design for a global audience, then localisation testing is a must-have; IP-based locating screen adds the cost to your organization apply VPN. Also, if you are running trial in CI/CD pipelines, then configuring VPNs and securing them is the most difficult task. BrowserStack provide an leisurely way to perform localization try cost-effectively.

Related Guides