Localize your test with Playwright

Emulate the "geolocation" , "locale" and "timezone" with Playwright

Image from Freefik.

Some websites are available in different languages and countries and include some of the following differences:

• Texts can be shorter or larger.

• Date formats, phone numbers, special characters, currencies, units of measurement, and decimal separators.

• Laws and regulations.

• Languages, such as Hebrew, are read from right to left.

• Colors and pictures could have different meanings.

Some e-commerce websites request access to your current geolocation to offer some products in your current location. You must accept the request to access your current location.

What is localization testing?

This type of testing checks that the behavior, translations, usability, accessibility, etc, are appropriate for the specific country or region.

Tips to test your websites in different languages

1. Sometimes, the UI and elements differ in each country, and you must access the HTML structure. I use Chrome's translate option to help me locate the elements in English.

2. Some websites or web apps are restricted by IP, so you can use Lambatest, Sauce Labs, or BrowserStack to test on a browser and mobile device from another country.

3. Don’t use translators to check the translation; sometimes, it is not translated correctly. You can get the translations from a translation team or from people who natively speak that language.

Emulate the user locale, timezone, and geolocation with Playwright

With Playwright, you can emulate the user locale, timezone, and geolocation to a specific area.

Locale geo and timezone globally

You can set all tests to be tested with a specific geolocation, locale, and timezone in the playwright.config.ts. You need the geolocation permission to allow access to the current geolocation.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // Emulates the user locale.
    locale: 'de-DE',

    // Emulates the user timezone.
    timezoneId: 'Europe/Berlin',

    // Context geolocation
    geolocation: { longitude: 12.492507, latitude: 41.889938 },
    permissions: ['geolocation'],
  },
});

Locale and Timezone in test spec

You can change only the tests in a spec.ts file.

import { test, expect } from '@playwright/test';

test.describe('Locale translations', () => {
    test.use({
        locale: 'de-DE',
        timezoneId: 'Europe/Berlin',
    });

    test('Translations with locale and time zone id', async ({ page }) => {
        await page.goto('https://www.google.com');
   }

Locale with LambdaTest

You can connect to LambdaTest, a platform for running your test in different browsers, mobile devices, and countries.

One option to connect with LambdaTest is to use a fixture file to set the capabilities that LambdaTest requires. In the capabilities, the country is in the attribute geoLocation.

const capabilities = {
    browserName: 'Chrome', // Browsers allowed: `Chrome`, `MicrosoftEdge`, `pw-chromium`, `pw-firefox` and `pw-webkit`
    browserVersion: 'latest',
    'LT:Options': {
        platform: 'Windows 10',
        build: 'Playwright Test ',
        name: 'Playwright Test Lambda',
        user: process.env.LT_USERNAME,
        accessKey: process.env.LT_ACCESS_KEY,
        network: true,
        video: true,
        visual: true,
        console: true,
        tunnel: false, // Add tunnel configuration if testing locally hosted webpage
        tunnelName: '', // Optional
        geoLocation: 'V2', // Germany country code. Country code can be fetched from https://www.lambdatest.com/capabilities-generator/
    },
}; 

You can check the details in my article:

Locale with synthetic testing

Synthetic testing allows you to execute your test periodically in different countries (generally AWS zones). Some options for Playwright are Checkly or PerfAgents. You can check it in my article:

Geolocation sample

In the next test, navigate to the Bing maps and click on locate to get the test's current location, which is set to Munich. After that, I checked that the current location's label was set to Munich.

import test, { expect } from '@playwright/test';
import { BingMapsPage } from '../../pages/Google/bingMapsPage';
import { AnnotationType } from '../../utils/annotations/AnnotationType';

test.describe('Geo Location Test', () => {
    //You need the longitude, latitude and geolocation permission to access to the geolocation
    test.use({
        geolocation: { longitude: 11.57549 , latitude: 48.13743 },
        permissions: ['geolocation'],
    });
      
    test('The bing maps is located to munich', async ({ page }) => {
        //This is the location label for the munich geolocation
        const geoName = 'GermanyBavariaMunich (District)';
        const bingMapsPage = new BingMapsPage(page);
        await bingMapsPage.goTo();
        //With click in the locate button the map will be centered in your current geolocation
        await bingMapsPage.locateMe.click();
        const assertionDescription = 'Geo name is equal to:' + geoName; 
        //Add the assertion to the html reporter annotations
        bingMapsPage.addAnnotation(AnnotationType.Assert, assertionDescription);
        //Check the current geolocation label is set to Munich
        await expect(bingMapsPage.geoName.locator, assertionDescription).toHaveText(geoName);
    });
});

Getting the correct longitude and latitude and adding the geolocation permission is essential to the test that emulates the geolocation.

Tips to test and reuse the same test for different countries

When the elements on the page differ between countries, and the steps are the same, It is a good idea to use the same test with parameters instead of adding one test for each country.

Sometimes, the translations in development are stored in a database, JSON, or Excel file. You can use a JSON file with text translations and the specific selectors for each country.

In the following text, I will check that the Google search is translated into different countries: Germany, Mexico, and the USA.

I made a JSON with the name de-DE.json with:

• timezoneId,

• The texts in German for the Google search button

• The aria-label for the Google search input. Because I need to test accessibility, it is better to access the aria-label because screen readers read the aria-label.

{
    "timezoneId": "Europe/Berlin",
    "googleSearch": "Google Suche",
    "search": "Suche",
    "textToSearch": "olympia"
}

With an environment variable, you can set up the locale to emulate different locales in your laptop or with pipelines.

import { expect, test } from '@playwright/test';
import { HomePage } from '../../pages/Google/homePage';
import { AnnotationType } from '../../utils/annotations/AnnotationType';

const locale = process.env.LOCALE ? process.env.LOCALE : 'en-US';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const localeInfo = require(`../../data/${locale}.json`);

test.describe('Locale translations', () => {
    test.use({
        locale: locale,
        timezoneId: localeInfo.timezoneId,
    });

    test('Translations with locale and time zone id', async ({ page }) => {
        const homePage = new HomePage(page);
        //Go to google home page in the locale
        await homePage.goTo();
        const assertDescription = `Search button text is equal to: "${localeInfo.googleSearch}"`;
        //Add the assertion to the html reporter
        homePage.addAnnotation(AnnotationType.Assert, assertDescription);
        //Check that the google search includes the translated text
        await expect(homePage.googleSearch.locator, assertDescription).toHaveText(localeInfo.googleSearch);
    });
});

Thank you for reading. Feel free to suggest any topics or questions. If the article is useful, you can share it. Enjoy testing!!