playwright-i18next-fixture

📝 Use your i18next translations in Playwright to create multi-language selectors

🚀 Use case

Selecting by text can be a problem with e2e testing. Tying your expectations to text can led to problems with multi-language pages.

With the power i18next and fixtures we can easily create multi-language selectors by defining keys for our text selectors

🌱 Installation

``bash


Yarn

`

📝 Usage

Create the i18next instance as you would in your browser

`ts
import { test as base } from "@playwright/test";
import { createI18nFixture, getI18nInstance } from "playwright-i18next-fixture";

const i18nFixture = createI18nFixture({
// i18n plugins
plugins: [ ... ]
// i18n configuration options
options: {
lng: 'en',
resources: { ... }
},
// Fetch translations in every test or fetch once
// Default: true
cache: false
// Run as auto fixture to be available through all tests by getI18nInstance()
// Default: true
auto: true
})

const test = base.extend(i18nFixture);

// Context is now shared
test("my test", async ({ i18n, t }) => {});

// If auto is enabled, you can also use the manual fn
// This is useful to inject directly in classes
class ExampleClass {
readonly i18n: i18n = getI18nInstance()
}
``

LICENSE

MIT

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg
[license-link]: https://opensource.org/licenses/MIT
[npm-badge]: https://img.shields.io/npm/v/playwright-i18next-fixture
[npm-link]: https://www.npmjs.com/package/playwright-i18next-fixture
[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?logo=prettier
[prettier-link]: https://prettierjs.org/en/download/
[build-badge]: https://github.com/cubanducko/playwright-i18next-fixture/actions/workflows/build.yml/badge.svg
[build-link]: https://github.com/cubanducko/playwright-i18next-fixture/actions/workflows/build.yml