Screenshot Hindi Webpages with Playwright MCP
This guide shows you how to capture screenshots of Hindi-language webpages using Playwright MCP (Model Context Protocol). You’ll learn to set up the environment, navigate to Hindi sites, handle Devanagari text rendering, and save high-quality images—all through simple, repeatable steps.
What You’ll Need
- Node.js (v18 or later) installed on your system.
- Playwright package installed globally or in your project.
- Playwright MCP server—either the official
@playwright/mcppackage or a compatible MCP client (like Claude Desktop, VS Code with MCP extension, or a custom script). - Hindi webpages—any site that uses Devanagari script, e.g., news portals, blogs, or government sites.
- Optional: a system with Hindi fonts installed (most OSes include them; if not, see Troubleshooting).
Step-by-Step
- Install Playwright and MCP server
Open a terminal and run:npm install -g @playwright/mcp
Then install browsers:npx playwright install chromium(or the browser of your choice). - Start the MCP server
Launch the server with:npx @playwright/mcp@latest
This starts a local server (usually on port 8931) that your MCP client can connect to. - Configure your MCP client
In your MCP client (e.g., Claude Desktop, Cursor, or a custom Node script), add the Playwright MCP server. For example, in Claude Desktop’s config file, add:{ "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] } } } - Navigate to a Hindi webpage
Use the MCP toolbrowser_navigatewith the URL of the Hindi site. For example:browser_navigate url: "https://hi.wikipedia.org/wiki/भारत"
Ensure the URL is URL-encoded if it contains non-ASCII characters. - Wait for the page to load fully
Usebrowser_waitfor a few seconds or wait for a specific selector. Hindi pages may have heavy media, so wait for theloadevent or a specific element like#content. - Adjust viewport and zoom (optional)
Set a mobile or desktop viewport usingbrowser_set_viewport. For better readability of Devanagari, you might increase the zoom level usingbrowser_zoomto 125% or 150%. - Take the screenshot
Callbrowser_screenshotwith parameters likefullPage: truefor the entire page, or specify aselectorto capture only a specific element. Save the image to a file path, e.g.,screenshot.png. - Verify the screenshot
Open the saved image to confirm that the Hindi text renders correctly (no boxes or missing glyphs). If not, see Troubleshooting. - Automate multiple pages (optional)
Write a loop in your MCP client to navigate through a list of URLs and take screenshots of each, adding a timestamp to filenames to avoid overwrites.
Common Mistakes
- Not URL-encoding Hindi characters—spaces and special characters in URLs cause navigation errors. Use
encodeURIComponent()or copy the encoded URL from the browser. - Taking screenshot before page load—Hindi sites often have slow-loading fonts or ads. Always wait for the network to be idle or a key element to appear.
- Using a viewport that’s too narrow—Devanagari text can wrap awkwardly; set a width of at least 1280px for desktop captures.
- Forgetting to specify fullPage—By default, only the visible viewport is captured. If you need the whole article, set
fullPage: true. - Overwriting screenshots—When automating multiple pages, use unique filenames (e.g., include the page name or a timestamp).
Tips
- Use a headless browser for speed—Playwright MCP runs headless by default; you can enable headed mode with
--headedfor debugging. - Set a custom user agent—Some Hindi sites serve different content based on user agent. Use
browser_set_user_agentto mimic a common browser. - Handle cookie banners—Many Indian sites show cookie consent popups. Use
browser_clickto dismiss them before screenshotting. - Use device scale factor for crisp text—Set
deviceScaleFactor: 2in viewport to get high-resolution screenshots suitable for printing or presentations. - Test with a sample page first—Try a simple Hindi page like
https://hi.wikipedia.orgbefore tackling complex sites with dynamic content.
Troubleshooting
Screenshot shows boxes or missing glyphs
This means the system lacks a font that supports Devanagari. Install a font like “Noto Sans Devanagari” on your OS. On Windows, go to Settings > Personalization > Fonts; on macOS, use Font Book; on Linux, install fonts-noto via your package manager. After installing, restart the MCP server.
Navigation fails with “net::ERR_NAME_NOT_RESOLVED”
Check the URL spelling and ensure it’s encoded. If the site is down, try another Hindi site. Also, verify your internet connection.
Page loads but screenshot is blank/white
Often due to JavaScript not executing. Use browser_wait for a selector that appears after JS runs, or try browser_reload. If the site uses heavy animations, wait longer.
Playwright MCP server won’t start
Ensure Node.js is in your PATH and that you’ve installed the package globally. Try running npx @playwright/mcp@latest --help to see if it responds. If you get a permission error, use sudo (Linux/Mac) or run as administrator (Windows).
Screenshot is blurry or low resolution
Increase the device scale factor or set a larger viewport. Also, avoid zooming in/out after setting viewport; set zoom before screenshot.
Frequently Asked Questions
Can I use Playwright MCP with Python instead of Node.js?
Yes, Playwright has a Python version, and MCP servers can be run via Python. However, the official MCP server is Node-based; you can use the Python Playwright API directly in a custom MCP server.
How do I capture a specific element like a headline?
Use the selector parameter in browser_screenshot. For example, selector: "h1" captures the first heading. You can inspect the page using browser_snapshot to find the right selector.
Will the screenshot include Hindi text in the correct font?
Yes, as long as the system has a Devanagari font installed. The browser renders text using the webpage’s CSS font stack, which typically includes web fonts that download automatically.
Can I automate screenshots of multiple Hindi pages in a loop?
Absolutely. In your MCP client, write a script that iterates over a list of URLs, navigates, waits, and saves a screenshot with a unique filename for each.
Does Playwright MCP work on Windows, Mac, and Linux?
Yes, it’s cross-platform. Just ensure you install the correct browser binaries for your OS using npx playwright install.
What if the Hindi site requires login?
You can use browser_login or manually log in by navigating to the login page, filling fields, and submitting. Then take the screenshot. The MCP server maintains the session as long as it’s running.
Related
Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.