DOM Snapshot

When a test fails, BugBug automatically captures the full DOM structure of the page at the exact moment of failure. You can then inspect it using browser DevTools — just like inspecting a live page.

---

Enabling DOM snapshots

DOM snapshots are enabled by default. To change this setting, go to Project Settings and find the Capture DOM on failure section.

---

How to access a DOM snapshot

DOM snapshots are available for test runs with a Failed or Error status.

1. Go to the Runs history

2. Click on the failed test run to open its details

3. Click the Show DOM snapshot button

The snapshot opens in a new browser tab, showing the page structure as it was when the test failed.

---

Inspecting the DOM snapshot

Once the snapshot is open, you can use Chrome DevTools to inspect the page just like you would on a live site.

1. Right-click anywhere on the page → Inspect, or press F12

2. Use the Elements panel to browse the HTML structure

3. Check element attributes, classes, and computed styles to understand why a selector may have failed to match

---

Common debugging scenarios

Selector not found

Inspect the element BugBug was trying to interact with. Check if its attributes or structure have changed since the test was recorded.

Assertion failed

Find the element your assertion targeted and verify its actual content, value, or visibility state at the time of failure.

Page loaded incorrectly

Browse the DOM to see if key elements are missing, hidden, or rendered differently than expected.