Online-Calculator | basic calculator which can do basic calculations | Apps library

The element is within an </code>. So to invoke <code>click()</code> on the elements within the <code><canvas></code> you have to:</p> <ul> <li>Induce <em>WebDriverWait</em> for the desired <em>frame to be available and switch to it</em>.</li> <li>Induce <em>WebDriverWait</em> for the desired <em>element to be clickable</em>.</li> <li><p>You can use the following solution:</p> <ul> <li><p>Code Block:</p> <pre><code>driver.get("https://www.online-calculator.com/full-screen-calculator/") new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("fullframe"))); WebElement canvas = new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("canvas"))); </code></pre></li> </ul></li> </ul> <hr> <h2><a href="https://www.w3schools.com/html/html5_canvas.asp" rel="nofollow noreferrer">HTML5 Canvas</a></h2> <p>The element is only a container for graphics and is a rectangular area on an HTML page. By default, a canvas has no border and no content. However, an <code>id</code> attribute (to be referred to in a script), a <code>width</code> and <code>height</code> attribute are specified to define the size of the canvas. To add a border, the style attribute is used. An example:</p> <pre><code><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> </code></pre> <p>The HTML canvas is a two-dimensional grid. The upper-left corner of the canvas has the coordinates (0,0).</p> <p>In the article <a href="https://chariotsolutions.com/blog/post/automated-testing-of-html5-canvas/" rel="nofollow noreferrer">Automated Testing of HTML5 Canvas Applications with Selenium WebDriver</a> @Aaron Mulder mentions, interacting with the elements within <code><canvas></code> is possible using <em>event support</em> of the <a href="https://selenium.dev/selenium/docs/api/java/org/openqa/selenium/interactions/Actions.html" rel="nofollow noreferrer">Actions</a> <em>Class</em> API:</p> <ul> <li><p><a href="https://selenium.dev/selenium/docs/api/java/org/openqa/selenium/interactions/Actions.html#moveToElement-org.openqa.selenium.WebElement-int-int-" rel="nofollow noreferrer"><code>moveToElement(WebElement target, int xOffset, int yOffset)</code></a>: Moves the mouse to an offset from the top-left corner of the element.</p> <pre><code>new Actions(driver).moveToElement(canvas, xWithinCanvas, yWithinCanvas).click().perform(); </code></pre></li> </ul> <p>But is not 100% reliable as, every <code>mouse down</code>, <code>mouse up</code>, or <code>mouse click</code> happens at the <strong>center</strong> of the element. So the code above produces a <code>mouse move</code> event to the provided coordinates (<strong><code>x</code></strong>,<strong><code>y</code></strong>), then a <code>mouse move</code> event to the center of the <code><canvas></code>, then a <code>mouse down</code>, <code>mouse up</code>, and <code>click</code> at the center of the <code><canvas></code>. That should have been fine for a <code><button></code> but is not worth for a <code><canvas></code>, where you want to be able to click at a specific location.</p> <p>The workaround, is to dispatch synthesized mouse events using JavaScript as follows:</p> <pre><code>// pageX and pageY are offsets which you need to know through mouse coordinates. ((JavascriptExecutor)driver).executeScript("var evt = $.Event('click', { pageX: " + x + ", pageY: " + (y + 55) + " } );" + "$('#myCanvas').trigger(evt);"); </code></pre> <p>However, to click on the elements within the <code><canvas></code> you can be at ease using <a href="/questions/tagged/firefox" class="post-tag" title="show questions tagged 'firefox'" rel="tag">firefox</a> as the <code>mouse move</code> event works well in Firefox and you can avoid using the <em>mouse coordinates</em> as the event processing as follows:</p> <pre><code>new Actions(driver).moveToElement( canvas, xWithinCanvas, yWithinCanvas).perform(); ((JavascriptExecutor)driver).executeScript("$('#canvas').click();"); </code></pre> <hr> <h2>This usecase</h2> <p>To automate a <strong>substruction</strong> operation e.g. <kbd>3</kbd><kbd>-</kbd><kbd>1</kbd><kbd>=</kbd> using <a href="https://stackoverflow.com/questions/54459701/what-is-selenium-and-what-is-webdriver/54482491#54482491">Selenium</a> you can use the following solution:</p> <ul> <li><p>Code Block:</p> <pre><code>driver.get("https://www.online-calculator.com/full-screen-calculator/"); new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("fullframe"))); WebElement canvas = new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("canvas"))); //clicking on 3 new Actions(driver).moveToElement(canvas, 0, 0).moveByOffset(0,(255/6)*3).click().build().perform(); //clicking on the substract sign (-) new Actions(driver).moveToElement(canvas, 0, 0).moveByOffset((174/5)*2,(255/6)*3).click().build().perform(); //clicking on 1 new Actions(driver).moveToElement(canvas, 0, 0).moveByOffset(-(174/5)*4,(255/6)*3).click().build().perform(); //clicking on equals to sign (=) new Actions(driver).moveToElement(canvas, 0, 0).moveByOffset((174/5)*4,(255/6)*4).click().build().perform(); </code></pre></li> <li><p>Execution Video:</p></li> </ul> <p><img src="https://i.stack.imgur.com/NDJcU.gif" alt="AutomatingCanvasSelenium"></p> <hr> <h2>Reference</h2> <p>You can find a couple of relevant detailed discussion in:</p> <ul> <li><a href="https://stackoverflow.com/questions/53409984/how-to-perform-mouse-wheel-scrolling-over-html5-canvas-in-selenium/53608731#53608731">How to perform Mouse Wheel scrolling over HTML5 Canvas in Selenium?</a></li> </ul>