WebSocket Recording

Document created by Chris Sommerstad Employee on Jul 20, 2017Last modified by Dave Murphy on Sep 25, 2017
Version 3Show Document
  • View in full screen mode

Users can seamlessly record full-duplex WebSocket interactions between browser/client and server in SOASTA 53 or later.  WebSocket protocol connections are recorded in the CloudTest Recording Editor or directly into the clip from within the Clip Editor.

Since CloudTest auto-detects the WebSocket protocol using the same techniques used to record any HTTP(s) session it is not necessary to know the underlying details to successfully test your WebSocket site.

During HTTP(S) recording, CloudTest auto-detects the WebSocket format and, if found, any or all of the new objects listed in the section above. 
Our recording techniques will automatically create any or all of the necessary underlying target(s) alongside other targets that are created, whether recording via the Recording Editor or directly into the Clip Editor.

Since WebSocket recording is as seamless as normal HTTP(S) recording, we will cover recording before we get into more detail about the new objects.

For a fuller explanation of CloudTest's WebSocket implementation, refer to WebSocket Support.

In the following sections, this capability is demonstrated using the basic Echo Test at websocket.org. The steps to record either from the Recording Editor or Clip Editor are presented.

 

TIP: As with any HTTP(s) recording, run CloudTest in one browser, and then record traffic from a second browser (in our example, we use Safari). In the second browser, ensure that the cache is cleared before proceeding. Refer to Creating an HTTP Recording for more about best recording practices.

 

WebSocket Recording in the Recording Editor

 

Use the following Recording Editor steps to record WebSocket traffic from the example or your own WebSocket site.

 

  1. Start the Conductor to use for recording.
  2. In the first browser, launch CloudTest, and then navigate to Central > Recordings and click New.

 

 

  1. Once ready, click Record in the New HTTP(S) Message Recording box.
  2. With cache clear, use the second browser to launch your site (or use the Echo Test URL from above).

 

TIP: Give the recording a unique name, choose a Save Location, and then select a Conductor as you would for any recording

 

  1. Perform the WebSocket-relevant steps on your site. Or, if you're using the Echo Test example, do the following on the Echo Test demo page:
    • Click Connect
    • Click Send
    • Click Disconnect
    • Click Clear log
    • Check Use secure WebSocket (TLS)
    • Click Connect
    • Click Send
    • Click Disconnect
    • Click Clear log
  2. After the necessary steps are completed, click Stop on the Recording Editor toolbar.

 

Take a look at the resulting recording before converting it. For example, locate the first (WebSocket) Send action found in your recording. In the screenshot below, the sent text "Rock it with HTML5 WebSocket" is shown. Note the Protocol: ws value on the right.

 

  1. Once ready, click Convert to a Clip. The Convert to Clip Wizard appears. See Converting a Recording to a Clip for more information about this wizard.
  2. Proceed to the third page, Match Targets. Delete any non-relevant targets by selecting them individually and clicking the Delete (X) icon.
  3. On the fourth page, Create New Targets, note the individual targets for your WebSocket site. These targets utilize a new target type provided in this release, WebSocket.

 

 

Proceed to create the new test clip and on the Summary screen, click the Continue button that corresponds to "Go to the Test Clip Editor for additional clip editing". If the Clip Editor is not already in List view, change to List View at this time.

 

If you used the websocket.org Echo Test, your clip should look similar to the clip shown below. Note the HTML page created for the page itself, and the two Event Groups representing the two cycles through Connect/Disconnect.

 

 

  1. In Clip Editor, List View, expand the first Event Group to examine it.

 

 

  1. Note each of the following:
    • The Event Group container
    • The WebSocket Event Handler – As noted elsewhere, all WebSocket Event Containers must be in WebSocket Event Handlers.

    • The WebSocket Open Event (note that the Open Event and the Open Action are distinct from one another as shown below; where WebSocket Open1 is the action)
  • The WebSocket Send (echo.websocket.org, expanded below) – Locate and expand the first WebSocket Send (e.g. the same one from the Recording) and visually verify the Rock it with HTML5 WebSocket message, which is shown in the Data field
  • The WebSocket Close (echo.websocket.org (1) shown above and below)

    In subsequent sections, all of the WebSocket objects supported in SOASTA 53 or later are discussed. First, we'll show the Clip Editor recording steps. If you'd like to proceed with the play steps, you can skip the next section.

    WebSocket Recording in the Clip Editor

    Use the following Recording Editor steps to record WebSocket traffic from the example or your own WebSocket site.

    1. Start the Conductor to use for recording.
    2. In the first browser, launch CloudTest, and then navigate to Central > Clips and click New.
    3. Select Record HTTP from the Record drop-down menu.
    4. Give the recording a unique name, choose a Working Directory, and select a Conductor as you would for any recording.

    1. With its cache cleared, open your site (or use the Echo Test URL from above) in the second browser.
    2. Perform the WebSocket-relevant steps on your site. Or, if you're using the Echo Test example, do the following on the Echo Test demo page:
      • Click Connect
      • Click Send
      • Click Disconnect
      • Click Clear log
      • Check Use secure WebSocket (TLS)
      • Click Connect
      • Click Send
      • Click Disconnect
      • Click Clear log

    After the necessary steps are completed, click Stop on the Clip Editor toolbar. The resulting clip varies from the Recording Editor and Convert Clip version already created above only in the filtering (we deleted some unwanted targets along the way in that version).

    If you used the websocket.org Echo Test, your clip should look similar to the clip shown below. Note the HTML page created for the page itself, and the two Event Group's representing the two cycles through Connect/Disconnect.

    1. In Clip Editor, List View, expand the first Event Group to examine it.
    2. Note each of the following:
      • The Event Group container
      • The WebSocket Event Handler – As noted elsewhere, all WebSocket Event Containers must be in WebSocket Event Handlers.
      • The WebSocket Open Event (note that the Open Event and the Open Action are distinct from one another as shown below; where WebSocket Open1 is the action)
      • The WebSocket Send (echo.websocket.org, expanded below) – Locate and expand the first WebSocket Send (e.g. the same one from the Recording) and visually verify the Rock it with HTML5 WebSocket message, which is shown in the Data field
      • The WebSocket Close (echo.websocket.org (1) shown above and below)

    In subsequent sections, all of the new WebSocket objects recorded above are detailed.

    WebSocket Target Type

    The new target type appears in the Target Definition Wizard alongside other target types.

    TIP:  Since CloudTest will auto-detect WebSocket targets. It is not necessary to do manual target creation in most cases.

    For manual creation of WebSocket targets, a URL must be provided.

    WebSocket Target Connection defaults are the same as those found in HTTP targets:

    • Socket read timeout
    • Connection timeout
    • DNS options
    • Max received content length

    Note: Unlike HTTP targets, WebSocket targets lack the concept of "operations," including no GET, POST, PUT, DELETE, or HEAD, and so, none are displayed. Instead the WebSocket target recognizes WebSocket Open, WebSocket Send, WebSocket Message, and WebSocket Close. Since the conventional HTTP operations are not relevant, the WebSocket target UI is a single panel with no operations tree (as found in HTTP targets).

    If a WebSocket target is selected in the Clip Editor lower panel, Messages/Actions tab, the new clip elements, including the actions WebSocket Open, WebSocket Send, WebSocket Message, and WebSocket Close, are shown.

    Manually Adding WebSocket Clip Elements to a Test Clip

    SOASTA recommends recording your WebSocket session. You can then make any additions, deletions, or other changes—including application of Session Templates—once you've captured your test case via recording.

    In order to add WebSockets to anew or existing test clip manually, you must first add an Event Group. The Event Group contains a Target Event Handler that contains the event containers. The Event Group does not contain the event containers directly.

    • Add an Event Group first
    • Then, add the subsequent WebSocket clip elements as you would any clip elements—either by selecting an insertion point in the workspace and using double click to add, or, by dragging the clip element into place. Use the Clip Editor lower panel to access clip element properties.

    TIP:  The Clip Editor Status Indicator presents a friendly reminder if a WebSocket action is not dropped into an Event Group.

    The generic Event Group added here contains one each of the six event handlers, but additional event handlers can be added. Use the context menu's Add a WebSocket Event Handler command to do so whenever the Event Group is selected. An Event Group can contain any number of WebSocket Event Handlers.

    The following restrictions apply when building or modifying an Event Group for WebSocket testing:

    • An Event Group cannot be nested inside another Event Group.
    • Any WebSocket action must be directly or indirectly inside an Event Group.
    • For WebSocket Message, it must reside in one of the six event containers
    • For WebSocket Open, it must have a target
    • For WebSocket Close, it must have a target
    • For Wait, it must have a wait expression tag

    • Right-click an Event Container to add a WebSocket Message to it.

Attachments

    Outcomes