Testing
Chart View

Chart View (Beta)

This feature is available in the paid version.
  • The feature is useful for Response Data Visualisation
  • Create charts or tables from response using tc.chartHTML() from the Tests tab scripting
  • When you pass data to function tc.chartHTML(template, data), the data is available in chart_data global variable
  • The feature is in Beta, please test and let us know feedback
var template = `
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>
 
    <div id="output"></div>
    <script id="entry-template" type="text/x-handlebars-template">
          <div class="entry">
            <h2>{{first_name}}</h2>
            <div class="body">
              {{email}}
            </div>
          </div>
        </script>
    <script>
    
    var source = document.getElementById("entry-template").innerHTML;
    var templateData = Handlebars.compile(source);
 
    document.getElementById("output").innerHTML = templateData(chart_data[0]);
    </script>
`;
 
var data = tc.response.json.data;
tc.chartHTML(template, data);

Convert JSON Response to Html Table

Here is generic example below to convert any response JSON array to HTML Table

You can modify the style as needed

var response = tc.response.json;
 
var html = `
    <style>
      body {
        font-size: 13px;
        font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
 
      table {
        width: 100%;
        box-sizing: border-box;
        border-collapse: collapse;
        border-spacing: 0;
      }
 
      td,
      th {
        padding: 0;
      }
 
      th, td {
        padding: 4px 6px;
        text-align: left;
        border-bottom: 1px solid #E1E1E1;
      }
 
      th:first-child,
      td:first-child {
        padding-left: 0;
      }
 
      th:last-child,
      td:last-child {
        padding-right: 0;
      }
 
     /* for dark mode use .vscode-dark to override */
     .vscode-dark th, .vscode-dark td {
        border-bottom: 1px solid #555;
      }
  
  </style>
 
    <div id="container"></div>
    
    <script>
         // get the container element
         let container = document.getElementById("container");
         
         var cols = Object.keys(chart_data[0]);
 
          var headerRow = '<tr>';
          var bodyRows = '';
      
          cols.map(function(col) {
              headerRow += '<th>' + col + '</th>';
          });
      
          headerRow += '</tr>';
      
          chart_data.map(function(row) {
              bodyRows += '<tr>';
      
              cols.map(function(colName) {
                  bodyRows += '<td>' + row[colName] + '</td>';
              })
      
              bodyRows += '</tr>';
          });
      
          var tabledata=  '<table>' + headerRow + bodyRows + '</table>';
         container.innerHTML = tabledata; // set table html
      
   </script>`
   
   tc.chartHTML(html, response);

Dark Mode Styles

  • For dark mode use .vscode-dark to override styles, see example below
    /* for dark mode use .vscode-dark to override */
     .vscode-dark th, .vscode-dark td {
        border-bottom: 1px solid #555;
      }

Copying text to clipboard

The chat view is in an iframe and has no access to navigator.clipboard. You can copy text to the clipboard by using parent.postMessage() to send a message to the parent window to copy the text to the clipboard.

parent.postMessage({ command: 'copy-text', "text": "textdatatocopy" });

The example below demonstrates how to copy text to the clipboard.


Clipboard Example
var html = `
<div id="container"></div>
 
<script>
// get the container element
let container = document.getElementById("container");
 
// Create a new button element
var button = document.createElement('button');
button.innerHTML = 'Copy to clipboard';
 
// Add an event listener for the click event
button.addEventListener('click', function() {
    // Use the Clipboard API to write text
    try{
 
      parent.postMessage({command:'copy-text', "text": "textdata"}); 
 
      // Create a new paragraph element
      var p = document.createElement('p');
      p.innerHTML = 'Text copied to clipboard';
 
      // Append the paragraph to the body of the document
      document.body.appendChild(p);
  } catch(error) {
 
      // Create a new paragraph element
      var p = document.createElement('p');
      p.innerHTML = 'Failed to copy text' + error;
 
      // Append the paragraph to the body of the document
      document.body.appendChild(p);
  }
});
 
// Append the button to the body of the container
container.appendChild(button);
</script>
`
 
tc.chartHTML(html);