DEV Community

Styrow.dev
Styrow.dev

Posted on Originally published at styrow.dev

How to mock system time, locale, and timezone in Playwright to test date pickers and time-sensitive UI components?

#testing #automation #programming #softwaredevelopment

🤯 Flaky UI tests haunting your global apps?
Discover how to mock system time, locale, and timezone in Playwright for rock-solid date picker and time-sensitive component testing.

📌 Problem Statement
Testing time-sensitive UI components like date pickers, countdown timers, or subscription trials often leads to unreliable, flaky tests. Relying on local system clocks (developer machine or CI runner) introduces non-determinism. This is especially problematic for global applications needing consistent behavior across various timezones and locales.

💡 Solution & Code Walkthrough
Playwright provides powerful native APIs to control the browser's perceived time, timezone, and locale. This ensures your tests are deterministic and resilient to environment variations.

• Configure Browser Context Timezone & Locale
Simulate a user's geographical context directly in the browser context. This affects native date pickers, number formatting, and language settings for consistent UI behavior.

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  // Simulate Tokyo time (Asia/Tokyo) and Japanese locale (ja-JP)
  const context = await browser.newContext({
    timezoneId: 'Asia/Tokyo', // Sets browser's internal timezone
    locale: 'ja-JP',           // Affects formatting (e.g., YYYY/MM/DD)
  });
  const page = await context.newPage();
  await page.goto('https://your-app.com/date-picker');
  // Perform your date/time-sensitive tests here...
  await browser.close();
})();
Enter fullscreen mode Exit fullscreen mode

• Mock the System Clock (Playwright v1.27+)
Use Playwright's native clock API to precisely freeze time, intercepting and controlling browser-internal Date, setTimeout, setInterval, and requestAnimationFrame calls.

// Freeze time to Christmas 2025 at midnight UTC
await context.clock.freeze(new Date('2025-12-25T00:00:00Z'));
// Any 'new Date()' or time-related JavaScript calls in the browser
// will now return or operate based on this fixed timestamp.
Enter fullscreen mode Exit fullscreen mode

🔑 Key Takeaways
• ✅ Achieve deterministic UI tests for global applications.
• ❌ Avoid flaky tests caused by varying system clocks or environments.
• • Use timezoneId and locale in browser.newContext() for regional UI simulation.
• • Leverage context.clock.freeze() for precise, static time control within your tests.
• ✅ Boost test reliability and confidence for all time-sensitive features.

❓ Quick Summary Q&A
Q: Why mock time/locale in Playwright?
A: To ensure deterministic, non-flaky tests for global apps and time-sensitive UI components, independent of the local system clock or environment.

Q: How do you set a specific timezone for a Playwright test?
A: Use browser.newContext({ timezoneId: 'Your/Timezone' }) when creating the browser context.

Q: Can I freeze the browser's internal clock to a specific date?
A: Yes, with await context.clock.freeze(new Date('YYYY-MM-DDTHH:MM:SSZ')).

TAGS: playwright, testing, automation, e2e, javascript, datetime, mocking, ui-testing

────────────────────────────────────────
Level up your dev skills on the go!
Download our app for more expert content, interactive coding challenges, and career growth tools.
────────────────────────────────────────

📲 𝐅𝐑𝐄𝐄 𝐌𝐎𝐁𝐈𝐋𝐄 𝐀𝐏𝐏 — 𝟔𝟎𝟎+ 𝐒𝐃𝐄𝐓 𝐐&𝐀𝐬
Practice real-world interview scenarios offline on the free QA Automation & SDET Prep app:

🤖 𝐆𝐨𝐨𝐠𝐥𝐞 𝐏𝐥𝐚𝐲 (𝐀𝐧𝐝𝐫𝐨𝐢𝐝):
https://play.google.com/store/apps/details?id=com.app.seleniuminterviewquestions&referrer=utm_source%3Ddevto%26utm_medium%3Darticle%26utm_campaign%3Dselenium_20261108

🍎 𝐀𝐩𝐩 𝐒𝐭𝐨𝐫𝐞 (𝐢𝐎𝐒):
https://apps.apple.com/app/id6786760948?pt=128640464&ct=devto_selenium_20261108&mt=8

────────────────────────────────────────
────────────────────────────────────────

Top comments (0)