How to get spreadjs's cellvalue under shadow root in selenium

Posted by: kaisaint on 6 December 2023, 10:56 pm EST

  • Posted 6 December 2023, 10:56 pm EST

    We use selenium for automated testing. The spreadjs on the web page is under the shadow root. How can I get the value of the cell in spreadjs under the shadow root?

  • Posted 7 December 2023, 5:39 pm EST

    Hi,

    The SpreadJS is drawn on the canvas and you need to get the workbook and worksheet instance to get/set the value of a Cell. You could expose the “GC” object to the window of the testing environment (the environment where the tests are executed).

    Later, you could use the following code snippet to get the value of the Cell:

     /* find spread instance and save on window object for easy access */
    js.ExecuteScript("window.testSpread = GC.Spread.Sheets.findControl(document.querySelector(\"[gcuielement=\'gcSpreaad\']\"))");
    /* get value of cell 0, 0 of active sheet */
    js.ExecuteScript("return window.testSpread.getActiveSheet().getValue(0,0);");

    You may refer to the following Forum case that discuses the same query: https://developer.mescius.com/forums/spreadjs/selenium-automation-for-spreadjs-sheets

    If you still face any issues, kindly do share a working sample with us so that we could investigate further the issue.

    Regards,

    Ankit

  • Posted 8 December 2023, 2:41 am EST

    it’s under shadow root,we cannot get the workbook instance using above code

  • Posted 11 December 2023, 2:31 am EST

    Hi,

    I am not sure about your implementation. Could you kindly let us know how exactly you have implemented under the shadow root.

    As per my understanding, you cannot modify the elements under the shadow dom, however, you could get the elements and by the above code, you could get the SpreadJS instance.

    If not, you could expose the “spread” object directly to the window on your testing environments and from the spread instance, you could get the worksheet and the cell value.

    Further, if you could share the sample with your implementation, it would be very helpful to provide the solution. Also, I am not sure about the framework that you are using. Also, kindly provide the information if you are using Selenium with Java or .NET.

    I request you to kindly share us a minimal working sample, so that we could have a understanding of your sample and could assist you accordingly.

    Regards,

    Ankit

  • Posted 13 December 2023, 11:10 pm EST - Updated 13 December 2023, 11:17 pm EST

    This is the result information of the page. What I want to find is the content of the red box. This is a spreadjs. I need to find it and double-click the cell. I use selenium with java

  • Posted 14 December 2023, 8:06 pm EST - Updated 14 December 2023, 8:11 pm EST

    Hi,

    The first step in the Automation is to get the spread(workbook) instance. You could get the SpreadJS intance using the following code snippet:

    let spread = GC.Spread.Sheets.findControl(document.querySelector(‘div[gcuielement=“gcSpread”]’));

    If there is some restriction that you cannot access the SpreadJS element (might be because of the Shadow Dom that you have mentioned), you could directly expose the spread(workbook) instance to the window of the testing environment, and then access the spread instance from the window.

    After, you get the spreadinstance, you could get the worksheet instance using the “getSheet()/getActiveSheet()” method. You could use the “getCellRect()” method to get the co-ordinates of a cell. Once you get the cell co-ordinate, use the Selenium APIs to perform the double click.

    You could refer to the following gif that shows getting the cell coordinates using the spread instance. Here, “spread” object is exposed to the window using window[“spread”] = spread.

    References:

    getActiveSheet() method: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Workbook#getactivesheet

    getCellRect() method: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#getcellrect

    Regards,

    Ankit

  • Posted 18 December 2023, 12:16 am EST

    let spread = GC.Spread.Sheets.findControl(document.querySelector(‘div[gcuielement="gcSpread”]’));

    We need to importthe js file of spreadjs, otherwise it will prompt that GC does not exist, but under the shadow root, we need to execute another js code first. How can we merge the js code executed first with the js file of spreadjs imported?

  • Posted 18 December 2023, 9:44 pm EST

    Hi,

    I am not sure about your implementation of the SpreadJS in your application and the structure/framework you are using. Could you kindly share us a minimal working sample so that we could investigate the sample at our end and could assist you accordingly?

    Based on your comment, you could first include the reference for the SpreadJS (either through tag or using ‘import’). This will not execute your customer SpreadJS Commands. Then call your function containing the js code you want to execute first and then call the code related to the SpreadJS.

    However, without having a sample and better context for the issue, it would be really hard for us to comment on the possible solution. Therefore, I request you to kindly share a sample with us. This will help us in investigation and to resolve your issue quickly.

    Regards,

    Ankit

Need extra support?

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

Learn More

Forum Channels