CODEWITHSUNDEEP
playwrightplaywright-typescript
MiklosBalazsi
MiklosBalazsi

Reputation: 253

playwright what is the best practice to test localisation

I am learning playwright and it highly recommends to use customer facing selectors...
so that rises a question what is the best approach for localisation testing.

I am using https://practice.automationbro.com/ to practice and unfortunately it does not have localisation so my example is just theoretical now.

My page object looks like this

export default class HomePage {
  page: Page;
  getStarter: Locator;
  headingText: Locator;

  constructor(page: Page) {
    this.page = page;
    this.getStarter = page.locator("#get-started");
    this.headingText = page.locator("text=Think different. Make different.");
  }

  public async navigate() {
    await this.page.goto("https://practice.automationbro.com");
  }

  public async assertHeadingTextIsVisible(){
    await expect(this.headingText).toBeVisible();
  }

[...]

And i am thinking to write a test file like this

test.describe("Home (EN)", () => {
  let homePage: HomePage;

    test.use({
      locale: 'en-GB',
      timezoneId: 'Europe/London',
    });

    test("Home page verify heading text", async ({ page }) => {
     homePage = new HomePage(page)

     await homePage.navigate()
     await homePage.assertHeadingTextIsVisible(<headingtext GB>)
  });
})

test.describe("Home (BE)", () => {
  let homePage: HomePage;

    test.use({
      locale: 'nl-BE',
      timezoneId: 'Europe/Brussels',
    });

    test("Home page verify heading text", async ({ page }) => {
     homePage = new HomePage(page)

     await homePage.navigate()
     await homePage.assertHeadingTextIsVisible(<headingtext BE>)
  });
})

How to define this.headingText = page.locator("text=Think different. Make different.") locator in HomePage object?

Upvotes: 1

Views: 2935

Answers (2)

candre
candre

Reputation: 1568

If you want to run the same test for several locales, you could parameterize it by iterating over a list with all locale specific parameters:

Putting all locale specific parameters in a separate file, localesInTest.ts

export interface LocaleInTest {
  locale: string,
  timezoneId: string,
  selectors: {
    getStarted: string
    headingText: string
  }
}

export const localesInTest: LocaleInTest[] = [
  {
    locale: 'en-GB',
    timezoneId: 'Europe/London',
    selectors: {
      getStarted: '#get-started',
      headingText: 'text=Think different. Make different.'
    }
  },
  {
    locale: 'nl-BE',
    timezoneId: 'Europe/Brussels',
    selectors: {
      getStarted: '-nl locator here-',
      headingText: '-nl locator here-'
    }
  }
];

// Adding localeInTest interface to class constructor Page object:

export default class HomePage {
  page: Page;
  getStarter: Locator;
  headingText: Locator;
  localeInTest: LocaleInTest;

  constructor(page: Page, localeInTest: LocaleInTest) {
    this.page = page;
    this.localeInTest = localeInTest
    this.getStarter = page.locator(localeInTest.selectors.getStarted);
    this.headingText = page.locator(localeInTest.selectors.headingText);
  }

  public async navigate() {
    await this.page.goto('https://practice.automationbro.com');
  }

  public async assertHeadingTextIsVisible() {
    await expect(this.headingText).toBeVisible();
  }
}

And your test would be looking something like this:

import { localeInTest } from XX;

// Iterate over locales defined in localesInTest.ts
for (const localeInTest of localesInTest) {

  test.describe(`Home - ${localeInTest.locale}`, () => {

    test.use({
      locale: localeInTest.locale,
      timezoneId: localeInTest.timezoneId
    });

    test(`Home page verify heading text (${localeInTest.locale})`, async ({ page }) => {

      // Using specific test parameters when creating new HomePage instance:
      const homePage = new HomePage(page, localeInTest);

      await homePage.navigate();
      await homePage.assertHeadingTextIsVisible();
    });
  });
}

Upvotes: 4

Vishal Aggarwal
Vishal Aggarwal

Reputation: 4225

Alternatively you may also parameterize tests via CSV file:

The Playwright test-runner runs in Node.js, this means you can directly read files from the file system and parse them with your preferred CSV library.

See for example this CSV file below:

`"test_case","some_value","some_other_value"
"value 1","value 11","foobar1"
"value 2","value 22","foobar21"
"value 3","value 33","foobar321"
"value 4","value 44","foobar4321"

Based on this we can create some tests by using the csv-parse library from NPM:

import fs from 'fs';
import path from 'path';
import { test } from '@playwright/test';
import { parse } from 'csv-parse/sync';

const records = parse(fs.readFileSync(path.join(__dirname, 'input.csv')), {
  columns: true,
  skip_empty_lines: true
});

for (const record of records) {
  test(`foo: ${record.test_case}`, async ({ page }) => {
    console.log(record.test_case, record.some_value, record.some_other_value);
  });
}

Upvotes: 0

Related Questions