E2E 测试本地化应用程序可能具有挑战性，翻译密钥可能会使测试代码更难以阅读和维护。本文演示了如何使用 Playwright 在 React 应用程序中测试 i18next 翻译，并采用避免翻译键的简化方法。这个想法可以用在任何带有 i18next 或类似库的项目中。
此方法基于我上一篇文章中有关在 RBAC 应用程序中使用 Playwright 固定装置进行授权的概念（使用 Playwright 进行测试：使授权更轻松、更具可读性）。
这是一个测试中的实际示例：
const LOCALES = ["en", "es", "zh"];
describe("Author page", () => {
for (let locale of LOCALES) {
test(`it has a link to articles. {locale: ${locale}}`, async ({ page, tkey }) => {
await page.goto("/authors/123");
const link = await page.getByRole("link").nth(0).textContent();
expect(link).toBe(tkey("Mis articulos", "menu"));
});
}
});
这里的关键概念是使用实际短语而不是 i18n 键进行翻译。传统方法通常使用翻译键，这可能难以阅读。例如：expect(link).toBe(t("menu.current_user_articles_link"));。这违背了编写易于阅读的测试的原则。
实现围绕使用与测试中的翻译键相对应的短语进行。以下是典型翻译文件的示例：
{
"en": {
"menu": {
"current_user_articles_link": "My articles"
}
},
"es": {
"menu": {
"current_user_articles_link": "Mis articulos"
}
},
"zh": {
"menu": {
"current_user_articles_link": "我的文章"
}
}
}
我们将其转换为交换的 JSON 格式，其中短语映射到相应的键（在本示例中使用西班牙语作为主要语言）：
{
"Mis articulos": "menu.current_user_articles_link"
}
为了实现此转换，我们将创建一个实用函数来交换 JSON 文件中的键和值。这是使用 TypeScript 和 Deno 的实现：
import { readdir, readFile, writeFile } from 'node:fs/promises';
import { join } from 'node:path';
const CONSTANTS = {
DIRECTORY_PATH: 'app/public/locale/es', // Path to locale language files
SWAPPED_FILE_PATH: 'e2e/fixtures/i18n/es_swapped.json', // Output path for swapped JSON
FILE_ENCODING: 'utf8',
} as const;
interface TranslationObject {
[key: string]: string | TranslationObject;
}
type SwappedTranslations = Record<string, Record<string, string>>;
function swapKeysAndValues(obj: TranslationObject): Record<string, string> {
const swappedObject: Record<string, string> = {};
function traverseObj(value: unknown, path = ''): void {
if (value && typeof value === 'object') {
for (const [key, val] of Object.entries(value)) {
traverseObj(val, path ? `${path}.${key}` : key);
}
} else if (typeof value === 'string') {
swappedObject[value] = path;
}
}
traverseObj(obj);
return swappedObject;
}
const JSON_EXTENSION_REGEX = /\.json$/;
async function buildJsonWithNamespaces(): Promise<void> {
try {
const files = await readdir(CONSTANTS.DIRECTORY_PATH);
const result: SwappedTranslations = {};
for (const file of files) {
const filePath = join(CONSTANTS.DIRECTORY_PATH, file);
const fileContent = await readFile(filePath, CONSTANTS.FILE_ENCODING);
const parsedFileContent = JSON.parse(fileContent) as TranslationObject;
const swappedContent = swapKeysAndValues(parsedFileContent);
const key = file.replace(JSON_EXTENSION_REGEX, '');
result[key] = swappedContent;
}
await writeFile(
CONSTANTS.SWAPPED_FILE_PATH,
JSON.stringify(result, null, 2),
CONSTANTS.FILE_ENCODING,
);
console.info('✅ Successfully generated swapped translations');
} catch (error) {
console.error(
'❌ Failed to generate swapped translations:',
error instanceof Error ? error.message : error,
);
process.exit(1);
}
}
console.info('? Converting locale to swapped JSON...');
buildJsonWithNamespaces();
使用以下命令运行此脚本： deno run --allow-read --allow-write path_to_swap.ts
现在让我们在 Playwright 中为 i18n 创建一个固定装置。此实现的灵感来自 playwright-i18next-fixture 库，但进行了自定义修改以实现更好的控制：
import * as fs from "node:fs";
import path from "node:path";
import Backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";
import { test as base } from "@playwright/test";
import { createInstance, type i18n, type TFunction } from "i18next";
const CONFIG = {
TRANSLATIONS_PATH: "translations_path_to_files/or_api_endpoint",
SWAPPED_TRANSLATIONS_PATH: "e2e/fixtures/i18n/es_swapped.json",
LOCAL_STORAGE_KEY: "locale",
SUPPORTED_LANGUAGES: ["es", "en", "zh"] as const,
DEFAULT_LANGUAGE: "es",
NAMESPACES: ["shared", "menu"] as const,
DEFAULT_NS: "shared",
} as const;
const data = fs.existsSync(CONFIG.SWAPPED_TRANSLATIONS_PATH)
? JSON.parse(fs.readFileSync(CONFIG.SWAPPED_TRANSLATIONS_PATH, "utf8"))
: {};
export function findTranslationByKey(
key: string,
namespace: string,
): string | undefined {
const value = data[namespace][key];
if (value && typeof value === "string") return value;
throw new Error(
`? Translation not found for the namespace "${namespace}" and key "${key}"`,
);
}
type SupportedLanguage = (typeof CONFIG.SUPPORTED_LANGUAGES)[number];
type Namespace = (typeof CONFIG.NAMESPACES)[number];
export const i18nOptions = {
plugins: [Backend, initReactI18next],
options: {
lng: CONFIG.DEFAULT_LANGUAGE,
load: "languageOnly",
ns: CONFIG.NAMESPACES,
defaultNS: CONFIG.DEFAULT_NS,
supportedLngs: CONFIG.SUPPORTED_LANGUAGES,
backend: {
allowMultiLoading: true,
loadPath: CONFIG.TRANSLATIONS_PATH,
},
react: {
useSuspense: true,
},
},
} as const;
let storedI18n: i18n | undefined;
async function initI18n({
plugins,
options,
}: typeof i18nOptions): Promise<i18n> {
if (!storedI18n?.isInitialized) {
const i18n = plugins.reduce(
(i18n, plugin) => i18n.use(plugin),
createInstance(),
);
await i18n.init(options);
storedI18n = i18n;
return i18n;
}
return storedI18n;
}
export type Tkey = (key: string, namespace?: Namespace) => string;
interface I18nFixtures {
i18n: i18n;
t: TFunction;
tkey: Tkey;
}
/*
Fixture for i18n functionality. It initializes the i18next instance and checks the language setting in the storageState created by Playwright. Similar technique was used in my RBAC example. For more details, see my article about authorization testing (https://dev.to/a-dev/testing-with-playwright-how-to-make-authorization-less-painful-and-more-readable-3344) and the official Playwright documentation (https://playwright.dev/docs/api/class-browsercontext#browser-context-storage-state).
*/
export const i18nFixture = base.extend<I18nFixtures>({
i18n: async ({ storageState }, use) => {
const i18nInstance = await initI18n(i18nOptions);
if (storageState) {
try {
const data = JSON.parse(
fs.readFileSync(path.resolve(storageState as string), "utf8"),
);
const localStorage = data?.origins?.[0]?.localStorage;
const language = localStorage?.find(
(i) => i.name === CONFIG.LOCAL_STORAGE_KEY,
)?.value as SupportedLanguage | undefined;
if (!language) {
throw new Error(
`No language setting found in localStorage (key: ${CONFIG.LOCAL_STORAGE_KEY})`,
);
}
if (!CONFIG.SUPPORTED_LANGUAGES.includes(language)) {
throw new Error(
`Unsupported language: ${language}. Supported languages: ${CONFIG.SUPPORTED_LANGUAGES.join(", ")}`,
);
}
// Change language if different from current
if (i18nInstance.language !== language) {
await i18nInstance.changeLanguage(language);
}
} catch (error) {
throw new Error(`Failed to process storage state: ${error.message}`);
}
}
await use(i18nInstance);
},
tkey: async ({ t }, use) => {
await use((str?: string, namespace = "shared"): string => {
if (!str) return "⭕ Error: no translation";
const tkey = findTranslationByKey(str, namespace);
return t(`${namespace}:${tkey}`);
});
},
t: async ({ i18n }, use) => {
await use(i18n.t);
},
});
最后，我们可以在 Playwright 测试中使用 i18nFixture 来处理翻译和语言设置。要了解有关使用装置的更多信息，请查看官方 Playwright 文档。我建议创建一个导出所有装置的 index.ts 文件，然后可以将其导入到您的测试文件中。
import { mergeTests } from '@playwright/test';
import { i18nFixture } from './fixtures/i18n';
const test = mergeTests({
...i18nFixture,
});
export { test };
祝您与 Playwright 和 i18next 一起测试愉快！ ？
如果您有任何疑问或建议，请随时在下面发表评论。
以上是使用 Playwright 进行测试：在测试中使用 iext 翻译，但不使用 `t(&#key&#)`的详细内容。更多信息请关注PHP中文网其他相关文章！
