# Previewing an API Test

API tests run custom JavaScript on your store, so thorough QA is essential before launching. A script error can break page functionality, interfere with other apps, or cause visual glitches. This guide walks you through previewing and testing your API test to catch issues before they reach visitors.

### Enter preview mode

Open your test in Shoplift and click **Preview**. This opens your store in a new browser tab with Shoplift's preview mode enabled.

When preview mode is active:

* A preview control bar appears at the top of the page showing which variant you're viewing.
* You can switch between the control and variant using the control bar.
* No visitor record is created and no analytics events are sent. Your preview activity doesn't affect test data.
* Audience rules and traffic allocation are bypassed, so you can see any variant regardless of targeting settings.

<figure><img src="/files/uViRUPc6f61as4BbflUl" alt=""><figcaption></figcaption></figure>

### Check your variant

Switch to the variant using the preview control bar. Verify that your JavaScript changes appear as expected. Then switch back to the control to confirm the original store experience is unaffected.

For an **automatic API test**, the variant code runs automatically when you switch to the variant view. You should see your changes immediately.

For a **manual API test**, switching to the variant in preview mode simulates the trigger — you don't need to manually fire the `isHypothesisActive()` call during preview. Shoplift handles this so you can see the variant experience directly.

{% hint style="info" %}
If your manual API test uses a behavior-based trigger (like scroll depth or time on page), also test the trigger logic separately. Preview mode lets you see the variant experience, but you should verify that your trigger code fires at the right moment by testing it outside of preview mode using the URL parameter method described below.
{% endhint %}

### QA checklist

Work through each of these checks before launching:

#### Visual and functional checks

* [ ] **Variant renders correctly.** Switch to the variant and confirm the change is visible. Check that added elements (banners, badges, popups) appear in the right position with the correct styling.
* [ ] **Control is unaffected.** Switch back to the control and verify that no trace of the variant code is visible. The original experience should be completely unchanged.
* [ ] **Navigate between pages.** With the variant active, browse multiple page types (homepage, collection, product, cart). Confirm the variant experience is consistent where it should be and doesn't appear where it shouldn't.
* [ ] **Test on mobile.** Open the preview URL on your phone or use your browser's device emulation mode. Check that your variant code works at mobile viewport sizes and that elements are properly positioned.
* [ ] **Check page load.** Watch for visible flicker, layout shifts, or delayed rendering when the variant loads. If you see flicker, your script may need to execute earlier or use CSS to hide elements until they're ready.

#### Script-specific checks

* [ ] **Open the browser console.** Right-click the page, select **Inspect**, and go to the **Console** tab. Look for JavaScript errors. Errors in red may indicate your script is failing or conflicting with other code on the page.
* [ ] **Check for conflicts with other apps.** Browse your store with the variant active and interact with features powered by other apps (product reviews, wishlists, chat widgets, upsell popups). Confirm they still work normally.
* [ ] **Test interactive elements.** If your script adds interactive elements (buttons, forms, dismiss actions), click through every interaction to make sure they work.
* [ ] **Test add-to-cart and checkout.** Add a product to the cart and proceed through checkout (you can abandon before placing an order). Confirm your variant code doesn't interfere with the purchase flow.

#### For manual API tests only

* [ ] **Verify the trigger logic.** If possible, test outside of preview mode by adding the URL parameter `?slVariant=YOUR_HYPOTHESIS_ID` to your store URL. This forces the variant for your session so you can test the full trigger flow as a real visitor would experience it.
* [ ] **Test trigger conditions.** Confirm that the trigger fires at the right moment (scroll depth, time delay, specific visitor action) and that it doesn't fire when conditions aren't met.

### Testing with URL parameters

For more advanced QA, you can force a specific variant without using Shoplift's preview bar:

**Force a specific variant:**

```
https://your-store.com?slVariant=YOUR_HYPOTHESIS_ID
```

This assigns you to the specified variant, simulating a real visitor experience. This is useful for testing manual API test triggers end-to-end.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shoplift.ai/test/javascript-api/previewing-an-api-test.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.