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);