Skip to main content

Rigi Documentation

Capture HTML previews for web applications

This article explains how to capture HTML previews of a live web application, either manually or semi-automatically. To find out how to capture HTML previews for other application types, see the Capture previews for WPF applications guides.

Check our instruction video on capturing previews.

You can automate HTML preview capturing (for details, see the Automate the HTML preview capture process guide).

  1. Install the Rigi injector. For details, see the Install Rigi injector for Chrome guide.

  2. Open the Rigi project.

  3. In the project menu, select the Context > Previews.

    Capture1.png

  4. Click the Capture previews button.

    If the project already contains previews, the Capture previews button will be at the top right-hand corner of the display.

    The Capture HTML Previews popup is displayed.

    Capture2.png

    1. Enter or select the URL of the live application from which you want to capture HTML previews.

      Multiple URLs

      You can configure multiple URLs in the Project settings > URLs. For details, see the Project settings – URLs section. This can be helpful if you have multiple staging servers from which you would like to capture HTML previews.

    2. Select a hotkey to capture previews.

    No variables defined?

    If no variables are defined for this project, you will see a Configuration error message. Capturing previews is still possible, but the lack of variables must be defined in the project settings (for details, see the Project settings – Strings recognition section). In this case, the captured HTML previews might be useless and must be recaptured later.

    Configuration_error.png

  5. Click the Start capture button.

    If the Open Rigi viewer in a new browser tab popup is displayed, click the Open viewer button.

    Capture3.png

    To prevent this popup from displaying in the future, select the Do not show this message again checkbox.

    You will be directed to the Capture manager (for details, see the Capture manager section). The live application will be opened in another browser tab. 

    For maximum convenience, open the Capture manager and live application on two monitors. Alternatively, open them in two separate windows and place them side by side.

    Two_monitors.png

  6. Make sure the language with Rigi tokens is selected in the live application.

  7. In the Capture manager, click the Settings.png icon in the top left-hand corner of the screen. The Edit settings for newly created previews popup is displayed.

    Settings_for_previews__1.png

    Specify the prefix and tags for the previews you will capture and click the Save button.

  8. To capture previews, select one of the following options:

    Auto_capture.png

    • Use the toggle in the top left-hand corner of the screen to enable the AUTO-CAPTURE functionality.

      Delay capturing

      You can configure a delay before Rigi captures a page after detecting new strings. You can manually enter the required delay (in seconds) or select a pre-defined value. If a delay is specified, a counting-down timer will be displayed before the HTML preview is captured.

      Delaying.png

    • To capture a single preview, click the Capture preview button in the top right-hand corner of the screen.

  9. Select the browser tab with the live application.

  10. Navigate through the live application to reveal new strings.

    Example 20.

    Navigating to another page reveals 1 new string. The 'Auto capture' functionality automatically captures a preview and assigns it a name.

    Capturing_in_process.png


    The Rigi application connects only to the tab that was opened when you clicked the Start capture button. If you open another tab with your web application during capture, Rigi will not capture previews from it or interact with it in any way.

  11. Repeat until you locate all the new strings. The captured previews will get the prefix and tags defined in step 7.

    To change the preview name, prefix, or tags, click the Edit.png icon in the Capture manager.

    Rename_previews.png

  12. To stop capturing, click the close.png icon in the top right-hand corner of the Capture manager.

  13. In the popup, confirm your decision by clicking the Stop button. The live application will be closed.

  14. Now, you can review the captured previews, rename them, add or remove tags, or delete the unnecessary ones.

If no strings are recognized on the current page, a warning icon will be displayed in the top right-hand corner of the Capture manager.

No_strings_recognized.png

To find out what caused the issue, check the following settings:

  • Has the Rigi injector been installed and given full access to the application? For details, see the Install Rigi injector for Chrome guide.

  • Is the language with Rigi tokens loaded and selected in the application? For details, see the Prepare a staging server with Rigi tokens guide.

  • Whether the Rigi tokens have the same format as specified in the project. For details, see the Rigi tokens section.

  • Does the loaded page contain strings with Rigi tokens?

  • Has the file with the strings been added to the workspace? For details, see the Upload files to the workspace guide.