Debugging Login Forms: E2LLM (JSON Snapshots) Show the Hidden State

The Pain: When Login Buttons Don’t Work

You open a login page. The UI looks fine: an email field, a “Continue” button, and several “Login with Google/Apple/GitHub” options.

But the test fails. The “Continue” button doesn’t trigger, or one of the login options is disabled by a script. Selenium screenshots look normal, but QA can’t see what’s really happening under the hood.

Why Traditional Tools Miss This

• Selenium or Playwright selectors only confirm visibility
• Screenshots don’t expose hidden attributes
• QA spends hours in DevTools trying to guess why the button isn’t working

Element to LLM: One Click to the Truth

With the Element to LLM browser extension, you capture the runtime DOM state of any element as JSON.

For example, here’s what the extension reveals about the “Continue” button:

{
  "element": "button",
  "type": "submit",
  "textContent": "Continue",
  "disabled": true,
  "visibility": "visible",
  "validity": {
    "valid": false,
    "valueMissing": true
  }
}

And hidden field:

{
  "element": "div",
  "classes": ["login__form-password", "is-hidden"],
  "aria-hidden": "true",
  "textContent": "Password"
}

Now you instantly see:
JSON snapshot shows that the “Continue” button is visible but disabled, and the hidden password field exists even though the UI doesn’t show it.

Why It Matters

• QA engineers can debug forms in seconds, not hours
• No more blind spots: hidden or invisible elements are exposed
• JSON format = machine-readable, can be stored or fed into automation pipelines

Conclusion
Login forms often fail in ways that are invisible to the naked eye. JSON snapshots make hidden states visible — saving QA hours of frustration.