Cypress test

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

  • 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);
    }
    });
  • Replied 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
  • Replied 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.
  • Replied 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);
    });
  • Replied 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?
  • Replied 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.
  • Marked as Answer

    Replied 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
  • Replied 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.
  • Replied 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
  • Replied 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
  • Replied 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
  • Replied 2 August 2021, 4:43 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.





    Thanks
    Pramodh
  • Replied 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
  • Replied 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.
  • Replied 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
  • Replied 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.
  • Replied 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
Need extra support?

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

Learn More

Forum Channels