Cypress test

Cypress test

Posted by: sadiq.rahim on 20 January 2020, 5:23 am EST

• 

  sadiq.rahim

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 January 2020, 5:23 am EST

  Hi there,

  I’m using cypress framework to run our E2E tests. Tests was working fine but suddenly, it stopped working. I get the error MSG saying cannot read property ‘Spread’ of undefined. Following is my code that is being used for testing. Please can you let me know what is wrong with this? Let me know if you need any further information.

  Many Thanks

  
  
  import * as GC from "@grapecity/spread-sheets";
  window["GC"] = GC
  
  cy.window().then((appWindow) => {
  
  let spreadHostElement = appWindow.document.querySelector('[gcuielement="gcSpread"]');
  spread = appWindow.GC.Spread.Sheets.findControl(spreadHostElement);
  
      try {
        let jsonString = JSON.stringify(spread.toJSON(serializationOption));
        let jsonParse = JSON.parse(jsonString);
        cy.writeFile(`${output}${company}.json`, jsonParse);
      }
      catch(error) {
        cy.writeFile(`${defect}${company}.json`, error);
      }
    });
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 20 January 2020, 8:12 pm EST

  Hi Sadiq,

  Would you please confirm if Spread is added using the script tags or used as npm package in your application? If it is the latter(npm package), then you need to expose the GC on window object by yourself. Add the following line in your main js file(actual project file, not in the specs file):

  import * as GC from "@grapecity/spread-sheets";
  window["GC"] = GC;
  

  If the issue persists, please share a small sample replicating the issue so that we could further investigate it and assist you accordingly.

  Regards
  
  Sharad

• 

  sadiq.rahim

  • Post Options:
  • Link
    Copy

  Posted 21 January 2020, 1:21 am EST

  Thanks Sharad for your prompt reply.

  Spread is added using the npm package and nowhere it uses the script tags in the application anymore.

  Cypress test is also separated from the actual project to run them independently and for various other reasons. Therefore, I’m not sure how to expose the GC window object on the cypress framework. Any help would be much appreciate.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 21 January 2020, 7:47 pm EST

  When Spread is imported from the npm package, it does not attach the GC instance on the global window object.

  Therefore, I’m not sure how to expose the GC window object on the cypress framework.
  
  You do not need to expose the GC object to the cypress framework, you only need to expose it to the window object. Adding the following file in your main.js file would be enough:

  import * as GC from "@grapecity/spread-sheets";
  window["GC"] = GC;
  

  After adding the above lines, the following code should work without any errors:

  cy.window().then((appWindow) => {
      let spreadHostElement = appWindow.document.querySelector('[gcuielement="gcSpread"]');
      let spread = appWindow.GC.Spread.Sheets.findControl(spreadHostElement);
  });
  

• 

  sadiq.rahim

  • Post Options:
  • Link
    Copy

  Posted 27 January 2020, 4:29 am EST

  Sorry, I’m resuming this as there is no luck with this yet. As mentioned earlier, our cypress project is in an independent location and there is also no main.js file. So do you mean those lines of code should be mentioned on the main.js file of our actual project?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 27 January 2020, 5:48 pm EST

  Yes, you are right. We need to expose the GC object from our main project. You could also refer to the sample shared in the following comment which demonstrates the same:
  
  https://www.grapecity.com/forums/spread-views/cypress-automation-testing#could-you-please-let-us-kn
  
  To use the sample first install the dependencies using the “npm install” command, then start the dev server using the command “npm start” and then finally start testing using cypress by executing the “npm run test” command or use “npm run cypress:open” command to open the Opens the Cypress Test Runner in interactive mode.

• 

  sadiq.rahim

  • Post Options:
  • Link
    Copy

  Posted 16 February 2020, 11:31 pm EST

  I was looking for a way to keep the cypress project independent without exposing the GC object from the main project, that is without any involvement of the main project. Anyway, this is resolved for now. Thanks

• 

  pramodhkomatireddy

  • Post Options:
  • Link
    Copy

  Posted 28 July 2021, 5:27 am EST

  Hi ,

  Is there any way to keep the cypress project independent from main project? My requirement is

  1. Login to application
  2. Navigate to page.
  3. Get the values from spread and validate.
     
     I have installed Grapecity using npm install and imported GC like below. But still I could see error as Spread is undefined.
     
     import * as GC from “@grapecity/spread-sheets”;
     
     window[“GC”] = GC;

  Could you please share sample project if possible.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 28 July 2021, 5:32 pm EST

  Hi,

  Please refer to the following attached sample that demonstrates the spread testing using cypress.

  To use the sample first install the dependencies using the “npm install” command, then start the dev server using the command “npm start” and then finally start testing using cypress by executing the “npm run test” command or use “npm run cypress:open” command to open the Opens the Cypress Test Runner in interactive mode

  Also, If the issue persists please share a sample that replicates the issue so that we could further investigate the issue and assist you accordingly. If it is not possible for you to share a sample on this public thread, then you may also create a case on our private support portal and share the sample.

  Regards,
  
  Avinash

  CypressTesting.zip

• 

  pramodhkomatireddy

  • Post Options:
  • Link
    Copy

  Posted 29 July 2021, 4:00 am EST

  Hi Avinash,

  Thanks for the reply.
  
  Using the given ‘CypresTesting’ sample project, I could get the value from spread as we started dev server and interacting with same spread from browser. But, in my case I need to interact with the application which is hosted in server. When I run the script it is giving error as ‘Cannot read property ‘Spread’ of undefined’.
  
  I have installed packages and imported libraries in src/index.js file like below.
  
  import * as GC from “@grapecity/spread-sheets”;
  
  window[“GC”] = GC;

  Below is my test script.

  describe(‘My First Cypress Test’, function() {
  
  let appWindow = null
  
  before( () => {
  
  cy.visit(“https://mycompany.com”);
  
  cy.title().should(‘eq’, ‘Company Details’)
  
  });

  it('To test grape city spread', function () {
      // get window object of application
      appWindow = cy.window();
      // find spread instance
      var spread = appWindow.GC.Spread.Sheets.findControl("ss");
      let activeSheet = spread.getActiveSheet();
      let companyName = activeSheet.getValue(37, 2);
      expect(companyName).to.eq("Company one");
  });
  

  });

  package.json

  {
  
  “name”: “cyprres_test”,
  
  “version”: “1.0.0”,
  
  “description”: "Spreadjs automation usingCypress ",
  
  “main”: “index.js”,
  
  “scripts”: {
  
  “cypress:open”: “cypress open --config-file cypress.json”,
  
  “test”: “cypress run --spec "cypress/integration/Testing/TestOne1.js"”
  
  },
  
  “author”: “Pramodh”,
  
  “license”: “ISC”,
  
  “devDependencies”: {
  
  “cypress”: “^7.7.0”,
  
  “parcel-bundler”: “^1.12.3”
  
  },
  
  “dependencies”: {
  
  “@grapecity/spread-sheets”: “^13.2.0”
  
  }
  
  }

  I am using command ‘npm run cypress:open’ to open cypress window to run test.

  Please help me to resolve this issue.

  Thanks
  
  Pramodh

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 29 July 2021, 7:41 pm EST

  Hi,

  We are sorry but we are unable to replicate the issue at our end. Please make sure you have exposed GC on the project that you are testing (for cross-checking open https://mycompany.com and open console type GC and observe if you are able to get GC object).

  Further, We have tested our spreadJS Demo website at our end and it worked fine at our end. Please refer to the following updated sample and that test the following Demo https://www.grapecity.com/spreadjs/demos/sample/features/culture/localization/purejs/

  Also, if the issue persists. Please share the sample project that replicates the issue so that we could investing it further. and assist you accordingly.

  Regards,
  
  Avinash

  CypressTestingUpdated.zip

• 

  pramodhkomatireddy

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 4:43 am EST - Updated 3 October 2022, 12:08 am EST

  Hi Avinash,

  Still it is showing error as Spread is undefined when I tried given script with our local project. I have tried timeout to make sure page is loaded.
  
  Please find attached test script and UI elements screen shots.

  

  1119×237 19.6 KB

  

  1475×401 55.3 KB

  Thanks
  
  Pramodh

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 9:18 pm EST

  Hi Pramodh,

  It seems that you have not exposed the GC module on the window object of your main project. Please refer to the following blog for steps by steps instructions to properly test the SpreadJS projects.
  
  https://www.grapecity.com/blogs/end-to-end-testing-for-a-spreadjs-application
  
  If the issue persists, please share a sample that demonstrated the issue so that we could investigate the exact cause of the issue and assist you accordingly

  Regards
  
  Sharad

• 

  tripurari.jyothi

  • Post Options:
  • Link
    Copy

  Posted 16 November 2021, 1:15 am EST

  Hi Team,

  I’m automating SpreadJS application using Cypress. I’m able to get spread object. My requirement is:

  I’ve to perform right click on column header in spreadjs. After that I need to select one option from the dialogue box. Could you please help me on this.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 16 November 2021, 8:20 pm EST

  Hi,

  SpreadJS provides getCellRect method to get the cell bounds, you could use this method to get bounds and then click/right click at the specific position. Please refer to the following code snippet:

  
  it("Click item from context menu'", () => {
      let activeSheet = spread.getActiveSheet();
      let valInCellA1 = activeSheet.getValue(0, 0);
  
      // get cell position
      let rowIndex = 0, colIndex = 0;
      let rect = activeSheet.getCellRect(rowIndex, colIndex, -1, 1);
  
      // right click at specified position
      let host = spread.getHost();
      cy.get(host).rightclick(rect.x + rect.width / 2, rect.y + rect.height / 2);    
      
      // wait for contet menu
      cy.get('.gc-ui-contextmenu-container', { timeout: 10000 }).should('be.visible');
      // click 'Insert' from context menu
      cy.get(".gc-ui-contextmenu-menuitem .gc-ui-contextmenu-text").each($el => {
        if($el.text() == "Insert"){
          $el.click();
        }
      });
  
      expect(valInCellA1).to.eq("Test application");
    });
  
  

  Regards

• 

  tripurari.jyothi

  • Post Options:
  • Link
    Copy

  Posted 17 November 2021, 11:16 pm EST

  Hi Sharad,

  Thanks a lot for quick reply. The above code snippet worked for me.

  In addition to that, I need to click on one particular cell in the sheet. I’ve tried to use the same one and in place of rightclick i’ve given click.
  
  While running , i’m getting error as click(NaN, NaN)
  
  Could you please help on this.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 21 November 2021, 3:48 pm EST

  Hi,

  For regular cells, you need to pass 1, 1, as the 3rd and 4th arguments inside the getCellRect() method for rowViewportIndex and columnViewportIndex. Please refer to the following code snippet:

  // get cell position
  let rowIndex = 0, colIndex = 0;
  let rect = activeSheet.getCellRect(rowIndex, colIndex, 1, 1);
  
  //click at specified position
  let host = spread.getHost();
  cy.get(host).click(rect.x + rect.width / 2, rect.y + rect.height / 2);
  

  API reference:
  
  https://www.grapecity.com/spreadjs/docs/v14/online/SpreadJS~GC.Spread.Sheets.Worksheet~getCellRect.html?highlight=getcellrect%2C

  Regards

• 

  tripurari.jyothi

  • Post Options:
  • Link
    Copy

  Posted 5 March 2022, 3:40 am EST

  Hi,

  I need to perform right click on the active sheet name. After that i’ve to click on one option from the menu. How do we that using spreadjs. Can you please help me with it.

  I’ve tried using below lines, but i could not see the menu popup.
  
  var menuData= spread.contextMenu.onOpenMenu()

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 7 March 2022, 12:29 am EST

  Hi,

  Currently, there is no public API available for performing the required action. As a result, we have made an enhancement request on your behalf.

  The internal id for this is: SJS-12125. We will update you on the development of this feature.

  Regards

  Ankit

• 

  tripurari.jyothi

  • Post Options:
  • Link
    Copy

  Posted 7 March 2022, 1:06 am EST

  Sure Ankit. Thankyou so much.

  I’ll be waiting for the update.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 9 March 2022, 4:00 pm EST

  Hi,

  Please refer to the following code to get the coordinates of the Active Sheet Tab:

  function getActiveSheetTabRect(spread) {
      var hostID = spread.getHost().id;
      var tabStripHost = document.getElementById(hostID + "_tabStrip");
      var offset = getOffset(tabStripHost), width = tabStripHost.clientWidth, height = tabStripHost.clientHeight;
      var startX, acTabWidth, flag = false, activeSheetIndex = spread.getActiveSheetIndex();
      for (var x = 0; x < width; x++) {
          var hitInfo = spread.hitTest(x + offset.left, height / 2 + offset.top);
          var tabStripHitInfo = hitInfo && hitInfo.tabStripHitInfo;
          if (tabStripHitInfo && tabStripHitInfo.sheetTab && tabStripHitInfo.sheetTab.sheetIndex !== void 0) {
              if (tabStripHitInfo.sheetTab.sheetIndex === activeSheetIndex) {
                  if (startX === void 0) {
                      startX = x;
                  }
                  flag = true;
              } else if (flag) {
                  acTabWidth = x - startX;
                  break;
              }
          } else if (flag) {
              acTabWidth = x - startX;
              break;
          }
      }
      return { x: startX + offset.left + 5, y: offset.top, width: acTabWidth, height: height - 5 };
  }
  function getOffset(elem) {
      var docElem, win, box = { top: 0, left: 0 }, ownerDocument = elem && elem.ownerDocument;
      if (!ownerDocument) {
          return;
      }
      docElem = ownerDocument.documentElement;
      if (elem.getBoundingClientRect) {
          try {
              box = elem.getBoundingClientRect();
          }
          catch (e) {
          }
      }
      win = ownerDocument.defaultView;
      return {
          top: box.top + (win.pageYOffset || docElem.scrollTop) - (docElem.clientTop || 0),
          left: box.left + (win.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || 0)
      };
  } 
  

  With the coordinates, you can perform the right click operation and perform your test.

  Regards

  Ankit

• 

  tripurari.jyothi

  • Post Options:
  • Link
    Copy

  Posted 29 June 2022, 11:38 pm EST

  Hi,

  My requirement is to update the formula for given cell. I’m unprotecting the sheet and setting the formula using below line.
  
  activesheet.setFormula(5,54,“=SUM(F51+F52+F53)”);

  But somehow, its not taking new formula and when use below line, i’m getting old formula which was there.
  
  activesheet.getFormula(54,5);

  Could you please help with this.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 4 July 2022, 7:15 am EST

  Hi,

  Could you please share the sample where you are facing the issue? Also mention the steps you are following. Without the sample, it would be hard for us to comment on the nature of the issue.

  Regards

  Ankit

• 

  tripurari.jyothi

  • Post Options:
  • Link
    Copy

  Posted 4 July 2022, 9:39 pm EST

  Hi,
  
  I’m using below sample. Pls check and let me know if i’ve to update anything.

  it(“Get cell formula”, () => {
  
  cy.window().then((appWindow) => {
  
  const spread = appWindow.GC.Spread.Sheets.findControl(appWindow.document.querySelector(‘[gcuielement=“gcSpread”]’));
  
  let activeSheet = spread.getActiveSheet();

          let x = activeSheet.getFormula(54, 5);
          cy.log("value: ", x);
  
          activeSheet.setFormula(5, 54, "=SUM(F51+F52+F53)");
          cy.get("button[title='Save Changes']").should('be.visible').should('be.enabled').click();
          cy.wait(60000);
  
          let x1 = activeSheet.getFormula(54, 5);
  
           cy.log("value after setting: ", x1);
  
  
  
      });
  

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 5 July 2022, 8:35 pm EST - Updated 3 October 2022, 12:08 am EST

  Hi,

  We tested with the latest version of SpreadJS(V15.1.2) and we were unable to replicate the issue at our end. Attached is the sample we have used for testing. In our test, initially the formula in the cell was “=SUM(F51+F52)” which was later changed to “=SUM(F51+F52+F53)”. You can refer to the attached gif that shows the steps we have followed.

  

  We also tested with the wait time(cy.wait(60000)). Please find the attached screenshot that shows the result with the wait.

  

  1817×1046 122 KB

  Could you please share the working sample where you are facing this issue?

  Regards
  
  Ankit

  sjs-testing-using-cypress.zip

• 

  tripurari.jyothi

  • Post Options:
  • Link
    Copy

  Posted 6 July 2022, 11:48 pm EST

  Hi,

  I still see the issue from myside.
  
  Could you please set up zoom meeting(Note: Teams, we are not able to join)

  Thanks in advance.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 7 July 2022, 8:25 pm EST

  Hi Jyothi,

  I have created a new case on our private portal with the case id: CAS-32681-C5G0L5. You can refer to the case by visiting https://www.grapecity.com/my-account/my-support/case/CAS-32681-C5G0L5. We will post the meeting details on the mentioned case itself.

  Regards

  Ankit

• 

  tripurari.jyothi

  • Post Options:
  • Link
    Copy

  Posted 9 August 2022, 4:05 am EST

  Hi Team,

  I need to perform some keyboard action like key up/down on any particular cell. How can we perform that action. I’ve tried going through this link, But couldnt acheive what i want.
  
  https://www.grapecity.com/spreadjs/docs/latest/online/keyboard.html
  
  Could you please share the command to perform keyup/down event on any particular cell in spread sheet.

  Thanks in advance.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 10 August 2022, 3:43 am EST

  Hi Jyothi,

  Looks like this is the duplicate case of the ticket “CAS-33466-L9Q1H0” that is raised by you. I have already replied on the mentioned ticket. You can refer to the ticket.

  Also, since the issue you are mentioning is not related to the original issue of the case, it is better to create a new case. This helps us to track and manage the cases efficiently.

  Regards
  
  Ankit