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?
Forums Home / Spread / SpreadJS
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 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