Puppeteer Screenshot of an Indian Railway Booking Page After Entering Passenger Details

To capture an Indian railway booking page after passenger details have been entered, use Puppeteer’s Page.screenshot() on a page that is already in the intended state. Use ElementHandle.screenshot() if you only need the passenger form or another specific element. For an article or demonstration, use fictional passenger details on a mock or authorized test page. A real capture can expose personal information, so redact identifying fields before sharing it.

IRCTC’s e-ticket guide describes passenger entry before journey review and payment, but it does not promise a fixed page layout or establish that automating a live booking with Puppeteer is permitted or reliable. The code below is a generic capture example for a page you are authorized to access; it does not log in, fill a real booking form, bypass a challenge, or complete a booking. Read IRCTC’s booking guide.

1. Set up Puppeteer

Use a current Node.js installation and install Puppeteer in a new project. Puppeteer downloads a compatible browser as part of its normal installation. If your environment supplies its own browser, see Puppeteer’s documentation for configuring that setup.

mkdir railway-screenshot
cd railway-screenshot
npm init -y
npm install puppeteer

Save the following as screenshot.mjs. Set TEST_PAGE_URL to an authorized mock or test page that is already in the passenger-entry state. The script waits for a form element, captures the full page, and closes the browser even if capture fails.

import puppeteer from 'puppeteer';

const url = process.env.TEST_PAGE_URL;
if (!url) {
  throw new Error('Set TEST_PAGE_URL to an authorized mock or test page.');
}

const browser = await puppeteer.launch({ headless: true });
try {
  const page = await browser.newPage();
  await page.setViewport({ width: 1440, height: 1000, deviceScaleFactor: 1 });

  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30_000 });
  await page.waitForSelector('[data-passenger-form]', { timeout: 15_000 });
  await page.screenshot({
    path: 'booking-page.png',
    fullPage: true,
    type: 'png'
  });
} finally {
  await browser.close();
}

Run it with a URL for a page you control:

TEST_PAGE_URL='http://localhost:3000/booking-review' node screenshot.mjs

Replace [data-passenger-form] with a selector present on your own test page. This example deliberately does not provide IRCTC login or form-submission steps. Puppeteer documents the page screenshot API, the Page API, and screenshots including element capture.

2. Choose page or element capture

Page.screenshot() is suitable when the whole visible page or full document is relevant. An element screenshot reduces incidental content in the image, which can also reduce the amount of unrelated personal data captured. Puppeteer’s element screenshot method attempts to scroll a hidden element into view.

const form = await page.waitForSelector('[data-passenger-form]');
if (!form) throw new Error('Passenger form was not found.');
await form.screenshot({ path: 'passenger-form.png', type: 'png' });

For a regular viewport-only screenshot, omit fullPage or set it to false. For a full-page capture, set it to true. A tall page can produce a very large image; capture just the relevant element or viewport if the additional content is unnecessary.

3. Protect passenger information

IRCTC’s privacy policy describes personal and contact information associated with users and other travellers. Its FAQ says passengers do not need to enter photo identity-card details during booking, but names and other values entered into a form can still appear in a screenshot. See the IRCTC privacy policy and e-ticket FAQ.

Use fictional names and values on a local mock or expressly authorized test environment.
Prefer an element screenshot over a whole-page capture when the surrounding content is not needed.
If you must use a real capture, redact identifying fields before publication and restrict access to the original.
Do not assume that hiding a field visually removes its value from the page or from other captured content.

For a mock page you control, you can cover the passenger fields before taking the screenshot. This example adds an opaque overlay to elements matching a selector; adapt the selector to your mock’s markup.

await page.addStyleTag({
  content: `
    [data-sensitive-passenger] {
      color: transparent !important;
      text-shadow: none !important;
      background: #222 !important;
      border-color: #222 !important;
    }
  `
});
await page.screenshot({ path: 'redacted-mock.png', fullPage: true });

Visual masking is appropriate for a controlled demonstration, not as a guarantee that a real person’s information has been removed from every layer of a page. For publication, use synthetic data or redact the resulting image and inspect the final file.

4. Configure the capture

Set the viewport before navigation when responsive layout matters. Puppeteer’s page screenshot options include output path, image type, quality for JPEG or WebP, full-page capture, clipping, and background handling. Check the API reference for the option details supported by your installed Puppeteer version.

Need	Approach
Capture a long form and surrounding page	`fullPage: true`
Capture only a form or panel	Call `screenshot()` on its element handle
Match a phone or desktop layout	Set viewport width, height, and device scale factor before capture
Reduce output size	Use JPEG or WebP with an appropriate quality value, or capture a smaller area
Capture a stable state	Wait for a page-specific selector or a known completion condition

Example viewport and JPEG output:

await page.setViewport({ width: 390, height: 844, deviceScaleFactor: 2 });
await page.screenshot({
  path: 'booking-mobile.jpg',
  type: 'jpeg',
  quality: 85,
  fullPage: false
});

Use a selector that signals the exact state you intend to document. A generic network-idle wait can be inappropriate on pages that continuously fetch data; a visible form selector or application-specific readiness signal is often clearer. If the content changes after the selector appears, wait for the particular update your mock or test page exposes.

5. Or skip the browser setup

For a public page that does not require your existing logged-in browser state, ScreenshotNeo can return a screenshot from one GET request. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed; and an MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Use a public mock or other safe URL here: this request does not recreate the state of your existing browser session or the passenger values entered there. Learn more at ScreenshotNeo, or sign up free for 1,000 screenshots a month, with no card.

6. Troubleshooting

Symptom	Likely cause	Fix
`TEST_PAGE_URL` is missing	The environment variable was not set.	Set it to an authorized mock or test URL before running the script.
Navigation times out	The test page is unavailable, slow, or waiting indefinitely for a load condition.	Check the URL and server first. Use a narrower readiness condition, such as `domcontentloaded` plus a page-specific selector, and set a suitable timeout.
Selector wait times out	The selector is not present, differs between responsive layouts, or the page never reached the expected state.	Inspect your mock’s markup and use a selector that exists in the intended state. Do not treat a timeout as proof that the page is ready.
Screenshot is blank or incomplete	The page may not have rendered its content when capture began, or the selected element may be absent.	Wait for a visible, state-specific selector and confirm the test page itself renders in the configured viewport.
Output is unexpectedly large	A full-page or high-scale image includes more pixels than needed.	Capture an element or viewport, lower the device scale factor, or choose a compressed image format.
Passenger values are visible	The values were part of the rendered page at capture time.	Use synthetic values, capture a mock, and redact the image before sharing. Restrict access to any unredacted original.

7. Performance and reliability

For repeated captures, reuse a browser process where appropriate and create a fresh page for each independent capture. Close pages and browsers when finished so browser processes do not accumulate. Full-page and high-density captures consume more memory and produce larger files; element screenshots can keep both output size and incidental content down.

Choose waits based on the page state you need, rather than adding a long fixed sleep to every run. A fixed delay can waste time when the page is fast and still be insufficient when it is slow. A selector wait is more explicit, but it can fail if the page changes or the selector is wrong. Treat navigation errors, missing selectors, and screenshot failures as failed captures, and avoid publishing an image until you have checked its contents.

The available sources document Puppeteer’s screenshot APIs and IRCTC’s broad booking sequence. They do not establish whether automating the current live IRCTC booking site is allowed, reliable, or tested. Use an authorized environment and consult the applicable site terms before automating a live service.

8. FAQ

Does this capture prove a booking was completed?

No. A screenshot records rendered pixels at one point in time. It does not establish payment, ticket confirmation, or a successful booking.

Can I use a screenshot of a real passenger form in a tutorial?

Use fictional data on a mock or authorized test page where possible. If a real capture is necessary, redact identifying information before sharing it and keep the original restricted.

Should I capture the whole page or only the passenger form?

Capture the smallest area that explains the point. Use a page screenshot when surrounding context matters; use an element screenshot when the form alone is enough.