How to get page source data from div HTML tag?

Question

Is there a method in Intern/Leadfoot to get source content or at least a raw text from <div> HTML tag?

I looked for it in the following reference but without success. https://theintern.github.io/leadfoot/module-leadfoot_Command.html

Below you can see a piece of my code. It is executed without errors. But console.log(text) shows undefined.

/*global define*/
define(function (require) {

  function Datasource (remote) {
    this.remote = remote;
  }

  Datasource.prototype = {
    constructor: Datasource,

    queryDatasource: function (kibiUrl, title, description, datasource, query) {
      return this.remote
        .get(require.toUrl(kibiUrl))
        .setFindTimeout(3000)
        .sleep(3000)
        .findByCssSelector('input[ng-model="query.title"]')
          .clearValue()
          .type(title)
          .end()
        .findByCssSelector('input[ng-model="query.description"]')
          .type(description)
          .end()
        .findByCssSelector('option[label="'+ datasource +'"]')
          .click()
          .end()
        .findByName('sqlQuery')
        .findByClassName('ace_text-input')
          .type(query)
          .end()
        .findByXpath('//button[@class="btn btn-success"]')
          .click()
          .end()
        .sleep(3000)
        .acceptAlert()
          .end()
        .findByCssSelector('div[class="html_preview_content"]')
        .getVisibleText()
        .then(function (text) {
          console.log("SOURCE");
          console.log(text);
          return text;
        });
    }

  };

  return Datasource;
});

It is visible from the start. There is only one div with html_preview_content class on the page.

It is empty at start. <div class="html_preview_content" kibi-dynamic-html="holder.htmlPreview"></div>

A table is created after the button clicked. And I want to get this table.

<div class="html_preview_content" kibi-dynamic-html="holder.htmlPreview">
   <style class="ng-scope">thead.custome-header thead{color:#black;}</style>
   <a href="javascript:showHide('ad90128b-0275-4f95-bda9-78e9a5e9771f');" id="button-ad90128b-0275-4f95-bda9-78e9a5e9771f" class="snippetShowHideButton ng-scope">- Hide </a><span class="ng-scope"> </span>
   <span class="snippetLabel ng-scope">Preview</span><span class="ng-scope"> (15) </span>
   <div id="cont-ad90128b-0275-4f95-bda9-78e9a5e9771f" style="display:block" class="ng-scope">
      <table class="table table-condensed custome-header">
         <thead>
            <tr>
               <th>Tables_in_crunchbase</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>article</td>
            </tr>
            <tr>
               <td>article_company</td>
            </tr>
            <tr>
               <td>company</td>
            </tr>
            <tr>
               <td>company_city</td>
            </tr>
            <tr>
               <td>company_competitor</td>
            </tr>
            <tr>
               <td>company_countrycode</td>
            </tr>
            <tr>
               <td>company_geolocation</td>
            </tr>
            <tr>
               <td>company_investment</td>
            </tr>
            <tr>
               <td>company_statecode</td>
            </tr>
            <tr>
               <td>investment</td>
            </tr>
            <tr>
               <td>investment_investor</td>
            </tr>
            <tr>
               <td>investor</td>
            </tr>
            <tr>
               <td>investor_city</td>
            </tr>
            <tr>
               <td>investor_countrycode</td>
            </tr>
            <tr>
               <td>investor_statecode</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

Answer 1

You can use .findByCssSelector('div[class="html_preview_content"]').getProperty("outerHTML") to get the source data of your html_preview_content div.

Or .getProperty("innerHTML") for the source data inside that div