Cypress SpreadJS automation help

Posted by: umair.sayed on 3 December 2024, 2:48 am EST

umair.sayed

Post Options:
Link
Copy

Posted 3 December 2024, 2:48 am EST - Updated 3 December 2024, 3:20 am EST

Hello , I have an application that is on SpreadJs 17 and i wanted to automate using cypress , however I am haveing some challenges related to that

*Unable to get cell data and sheet data

*Below code is adding another blank excel and accessing that on top of my component of SpreadJS

*If you see below screenshot it shows another BLANK Excel gets added below my excel

**Please help me in understanding why there is another excel and how to fix this issue

**

Attaching code below also cypress logs which tells that it is getting cell data of New Blank excel that is being created

License Key = I have it stored

import * as GC from “@mescius/spread-sheets”;

window[“GC”] = GC;

GC.Spread.Sheets.LicenseKey=SPREADJSKEY

[code] cy.document().then((doc) => {

// Wait for the spread container to be available

cy.get(‘#ss’, { timeout: 10000 }).should(‘exist’); // Waits for the element with ID ‘ss’ to exist

//cy.xpath(“//span[normalize-space()=‘Breaks’]”).click()

cy.wait(4000)

// Now we know the container exists

const spreadContainer = doc.getElementById(“ss”);

cy.log(“Spread Container:”, spreadContainer);

  if (spreadContainer) {
      // Initialize the SpreadJS Workbook
      const spread = new GC.Spread.Sheets.Workbook(spreadContainer);

      // Wait for workbook initialization by checking for a valid sheet

      cy.log(JSON.stringify(spread),"spread stringify")
      cy.wrap(spread).then(() => {
          const sheet = spread.getActiveSheet();
          expect(sheet).to.not.be.null;

          cy.log(spread.getSheet(1),"sheet selected")

          // Access and log cell data
          const cellData = sheet.getCell(4, 6).text();
          cy.log("Active Sheet Name:", sheet.name());
          cy.log("sheet Count:", sheet.getSheetCount());
          cy.log("Column Count:", sheet.getColumnCount());
          cy.log("Cell Data:", cellData);
      });
  }



});[/code]

priyam.kushwaha
- Post Options:
- Link
  Copy
Posted 4 December 2024, 6:10 am EST

Hi,

I attempted to replicate the behavior on my end but was unable to do so. No extra blank workbook appeared, and I could use the Spread instance without any issues. Refer to the attached sample, “Sample.zip”: Sample.zip

To assist you better, could you provide a minimal working sample along with the steps to replicate the behavior you observed? Alternatively, you can modify the existing sample to demonstrate the issue. Additionally, a GIF or video illustrating the problem would be highly helpful.

Regards,

Priyam
umair.sayed
- Post Options:
- Link
  Copy
Posted 4 December 2024, 8:46 am EST - Updated 4 December 2024, 8:51 am EST

Hello When i tried code as per your zip file im getting error with that approach can you please guide what could be the issue ?

import * as GC from “@mescius/spread-sheets”;

let appWindow = null,

spread = null;

appWindow = cy.window();

spread = appWindow.GC.Spread.Sheets.findControl(“ss”);

let activeSheet = spread.getActiveSheet();

let valInCellA1 = activeSheet.getValue(10, 3);

cy.log(“activecell”,valInCellA1)

Getting error as Undefined as i saw video it worked for you but getting Error with this approach

779×679 37 KB
priyam.kushwaha
- Post Options:
- Link
  Copy
Posted 5 December 2024, 2:50 am EST - Updated 5 December 2024, 2:56 am EST

Hi,

After reviewing your code, I believe the issue arises when using the cy.window method without awaiting its resolution. Since this method takes some time to fetch the window object, attempting to access it before resolving can result in an error. I was able to replicate this behavior by omitting await with cy.window, leading to the same error in my sample. Please refer to the attached GIF (“Steps.gif”) for reference.

I suggest using the await keyword to ensure the window object is fully resolved before accessing it. This approach is demonstrated in the attached image (“CodeImage.png”) and the previously shared sample for your reference.

1092×851 46.6 KB

If the issue persists, could you provide a minimal working sample with the steps to reproduce the observed behavior or modify the existing sample accordingly? This will help me investigate the problem more thoroughly. Additionally, sharing a GIF or video illustrating the issue would be helpful. Without a sample, pinpointing and debugging the issue becomes challenging.

Regards,

Priyam
umair.sayed
- Post Options:
- Link
  Copy
Posted 5 December 2024, 3:36 am EST - Updated 5 December 2024, 3:41 am EST

Hello , Thanks for the response

I added await in window function also made by func async however I am still getting same error

I am using my window function after I my webpage renders spreadJS component as i have to login and navigate to that page and after that Im using my window and spreadJS function

Attaching my code below please advise what to do

const SPREADJSKEY = “Mykey”

let appWindow = null,

spread = null;

GC.Spread.Sheets.LicenseKey=SPREADJSKEY

**This is present in My IT block and above is in the global level

**

appWindow = await cy.window();

spread = appWindow.GC.Spread.Sheets.findControl(“ss”);

let activeSheet = spread.getActiveSheet().getCellRect(0,0,-1,1)

cy.get(spread.getHost()).click(activeSheet.x+activeSheet.width-5,activeSheet.y+activeSheet.height-5)

// let valInCellA1 = activeSheet.getValue(10, 3);

cy.log(“activecell”,activeSheet)

My code execution is getting stopped here itself spread = appWindow.GC.Spread.Sheets.findControl(“ss”);

Apologies i cannot share whole screenshot as i work with sensitive financial information but I have shared as much snaps and code as much i can

Please advise or if there is any other approach to use here

689×679 30.8 KB
809×267 32 KB
priyam.kushwaha
- Post Options:
- Link
  Copy
Posted 6 December 2024, 3:03 am EST
Hi,

I tried to replicate the behavior on my end using the available information but was unable to do so.

Here are some suggestions after reviewing your provided snippet:

You previously shared the code const
spread = new GC.Spread.Sheets.Workbook(spreadContainer);,
which creates a new instance. If you’re using this in Cypress test code, it might be creating another empty workbook. To get the existing spread instance instead, you can use the findControl method like this:

spread = appWindow.GC.Spread.Sheets.findControl("ss");

Regarding the code snippet you shared:

appWindow = await cy.window(); spread = appWindow.GC.Spread.Sheets.findControl("ss"); let activeSheet = spread.getActiveSheet().getCellRect(0, 0, -1, 1); cy.get(spread.getHost()).click(activeSheet.x + activeSheet.width - 5, activeSheet.y + activeSheet.height - 5); // let valInCellA1 = activeSheet.getValue(10, 3); cy.log("activecell", activeSheet);

If you’re using this in an it block, ensure that before executing this block, you use the before hook to first visit the site, get the window object, and then retrieve the spread instance. Once this is done, proceed with your testing logic in the it block.

If the above suggestions don’t resolve the issue, please share a stripped-down sample that replicates the behavior, or modify the provided sample to reproduce the problem. We understand you may not be able to share the complete code with sensitive information. However, you can either replace sensitive data with dummy values or create a private ticket at https://developer.mescius.com/my-account/my-support, where your data will not be publicly visible. Without replicating the behavior, it will be challenging to debug and comment on the issue.

Regards,

Priyam

umair.sayed

Post Options:
Link
Copy

Posted 6 December 2024, 3:35 am EST - Updated 6 December 2024, 3:40 am EST

import * as GC from “@mescius/spread-sheets”;

let appWindow = null,

spread = null;

const SPREADJSKEY = “Mykey”

GC.Spread.Sheets.LicenseKey=SPREADJSKEY

describe(“template spec”, () => {

it(“Navigate to login and access spread page”, async() => {

cy.viewport(1366, 786);

cy.visit("https://dummywebsite/home/#");
cy.get("#username", { timeout: 2000 }).type(
  "dummyusername.com"
);
cy.get("#password", { timeout: 2000 }).type("dummypass", { log: false });
cy.get('button[type="submit"]').click();
cy.wait(2000);

const mainmenu = "Recon";
const submenu = "Reconciliation";
const childmenu = "Break Resolution";

const locatorMainmenu =
  '//span[@class="MenuItemstyles__Text-NgShell__sc-2yy4oj-1 ipsNfE" and text()="' +
  mainmenu +
  '"]';
const locatorSubmenu =
  '//span[@class="sidebar-submenu--name" and text()="' + submenu + '"]';
const locatorChildmenu =
  '//span[@class="sidebar-submenu--item--name" and text()="' +
  childmenu +
  '"]';

cy.xpath('//div[@class="scrollbar-container ps"]', {
  timeout: 20000,
}).trigger("mouseover");
cy.wait(500);
cy.xpath(locatorMainmenu, { timeout: 20000 })
  .eq(0)
  .should("include.text", mainmenu, { timeout: 20000 })
  .click({ force: true });
cy.wait(2000);
cy.xpath(locatorSubmenu, { timeout: 20000 })
  .eq(0)
  .should("include.text", submenu, { timeout: 20000 })
  .click({ force: true });
cy.wait(2000);
cy.xpath(locatorChildmenu, { timeout: 20000 })
  .eq(0)
  .should("include.text", childmenu, { timeout: 20000 })
  .click({ force: true });
cy.wait(1500);
cy.xpath(
  '(//div[@class="sc-gEvEer sc-eqUAAy bCwaML aNslW icon-system"])[28]'
).trigger("mouseout");

cy.get("div[id='Client'] div[class='css-19bb58m']").type("Test client{enter}");
cy.get("div[id='Type'] div[class='css-19bb58m']").type(
  "Typeselect {enter}"
);

cy.get("div[id='Setup'] div[class='css-19bb58m']").type(
  "setup  {enter}"
);
cy.contains("Search").click();
cy.wait(4000);

appWindow = await cy.window();

spread = appWindow.GC.Spread.Sheets.findControl(“ss”);

let activeSheet = spread.getActiveSheet().getCellRect(0,0,-1,1)

cy.get(spread.getHost()).click(activeSheet.x+activeSheet.width-5,activeSheet.y+activeSheet.height-5)

// let valInCellA1 = activeSheet.getValue(10, 3);

cy.log(“activecell”,activeSheet)

});

});

Added dummy code with dummy data

Error below is

Cannot read properties of undefined (reading ‘Spread’)

View stack trace

Print to console

TypeError: Cannot read properties of undefined (reading ‘Spread’)

priyam.kushwaha
- Post Options:
- Link
  Copy
Posted 9 December 2024, 5:38 am EST - Updated 9 December 2024, 5:43 am EST

Hi,

After reviewing the code snippet and error details, it seems that the GC object is not exposed on the window object, which could be causing the issue during testing. I was able to replicate the behavior when the GC object was not accessible via the window object. This might be the root cause of the issue on your end. Please refer to the attached GIF, “Steps.gif”.

Gif:

You could also refer to this forum case: https://developer.mescius.com/forums/spreadjs/cypress-test

Could you check if the GC object is exposed on the window object for testing? If it is exposed and the issue persists, it might be specific to your application, as we are not encountering this behavior on our end. To find the issue, could you provide a minimal working sample along with the steps to reproduce the observed behavior, or modify the existing sample accordingly? Additionally, sharing a GIF or video demonstrating the issue would be helpful. Without a sample, identifying and debugging the issue becomes challenging.

Regards,

Priyam
umair.sayed
- Post Options:
- Link
  Copy
Posted 9 December 2024, 9:17 am EST - Updated 9 December 2024, 9:22 am EST
Hello ,

I added this code below and tried but it is creating a new blank worksheet instead of accessing the one that is on my webpage

import * as GC from "@mescius/spread-sheets"; window["GC"] = GC; //** my website login code is here it lands on spreadjs page with data **// let spreadhost=document.getElementById("ss") let spread=new GC.Spread.Sheets.Workbook(spreadhost) initspread(spread) function initspread(spread){ let sheet = spread.getActiveSheet() cy.log("Active Sheet Name:", sheet.name()); // Access and log cell data const cellData = sheet.getCell(4, 6).text(); cy.log("Active Sheet Name:", sheet.name()); cy.log("Row Count:", sheet.getRowCount()); cy.log("Column Count:", sheet.getColumnCount()); cy.log("Cell Data:", cellData); }

My test Gets passed but my problem is not resolved as it is creating new sheet instead of accessing mine like you can see here in loggers

Cypress log states sheet name 1 but it should be USD also count of rows and columns are of the sheet which gets created , However I cannot see that sheet in UI , As my sheet that is being rendered has more no of column and rows also if you see in screenshot cell Data is also blank which is of blank sheet

1227×617 54.3 KB
541×683 123 KB

Can we setup a call for Joint debugging session ? i also have created support ticket for the same
priyam.kushwaha
- Post Options:
- Link
  Copy
Posted 10 December 2024, 2:58 am EST
Hi,

After reviewing the provided code snippet, it appears the issue is related to the way the code is implemented.

In the snippet, instead of retrieving the existing Spread instance, a new instance is being created using the workbook constructor. This seems to be causing the issue of creating a new blank workbook. To resolve this, I recommend using the findControl method to get the existing Spread instance of your webpage instead of creating a new one. Please refer to the sample code below:

import * as GC from "@mescius/spread-sheets"; window["GC"] = GC; // ** My website login code lands on the SpreadJS page with data ** // let spreadHost = document.getElementById("ss"); let spread = GC.Spread.Sheets.findControl(spreadHost); initSpread(spread); function initSpread(spread) { let sheet = spread.getActiveSheet(); cy.log("Active Sheet Name:", sheet.name()); // Access and log cell data const cellData = sheet.getCell(4, 6).text(); cy.log("Active Sheet Name:", sheet.name()); cy.log("Row Count:", sheet.getRowCount()); cy.log("Column Count:", sheet.getColumnCount()); cy.log("Cell Data:", cellData); }

We have also responded to the private support ticket, so please check the response there as well.

References:

findControl: https://developer.mescius.com/spreadjs/api/modules/GC.Spread.Sheets#findcontrol

Regards,

Priyam

umair.sayed

Post Options:
Link
Copy

Posted 10 December 2024, 3:23 am EST - Updated 10 December 2024, 3:28 am EST

Hello I tried same code as above but getting error as getActivesheet is not a function

import * as GC from "@mescius/spread-sheets";

window["GC"] = GC;

// ** My website login code lands on the SpreadJS page with data ** //

let spreadhost=document.getElementById("ss")
    let spread=new GC.Spread.Sheets.findControl(spreadhost)
    initspread(spread)

    function initspread(spread){
      let sheet = spread.getActiveSheet()
      cy.log("Active Sheet Name:", sheet.name());
      // Access and log cell data
              const cellData = sheet.getCell(4, 6).text();
              cy.log("Active Sheet Name:", sheet.name());
              cy.log("Row Count:", sheet.getRowCount());
              cy.log("Column Count:", sheet.getColumnCount());
              cy.log("Cell Data:", cellData);


    }

**Below is my HTML element , please advise if im using ss in find control correctly

**

You need a browser which full supports HTML5 Canvas to run SpreadJS

priyam.kushwaha
- Post Options:
- Link
  Copy
Posted 11 December 2024, 6:58 am EST

Hi,

As discussed in a private support ticket, it seems the code is not waiting to retrieve the SpreadJS host element. We recommend exploring the Cypress API to implement a wait mechanism for obtaining the SpreadJS host element. If, after successfully retrieving the SpreadJS host element, the issue still persists, we kindly request you to share a minimal working sample that replicates the issue. This will enable us to investigate further and provide better assistance.

Regards,

Priyam

Please login to reply to thread

Need extra support?

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

Learn More

Forum Channels

ComponentOne

Forums for all current editions of the ComponentOne .NET UI control product line, including ComponentOne Studio and ComponentOne Studio for Xamarin.
ActiveReports

Forums for all versions of ActiveReports and ActiveReports Server
Spread

Forums for all current versions of Spread .NET spreadsheets, SpreadJS JavaScript spreadsheets, and SpreadCOM spreadsheets.
Wijmo

Forums for all Wijmo products, including Wijmo Core, FinancialChart, FlexSheet, MultiRow, OLAP, and ReportViewer
- General Discussion
Document Solutions

Forums for all Document Solutions products, including Document Solutions for PDF, Word, Excel (.NET and Java), and Imaging.