Playwright本地化测试最佳实践：页面对象多语言文本定位器定义方法

核心最佳实践 #

• 抽离本地化文本到独立配置：将各语言的文本内容集中存放在配置文件中，避免硬编码在页面对象或测试用例里，便于维护和更新。
• 配合Playwright环境配置：使用test.use()设置目标locale和timezoneId，模拟目标用户的运行环境。
• 动态生成文本定位器：结合多语言配置，在页面对象中动态生成基于文本的定位器，而非固定写死文本内容。
• 避免硬编码文本断言：用配置好的多语言文本变量替代固定字符串，让断言适配不同语言环境。

具体实现方案 #

1. 创建多语言文本配置文件 #

按语言创建独立的配置文件，统一管理各页面的文本内容：

// locales/en-GB.ts
export default {
  homePage: {
    headingText: "Think different. Make different."
  }
};

// locales/nl-BE.ts
export default {
  homePage: {
    headingText: "Denk anders. Doe anders." // 示例荷兰语翻译
  }
};

2. 改造HomePage页面对象 #

通过构造函数传入locale参数，加载对应语言的文本配置，并动态生成定位器：

import enGB from '../locales/en-GB';
import nlBE from '../locales/nl-BE';

type Locale = 'en-GB' | 'nl-BE';
type LocaleTexts = typeof enGB;

export default class HomePage {
  page: Page;
  getStarter: Locator;
  private localeTexts: LocaleTexts;

  constructor(page: Page, locale: Locale) {
    this.page = page;
    this.getStarter = page.locator("#get-started");
    // 根据locale加载对应文本配置
    this.localeTexts = locale === 'en-GB' ? enGB : nlBE;
  }

  // 动态生成headingText定位器
  get headingText(): Locator {
    return this.page.locator(`text=${this.localeTexts.homePage.headingText}`);
  }

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

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

3. 调整测试用例 #

创建页面对象实例时传入对应locale，无需在断言中手动传文本：

import HomePage from '../pages/HomePage';

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, 'en-GB');
    await homePage.navigate();
    await homePage.assertHeadingTextIsVisible();
  });
})

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, 'nl-BE');
    await homePage.navigate();
    await homePage.assertHeadingTextIsVisible();
  });
})

补充说明 #

如果目标网站自带语言切换功能，测试时应优先模拟用户操作切换语言（比如点击语言选择按钮），再进行断言；Playwright的locale配置主要用于设置浏览器的语言偏好，部分网站会根据该偏好自动切换语言，需根据实际场景选择适配方式。

内容的提问来源于stack exchange，提问作者MiklosBalazsi