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
  • Replied 6 February 2020, 12:24 am EST

    Hi Sharad,

    I am trying to implement @grapecity/spread-sheets in a typescript file, and trying to execute GC.Spread.Sheets, it throws below error : -

    [12:38:08] I/launcher - Running 1 instances of WebDriver
    [12:38:08] I/direct - Using ChromeDriver directly...

    DevTools listening on ws://127.0.0.1:59963/devtools/browser/7d2916d2-ab5b-42a9-ad46-67ec1eec652b
    [12:38:20] E/launcher - Error: ReferenceError: document is not defined

    Attached is the structure of libraries.
    And following is the implementation of protractor in vs code : -
    import * as GC from '@grapecity/spread-sheets';
    fit('test GC', () => {
    browser.waitForAngularEnabled(false);
    browser.get('C:/Users/Downloads/spread_selenium_protractor/public/protractorSample.html');

    let isSpreadCreated = browser.executeScript(function (id) {
    let spreadInstance = GC.Spread.Sheets.findControl(id);
    return !!spreadInstance;
    }, 'ss');
    expect(isSpreadCreated).toBeTruthy();
    });

    Had been struggling with the issue for almost a week now, did not any references on the internet for .ts files. Please help, it is really urgent.

    Many thanks,
    Bhuvnesh

    sharad.tomer said:
    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 6 February 2020, 9:27 pm EST

    Hi Bhuvnesh,

    Could you please share a small sample replicating the issue that we could investigate

    Regards
    Sharad
  • Replied 9 February 2020, 2:13 am EST

    Hi Sharad,

    Please find attached the zip.

    Regards,
    Bhuvnesh

    sharad.tomer said:
    Hi Bhuvnesh,

    Could you please share a small sample replicating the issue that we could investigate

    Regards
    Sharad
    workspace.zip
  • Replied 9 February 2020, 8:23 pm EST

    Hi Bhuvnesh,

    The issue in the attached project is that you are importing the GC module in the spec file, now spec executes in node context instead of the browser where the document object is not available. So rather than importing the GC module in the spec file, we should use the GC object exposed on the window context in the sample. Update the myspec.ts file as below and that should fix the issue:
    let isSpreadCreated = browser.executeScript(function (id) {
    let spreadInstance = window["GC"].Spread.Sheets.findControl(id);
    return !!spreadInstance;
    }, 'ss');
    expect(isSpreadCreated).toBeTruthy();
  • Replied 10 February 2020, 5:13 pm EST

    Hi Sharad,

    Now I get below error : -

    Message:
    Failed: javascript error: Cannot read property 'Spread' of undefined
    (Session info: chrome=80.0.3987.87)
    (Driver info: chromedriver=79.0.3945.16 (93fcc21110c10dbbd49bbff8f472335360e31d05-refs/branch-heads/3945@{#262}),platform=Windows NT 10.0.17763 x86_64)
    Stack:
    JavascriptError: javascript error: Cannot read property 'Spread' of undefined
    (Session info: chrome=80.0.3987.87)
    (Driver info: chromedriver=79.0.3945.16 (93fcc21110c10dbbd49bbff8f472335360e31d05-refs/branch-heads/3945@{#262}),platform=Windows NT 10.0.17763 x86_64)

    Please suggest.

    Thanks,
    Bhuvnesh
    sharad.tomer said:
    Hi Bhuvnesh,

    The issue in the attached project is that you are importing the GC module in the spec file, now spec executes in node context instead of the browser where the document object is not available. So rather than importing the GC module in the spec file, we should use the GC object exposed on the window context in the sample. Update the myspec.ts file as below and that should fix the issue:
    let isSpreadCreated = browser.executeScript(function (id) {
    let spreadInstance = window["GC"].Spread.Sheets.findControl(id);
    return !!spreadInstance;
    }, 'ss');
    expect(isSpreadCreated).toBeTruthy();
  • Replied 10 February 2020, 11:14 pm EST

    It looks like your in your main application spread-sheets is added as npm modules. In this case, we also need to expose the GC module on the window object from our main application.
    Add the following line in your main.js file of the application(actual project file, not in specs file):
    import * as GC from "@grapecity/spread-sheets";
    window["GC"] = GC;

  • Replied 11 February 2020, 5:05 pm EST

    Hi Sharad,

    Placed it in onPrepare of conf.js, however I am getting the same error - "document is not defined".

    Please suggest.

    Thanks,
    Bhuvnesh

    sharad.tomer said:
    It looks like your in your main application spread-sheets is added as npm modules. In this case, we also need to expose the GC module on the window object from our main application.
    Add the following line in your main.js file of the application(actual project file, not in specs file):
    import * as GC from "@grapecity/spread-sheets";
    window["GC"] = GC;

  • Replied 30 March 2020, 5:43 am EST

    Hello everybody,

    how do i use findcontrol in version 9?
  • Replied 30 March 2020, 5:29 pm EST

    Hi,

    You may use the findControl method in SJS 9 in the following way:
    var spread = GcSpread.Sheets.findControl(document.getElementById("idOfSJSDiv"));
  • Replied 30 March 2020, 9:36 pm EST

    sharad.tomer said:
    Hi,

    You may use the findControl method in SJS 9 in the following way:
    var spread = GcSpread.Sheets.findControl(document.getElementById("idOfSJSDiv"));


    Good Morning,

    I used the command you sent me, but an error occurred.

    below the SpreadJS html
    <canvas id="spreadsheetDocumentvp_vp" rendermethod="auto" width="625" height="604" style="width: 625px; height: 604px; cursor: default;">You need a browser which full supports HTML5 Canvas to run SpreadJS</canvas>

    below the python code with selenium I want to run
    browser.execute_script("var spread = GcSpread.Sheets.findControl(document.getElementById('spreadsheetDocumentvp_vp'));alert(spread.getSheetCount());")

    below the error returned by...
    JavascriptException: Message: javascript error: Cannot read property 'getSheetCount' of undefined
    (Session info: chrome=80.0.3987.149)

    please inform me where is my error :-(
  • Replied 31 March 2020, 5:18 pm EST

    The id mentioned in the code snippet is not the id of the actual canvas element but the id of the element which was passed as the host element to the spread constructor.
    ex, If the spread is constructed like
    var spread = new GcSpread.Sheets.Spread(document.getElementById('spreadsheetDocument'), { sheetCount: 3 });


    Then you may use the findControl as follows:
    var spread = GcSpread.Sheets.findControl(document.getElementById('spreadsheetDocument');

    Hope this clears, please let us know if you still have some confusion.
  • Replied 1 April 2020, 1:05 am EST

    sharad.tomer said:
    The id mentioned in the code snippet is not the id of the actual canvas element but the id of the element which was passed as the host element to the spread constructor.
    ex, If the spread is constructed like
    var spread = new GcSpread.Sheets.Spread(document.getElementById('spreadsheetDocument'), { sheetCount: 3 });


    Then you may use the findControl as follows:
    var spread = GcSpread.Sheets.findControl(document.getElementById('spreadsheetDocument');

    Hope this clears, please let us know if you still have some confusion.


    Good Morning.

    your tip worked, thanks.
    for now without further doubts
Need extra support?

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

Learn More

Forum Channels