How to get data from Canvas

Posted by: jothivignesh.c on 22 April 2019, 11:49 pm EST

  • Posted 22 April 2019, 11:49 pm EST

    Hi Team,

    I am trying to fetch the data from our Application. In our application SpreadJS is showing as Canvas on DOM Structure. I am unable get any cell data. Could any one help me on this?

    Thanks in Advance.
  • Replied 23 April 2019, 4:53 am EST

    Using jQuery : var spread = $('#element-used-to-load-spread').data('workbook')
  • Replied 23 April 2019, 6:37 pm EST

    Hi,

    adisa.craig Thanks for the reply.

    I am using Selenium for Automation. Any idea how to get data using Selenium. While inspecting in DOM it is showing as Canvas.

  • Marked as Answer

    Replied 23 April 2019, 11:47 pm EST

    Hi,

    In case to Selenium, you need to get the spreadInstance and then use its getValue() method to get the value of a cell.
    Please refer to the following code snippet:
    var webDriver = new OpenQA.Selenium.Chrome.ChromeDriver();
    webDriver.Navigate().GoToUrl("http://localhost/test.html");
    var hostDiv = webDriver.FindElement(By.Id("spreadDiv"));
    //Create spreadJS
    webDriver.ExecuteScript("window.testSpread = new GcSpread.Sheets.Spread(arguments[0]);", hostDiv);
    //Set Cell Value
    webDriver.ExecuteScript("window.testSpread.getActiveSheet().setValue(0,0,'1');");
    //Get cell value
    object value = webDriver.ExecuteScript("return window.testSpread.getActiveSheet().getValue(0,0);");
    Assert.AreEqual("1", value);


    Regards
  • Replied 24 April 2019, 1:11 am EST

    sharad.tomer said:
    Hi,

    In case to Selenium, you need to get the spreadInstance and then use its getValue() method to get the value of a cell.
    Please refer to the following code snippet:
    var webDriver = new OpenQA.Selenium.Chrome.ChromeDriver();
    webDriver.Navigate().GoToUrl("http://localhost/test.html");
    var hostDiv = webDriver.FindElement(By.Id("spreadDiv"));
    //Create spreadJS
    webDriver.ExecuteScript("window.testSpread = new GcSpread.Sheets.Spread(arguments[0]);", hostDiv);
    //Set Cell Value
    webDriver.ExecuteScript("window.testSpread.getActiveSheet().setValue(0,0,'1');");
    //Get cell value
    object value = webDriver.ExecuteScript("return window.testSpread.getActiveSheet().getValue(0,0);");
    Assert.AreEqual("1", value);


    Regards


    Hi,

    Could you please help me on how to get the Spread Instance?
    I am completely new to this.

    Here below is our DOM Structure for your reference:

    <canvas id="dataview-spreadJsvp_vp" width="2014" height="1794" style="width: 1007px; height: 897px; cursor: default;">You need a browser which full supports HTML5 Canvas to run SpreadJS</canvas>


    Thanks.
  • Replied 24 April 2019, 11:08 pm EST

    Hi,

    You could get the spreadInstance using the findControl method. In the findControl method, we need to pass the host element for the spread. HostElement is the element which is passed in the Workbook constructor when creating the workbook/spreadSheet. Based on the code snippet provided in your application, hostElement for the spread should be the element with id 'dataview-spreadJs'.
    Please refer to the following code snippet:
    // get hostElement
    var hostDiv = webDriver.FindElement(By.Id("dataview-spreadJs"));
    // get spreadInstance and save it on window object for easy access
    webDriver.ExecuteScript("window.testSpread = new GC.Spread.Sheets.findControl(arguments[0]);", hostDiv);
    // get Cell value of cell 0,0
    var value = webDriver.ExecuteScript("return window.testSpread.getActiveSheet().getValue(0,0);");
    // test value
    Assert.AreEqual("1", value);


    Further please let us know in which environment you are using Selenium, like is it java or nodeJS. Also if the issue persists for you, please share a small sample replicating the issue so that we could investigate it further.

    Regards
  • Replied 17 June 2019, 6:48 pm EST

    Hi Team,

    I am trying to automate a spreadjs web application using protractor. I am not able to find any cell, row, column etc on spreadjs using locators as it is inside a canvas.

    Below is the example:

    <div id="vp" style="width: 652px; height: 129px;"><canvas id="vp_vp" width="652" height="129" style="width: 652px; height: 129px; cursor: default;"> </canvas></div>

    Please suggest how to find an element inside a canvas.

    Also kindly suggest which tool should I use to automate(protractor/selenium) spreadjs web application which is a js website.


    Regards,
    Aseem Malhotra
  • Replied 18 June 2019, 3:29 pm EST

    Hi Aseem,

    For automated testing, first, you need to get the instance of the spreadjs Workbook object and then use the various methods like getValue(), getColumnCount() etc provided by the spread to test various functionalities.
    We have prepared a sample to demonstrate the process using protractor. Please refer to the attached sample and let us know if you face any issues. In the attached sample, first, run 'npm install' command to install protractor and then run 'npm run test' command to execute the test cases.
    • SpreadJS API: http://help.grapecity.com/spread/SpreadSheets12/webframe.html#SpreadJS.html

    Also, SpreadJs doesn't require any special testing framework or tool so you may use any testing tool of your liking.

    Regards
    Sharad
    spread-selenium-protractor.zip
  • Replied 25 June 2019, 1:43 am EST

    Hi Team,

    I am using the below code

    js.executeScript("return window.testSpread.getActiveSheet().setValue(" + ri + "," + ci + ",\"22,00\");");


    to set values in SpreadJS. I am able to set the values. But it is not saved. After saving the old value remains. Could any one help me on this.

    Thanks in Advance
  • Replied 25 June 2019, 3:23 pm EST

    Hi,

    This post seems duplicate. Please refer to the following thread:
    https://www.grapecity.com/forums/spread-sheets/update-value-in-spreadjs-u

    Regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels