Forms Located in Popups and Modals

Forms embedded inside popups or modals can be tricky to test automatically because they aren’t visible until a trigger element (like a button or link) is clicked. CheckView makes this process simple with built-in support for forms inside popups and modals, allowing you to generate test flows that accurately simulate a real user opening and submitting these forms.

When to Use This Setting

Use this option whenever your form is not directly visible on the page but is instead loaded or displayed after a user interaction, such as clicking a “Contact Us,” “Sign Up,” or “Get a Quote” button that opens a popup or modal window.

How It Works

When you check the Form in Popup or Modal’ checkbox during test flow creation, CheckView automatically adds a step that clicks the element responsible for opening the form before proceeding with the rest of the generated steps (filling out fields, submitting the form, verifying success, etc.). This ensures that the form is visible and ready for interaction before the test begins and the test flow steps can be fully generated for your entire form test flow.

How to Set It Up

  1. Click Add New Test Flow and select the test type (ie. form or WooCommerce).
  2. Check the Form in Popup or Modal checkbox option.
  3. Enter the CSS class or ID for the trigger element that opens the form (for example, .open-form-btn or #contact-modal-trigger).
  4. Continue setting up your form test as usual and click Add New Test Flow.
  5. CheckView will automatically include an optional test step for clicking the element targeted with the CSS class or ID before proceeding with the rest of the generated steps

Tips for Best Results

  • Always verify that your trigger selector uniquely identifies the button or link that opens the form.
  • If multiple elements use the same class, consider targeting a more specific selector (for example, .header .open-form-btn).
  • Combine this feature with the Selector to Trigger Pop-Up option if additional overlays, banners, or chat widgets appear after the form opens that may block the test flow from generating properly.
  • If your form loads dynamically (via AJAX), give CheckView a short delay or assertion to confirm visibility before proceeding.

Example Use Case

A “Request a Quote” button on your homepage opens a popup form with name, email, and message fields.

By enabling Form in Popup or Modal and entering .request-quote-btn as the selector, CheckView will:

  1. Click the button to open the popup,
  2. Wait for the form to become visible,
  3. Fill out the form fields,
  4. Submit the form, and
  5. Verify that a success message and the test submission is saved properly to the database.

Docs