Integrate Checksum SDK

Checksum collects session data using a lightweight JavaScript SDK that is loaded onto the tested web application and deployed on one of the company’s environments, preferably production, but you can also integrate the SDK in your staging or testing environment, or even generate tests without integrating the SDK. Our recommendation is to integrate our SDK on both production and staging/testing.

Note

Checksum uses the SDK to discover test flows and train the model to learn how to test your app. Integrating on staging only, or not integrating the SDK at all, may impact performance, depending on how complex your app is.

Without SDK integration, Checksum can still generate tests but will not be able to detect test flows. You can still write flows manually using plain English.

SDK Integration

1. Add Checksum SDK To Your Main HTML

<script src="https://cdn.checksum.ai/checksum-sdk-min-0.3.js"></script>

2. Initialize Checksum as soon as your app is mounted.

window.checksumai?.init("SDK_KEY");

3. [Optional] Identify user login and logout

When the user logs in, identify the user (you can use any consistent ID. Checksum does not need to know the user identity)

window.checksumai?.identify(
    'user_unique_id', // distinct_id, required
    {
        userProperty: 'value1', // optional user property
        anotherUserProperty: 'value2’ // another optional user property
    });

When the user logs out, reset

window.checksumai?.reset();

Note

Identifying user login and logout is especially important when the same device might be used by multiple users (for example, staging/testing environment).

Data Privacy

Simply explained, without any filters or masks, the collection includes data necessary to reconstruct the web page. This includes assets such as CSS files, text, image URLs, HTML elements and inner text (in JSON format), and user activity like clicks and types.

Privacy controls

However, we do offer very strong privacy tools to minimize user data processed by Checksum. There are a few levels of protection:

1. Hashing: Checksum can hash all inner text and input values automatically for all elements on the client side, so the raw data doesn’t leave your user browsers.
2. Masking: Checksum automatically replaces inner text with “*” automatically for sensitive elements like passwords, zip code, SSN, email addresses, any text with only numbers. You can also customize which elements are masked.
3. Blocking: On very rare occasions, hashing and masking the inner text and inputs is not enough. For example, when sensitive data is added to HTML attributes or when just the interaction with an element might be sensitive regardless of the inner text. In that case, you can manually block the entire elements and all related events.

By default, Checksum does not hash any text and only masks passwords. You can customize this behavior in Checksum by passing a sessionRecording object to your init function as follows:

{
  masking?: {
    // If true, checksum will mask  sensitive text, such as phone numbers, SSNs, zip codes, credit card info or any field that contains only numbers.
    // Passwords are masked automatically regardless.
    maskSensitiveText?: boolean;
    // Provide a custom masking function so you can granularly control which elements will be masked
    customMaskFunction?: (value: string, element?: HTMLElement) => string;
  };
  hashing?: {
    // Hash all input fields
    hashAllInputs?: boolean;
    // Hash all text fields
    hashAllText?: boolean;
  };
};

Hashing and Masking Example

A typical configuration, for example, would be to mask all sensitive elements and hash all text and inputs in production. For that, initialize Checksum as follows

const isProduction

window.checksumai?.init(
  "<SDK_KEY>",
  {
    sessionRecording: {
      hashing: {
        hashAllText: isProduction,
        hashAllInputs: isProduction,
      },
      masking: {
        maskSensitiveText: isProduction,
      },
    },
  },
  {}
); // pass empty options (internal use)

Note

If you choose to use privacy controls, we recommend that at least one environment will be unhashed. For example, mask production but have your staging use default configs.

Custom Masking Function

If you would like to customize which elements are masked, you can pass a custom masking function. For example, the code below will mask all elements of type search

checksumai?.init(
  "SDK_KEY",
  {
    sessionRecording: {
      masking: {
        customMaskFunction: (value, element) => {
          if (element?.attributes["type"]?.value === "search") {
            // If this is a search input, replace input with stars
            return "*".repeat(value.length);
          }
          // Otherwise, return it as is
          return value;
        },
      },
    },
  },
  {}
);