Advanced DOM Selectors

Advanced: DOM Selectors

IRCTC frequently updates its website's HTML structure and CSS classes. When this happens, automation bots can "break" because they can no longer find the buttons or input fields they are programmed to click.

To solve this, our extension includes an Advanced DOM Selectors editor. This allows you to fix a broken extension yourself without needing to wait for a code update!

How to Access

1. Open the extension configuration dashboard.
2. Scroll down and click the accordion labeled Advanced: DOM Selectors.

How It Works

The editor groups selectors by category (e.g., Login Elements, Search Journey, Passenger Input).

• Default Values: Below each text box, you will see the Default CSS selector baked into the extension's code.
• Overriding a Selector: If IRCTC changes a button's class ID, simply type the new CSS selector into the text box. The field will turn orange to indicate it has been modified.
• Resetting: To revert back to the original code, simply delete your text from the box (or click the red reset arrow next to it).

Scenario: Fixing a Broken "Continue" Button

Imagine IRCTC changes the "Continue" button on the passenger page from <button class="btnDefault train_Search"> to <button class="new-btn continue-flow">.

Here is how you fix the extension:

1. Right-click the new "Continue" button on the actual IRCTC page and select Inspect.
2. Figure out the new CSS selector (in this example, it would be button.new-btn.continue-flow).
3. Open the extension dashboard -> Advanced: DOM Selectors.
4. Expand the Passenger Input Elements category.
5. Find the PASSENGER_SUBMIT_BUTTON field.
6. Paste your new selector: button.new-btn.continue-flow.
7. Click Save Selectors.

Note: Any changes you make here are saved locally and take effect the next time you load the IRCTC page.

Resetting All Changes

If you’ve made a mistake or downloaded a new update of the extension where the code has been fixed by the developer, you can click Reset All to Defaults at the top of the DOM Selectors panel to clear all your custom overrides.