Handling Canvas elements using typescripts in playwright

Posted by: shivamrana1810 on 10 April 2022, 5:24 pm EST

  • Posted 10 April 2022, 5:24 pm EST

    Hi Team,

    I’m new to automation and wanted to perform some operations on a canvas elements using typescripts in playwright.

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

    I didn’t find any documentation or any other help from google. So just mentioning it here. If there is any documentation or any code snippet present with anyone, which can help me in understanding that how we can handle this element and perform any operation on it, then please share it. Every advice is accepted.

  • Posted 26 February 2024, 10:46 pm EST

    Hi team,

    This would be useful for our use case as well.

    Do you have any updates on the issue?

    Thanks,

    Davide

  • Posted 27 February 2024, 8:42 pm EST

    Hi,

    Since you’re interested in automating testing on SpreadJS using Playwright in TypeScript, could you please provide more details about the specific types of automated operations and testing you intend to conduct and the issue you are facing?

    If you wish to interact with SpreadJS canvas elements, such as inputting a value into cell A1 to test, you first need to expose GC object in window and then can obtain the instance of SpreadJS using the findControl method. Then, you can utilize the getCellRect method to retrieve the coordinates of the cell and can perform operations like clicking on it for adding value.

    Creating a sample for automation testing in TypeScript with Playwright may take some time. I’ll keep you updated as soon as it’s ready. Further, if you could specify the operation/test you want perform so that i will try to include it in my sample also.

    In the meantime, I’ve attached some articles related to end-to-end testing that may be helpful to you.

    End to End Testing (E2E) for a SpreadJS Application: https://developer.mescius.com/blogs/end-to-end-testing-for-a-spreadjs-application

    References:

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

    getCellRect: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#getcellrect

    Regards,

    Priyam

  • Posted 27 February 2024, 8:56 pm EST

    Hi Pryiam,

    We would like to consult a basic sample project with Typescript and Playwright.

    If you can showcase the following it would be enough for us:

    “expose GC object in window and then can obtain the instance of SpreadJS using the findControl method. Then, you can utilize the getCellRect method to retrieve the coordinates of the cell and can perform operations like clicking on it for adding value.”

    Regards,

    Davide

  • Posted 28 February 2024, 7:45 pm EST

    Hi Davide,

    Please refer to the attached sample of Playwright Typescript testing of SpreadJS.

    In the attached sample, “tests/SpreadJS_Tests.ts” contains the basic tests for SpreadJS e.g. changing the active cell, setting/getting the value of a cell from the sheet. The “wrappers” folder contains “Workbook.ts” and “Worksheet.ts” files that represent the Workbook and Worksheet element on a page. The tests are performed on SpreadJS Designer hosted at https://developer.mescius.com/spreadjs/designer/index.html.

    You can run the command “npm run test” after unzipping the attached sample and installing all the dependencies. It is important to note that the sample only demonstrates simple test cases and, you would need to implement different functionalities to interact with SpreadJS controls/elements as per your use case/requirement.

    Refer to the below test case snippet for changing the active cell in the sheet.

    test('Change active cell', async ({ page }) => {
        const workbook: Workbook = new Workbook(page);
        const sheet: Worksheet = workbook.getActiveSheet();
    
        const initialRow: number = await sheet.getActiveRowIndex(), initialCol: number = await sheet.getActiveColumnIndex();
    
        // Click on cells
        await sheet.clickCell(2, 2);
        await sheet.clickCell(3, 3);
        await sheet.clickCell(4, 4);
        await sheet.clickCell(5, 5);
    
        let row: number = await sheet.getActiveRowIndex(), col: number = await sheet.getActiveRowIndex();
        const flag: boolean = (initialRow !== row && row === 5) || (initialCol !== col && col === 5) ? true : false;
        expect(flag).toEqual(true);
    });

    sample: playwright_spreadjs_ts.zip

    Regards,

    Chandan

  • Posted 28 February 2024, 7:57 pm EST

    Hi,

    Also, please note that the GC object is already exposed at SpreadJS Designer hosted at https://developer.mescius.com/spreadjs/designer/index.html. In case, when you test your sample, make sure to expose the GC object on the “window” object inside the sample where it is implemented/coded.

    import * as GC from "@mescius/spread-sheets";
    window.GC = GC; // or (window as any).GC = GC; in the case of TypeScript

    Regards

Need extra support?

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

Learn More

Forum Channels