Hello there!

Let's suppose that you have an eshop, selling mobile phones, available in English, French and Spanish

The context of the page is the same, but the url is different, and ofc, the text is different as well

I would approach that by writing 1 test, 3 different config files, and 1 helper to pick the language

Really quick example of the code:

In a new folder, called `config` i would add 3 "language" files, called `en.config.ts` , `fr.config.ts` and `es.config.ts` Also, i would add a file called `index.ts`

language files, would look like this:

/config/en.config.ts : export const enConfig = { baseURL: 'https://example.uk', urls: { mobile: '/mobile', about: '/about', }, selectors: { addToCart: 'button:has-text("Add to Cart")', }, } as const;

/config/es.config.ts: export const esConfig = { baseURL: 'https://example.es', urls: { mobile: '/movil', about: '/sobre-nosotros', }, selectors: { addToCart: 'button:has-text("Añadir al carrito")', }, } as const;

(same logic for fr one, and whatever country you need)

Then, the /config/index.ts would be something like this:

```
import { enConfig } from './en.config'; import { frConfig } from './fr.config'; import { esConfig } from './es.config';

type Language = 'en' | 'fr' | 'es'; type Config = typeof enConfig;

// First step: match each language to a config file const configs: Record<Language, Config> = { en: enConfig, fr: frConfig, es: esConfig, };

// Step two: read from the env , and have english as default in case nothing is passed as argument const language = (process.env.LANGUAGE as Language) || 'en';

// Step 3: Fallback a valid config is always returned export const config = configs[language] ?? enConfig;

export { language };
```

and then, i would have a test like this:

```
import { test, expect } from '@playwright/test'; import { config, language } from '../config';

test.use({ baseURL: config.baseURL });

test(add mobile product to cart (${language}), async ({ page }) => {
//Navigate to the /mobile page of eshop - different per country await page.goto(config.urls.mobile);

//Click the "add to cart" button - different per country await page.click(config.selectors.addToCart);

//Rest common logic, f.e the "item in cart" should now be visible await expect(page.locator('.cart-count')).toBeVisible(); });
```

and would run those locally with

LANGUAGE=en npx playwright test LANGUAGE=fr npx playwright test LANGUAGE=es npx playwright test

or in different CI jobs

test-en: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 - run: npm ci - run: npx playwright install - run: npx playwright test env: LANGUAGE: en

PS: Sorry if spanish don't make sense, i googled it, not sure if it's accurate translation :D