Cypress SpreadJS automation help

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]
  

  

  1121×672 45.8 KB

  

  554×764 49.2 KB

• 

  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:

  1. 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");

  2. 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’)

  

  689×679 30.8 KB

  

  809×267 32 KB

• 

  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

  

  1251×320 33.2 KB

• 

  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