Introduction

In this article, we shall learn about how to automate canvas pages by using the coordinate of the element.


Pre-Requisite

Window Resizer Chrome Extension

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en 


Steps

Before we start, we need to make sure that the resolution of our machine where we are obtaining the coordinates is similar to the resolution of the test machine where the tests are run. Otherwise, the test might fail due to clicking on a different point due to resolution difference.


Before getting the coordinates, we first need the resolution of our local machine similar to the resolution of the test machine in the cloud. This can be done by using the Window Resizer Chrome extension given in prerequisite.


1. Select one of the resolutions as shown in the Create Run screen and use the Window Resizer extension to set the window size of the Browser.


2. Once the Browser window is resized according to the resolution that we want to run in the cloud, go to the particular canvas page which you want to automate and open the Developer Console.


3. Enter the following code to get the coordinates of the points to be clicked

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    console.log("x: " + x + " y: " + y)
}
const canvas = document.querySelector('canvas')
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e)
})


The below screenshot is for your reference:

import com.testsigma.customfunc.common.TestsigmaCustomFunctions;
import com.testsigma.customfunc.common.CustomTestStep;
import com.testsigma.customfunc.result.ResultConstants;
import com.testsigma.customfunc.result.TestStepResult;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import java.util.regex.Pattern;


public class WorkingOnCanvas extends TestsigmaCustomFunctions{
    
    @CustomTestStep
    public TestStepResult chooseMultipleTables(String locator, int x,int y) {
        //your custom code starts here
        System.out.println(driver.manage().window().getSize());
        WebElement canvasElement=driver.findElement(By.tagName(locator));
        Actions clickAt = new Actions(driver);
        clickAt.moveToElement(canvasElement,x,y).click().build().perform();
        
         //your custom code ends here

        TestStepResult result= new TestStepResult();
        result.setStatus(ResultConstants.SUCCESS);
        result.setMessage("Custom step Executed successfully.");
        return result;
    }
}




4. Once the coordinate is found by using the above code in the developer console, you can use the following custom function to click on the element using coordinates.





5. Now you can use the custom function in the test step and add the coordinate that you found to click on the element present on the canvas page.