Dynamic Class Loading for Page Objects in Playwright Automation

The Problem in Localization UI Automation

When automating e-commerce apps for multiple localized sites (e.g., eBay.com for English, eBay.de for German), common but poorly maintainable approaches include:

• Keeping separate Git branches/scripts per localization
• Adding conditional logic inside a single Page Object
• Using dynamic locators with OR conditions

All these lead to code duplication, difficult maintenance, and complex upgrades as localizations grow.

The Solution : Dynamic Class Loading for Localized POMs

Dynamic class loading makes your framework instantiate the correct Page Object class based on the locale detected at runtime no conditionals or duplicated scripts needed!

This keeps code DRY, modular, and easy to extend with new locales.

General Flow (like your diagram)

1. User starts test
2. Test uses fixture to manage Page Object creation
3. Fixture detects page locale (document.documentElement.lang)
4. Test dynamically loads the proper POM class (en-POM, de-POM, etc.)

Also Read: Playwright Testing Framework from Scratch: Folder Structure, Config, and Best Practices

Sample Implementation :

1. Detect page language

const pageLanguage await page.evaluate(() => document.documentElement.lang || "Not set");

2. Interface for POMs

This code defines an interface named PomTemplate that forces any class implementing it to include four async methods: searching for an item, waiting for a tab, buying the item, and entering a shipping address. It’s like a blueprint for a page object in a test automation framework.

export default interface PomTemplate {
 searchAnItem(item:string): Promise<void> // To search for an item on the page
 waitToOpenInNewTab(): Promise<void> // To wait until a new tab opens.
 buy ItNow(): Promise<void> // Clicks the "Buy It Now" button.
 enterShippingAddressAndSubmit({}): Promise<void> // To fill the shipping form and submit it.
}

3. Separate POM classes per locale

• “EnLocalisedRegion implements PomTemplate”
• “DeLocalisedRegion implements PomTemplate”

4. Fixture loads correct class dynamically

This function dynamically loads the correct Page Object Model (POM) class based on locale (lang) and returns a fully constructed object that implements the PomTemplate interface.

const loadclass = async (lang: string, args: any[]) => {
	const module = await import(`./../pages/${lang}_flow.
	const newClass: { new (...args:any()): PomTemplate } = module.default;
	return new newClass(...args);
};

5. Fixture wiring

This code extends Playwright’s fixture system so that every test automatically gets the correct Page Object instance based on page locale. Tests stay clean and reusable, while the fixture handles dynamic class loading behind the scenes.

const test = PageFixture.extend<Pages>({
	dynamicPage: [async({ page, baseURL }, use) => {
		await page.goto(baseURL as string);
		const pageLanguage await page.evaluate(() => document.documentElement.lang || "Not set");
		const flowPage await loadclass (pageLanguage, [page]);
		await use(flowPage);
}, { scope: 'test' }],
});

6. Reusable Test Implementation

The same test runs with the correct page object regardless of locale!

test('eBay -Add address flow', async ({ dynamicPage }) => {
	await dynamicPage.searchAnItem ('Barbie Doll')
	await dynamicPage.waitToOpenInNewTab()
	await dynamicPage.buyItNow()
	await dynamicPage.enterShippingAddressAndSubmit({})
})

Also Read: Mastering Playwright Inspector: The Ultimate Guide to Visual Debugging

Advantages Over Traditional Approaches

• No code duplication — add new locale classes only
• Easy maintenance & extensibility
• Clear separation of concerns
• Type safety & interface support thanks to TypeScript
• Supports Playwright best practices

Best Practices & Caveats

• Robust error handling for missing modules or unknown locales
• Avoid hardcoding locator texts inside POM; centralize if possible
• Use clear typing for better development experience

Conclusion

Dynamic class loading with Playwright POM is a scalable, maintainable approach for localization needs in UI automation. This results in clean, modular, and extensible test frameworks, perfect for enterprise projects.

Happy coding and learning!