click Function does not correspond to top-left corner of the element

[armyn6]

What are you trying to achieve?

We are trying to click an element in a webpage.

What do you get instead?

Wrong element (the left or the right element) gets clicked instead. Based on the documentation here clickWithLeftButton with offset should place the cursor on the upper left corner of the element, but with extensive testing, we've found out that the position of the cursor is actually at the center of the element. Note that we are writing acceptance tests for a web application. The same code works fine with Chrome (configuration below) but it does not work well with Selenium/Gecko/Firefox. We are using an RTL language (Persian) in UTF-8.

Part of the code that is failing :

        $I->moveMouseOver($class,10,10);
        $I->wait(1);
        $I->clickWithLeftButton($class,10,10);

Details

Codeception : 4
PHP : 7.2 Remi
Selenium : 3.8.1 with enablePassThrough function
Geckodriver : 0.26.0
Mozilla Firefox : 72.0.1
OS : Windows 10

acceptance.suite.yml:

# Codeception Test Suite Configuration
#
# Suite for acceptance tests.
# Perform tests in browser using the WebDriver or PhpBrowser.
# If you need both WebDriver and PHPBrowser tests - create a separate suite.

actor: AcceptanceTester
modules:
    enabled:
        - \Helper\Acceptance
        - WebDriver
        - Db
        - Asserts
    depends:
        - Db:
        - WebDriver:
        - Asserts:
    url: 'http://localhost/'
    config:
        WebDriver:
             url: 'http://localhost/'
             port: 4444
        Db:
            dsn: 'mysql:host=1.1.1.1;dbname=mysql;charset=utf8'
            user: 'root'
            password: 'password'
            populate: false
            cleanup: false
            reconnect: true

env:
    firefox:
        modules:
            config:
                WebDriver:
                  url: 'http://localhost/'
                  window_size: 1920*1080
                  browser: firefox
                  capabilities:
                    acceptInsecureCerts: true
                    unexpectedAlertBehaviour: 'accept'
                    binary: "/opt/firefox/firefox-bin"
    chrome:
        modules:
            config:
                WebDriver:
                  url: 'http://localhost/'
                  window_size: 1920*1080
                  browser: chrome
                  capabilities:
                     chromeOptions: # additional chrome options
                       args: ["--no-sandbox", "--disable-notifications", "--start-maximized", "--disk-cache-dir=null", "--aggressive-cache-discard", "--disable-dev-shm-usage"]

After a lot of trial-and-errors, we eventually fixed our problem using the following code. The code uses JS functionalities to find the width and height of an element, then moves the cursor and selects the top right corner (This is where we found out that its not selecting the top left corner) :

        $width = 'var a = document.evaluate(\''.$class.'\', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.offsetWidth; return a;';
        $width = $I->executeJS($width);
        var_dump($width);
        $height = 'var a = document.evaluate(\''.$class.'\', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.offsetHeight;  return a;';
        $height = $I->executeJS($height);
        var_dump($height);

        $I->moveMouseOver($class,(($width/2)),0);
        $I->wait(1);
        $I->clickWithLeftButton($class,(($width/2)),0);

Let me know if more information is needed.

[Naktibalda]

Does this issue affect only specific HTML element or all elements?
A minimal reproduction case (minimal html page and test case) would be useful, but it looks like this is an issue of Geckodriver, so it would be better to raise issue there.

[Naktibalda]

I think that I reproduced this issue with Chrome 80:

---------
3) WebDriverTest: Move mouse over
 Test  tests/web/WebDriverTest.php:testMoveMouseOver
Failed asserting that  on page /form/click
--> click, offsetX: 58 - offsetY: 158
--> contains "click, offsetX: 8 - offsetY: 108".
Codeception/Codeception#1  /c/Projects/module-webdriver/src/Codeception/Module/WebDriver.php:2953
Codeception/Codeception#2  /c/Projects/module-webdriver/src/Codeception/Module/WebDriver.php:933
Codeception/Codeception#3  /c/Projects/module-webdriver/tests/web/WebDriverTest.php:944

---------
4) WebDriverTest: Left click
 Test  tests/web/WebDriverTest.php:testLeftClick
Failed asserting that  on page /form/click
--> click, offsetX: 181 - offsetY: 246
--> contains "click, offsetX: 123 - offsetY: 88".
Codeception/Codeception#1  /c/Projects/module-webdriver/src/Codeception/Module/WebDriver.php:2953
Codeception/Codeception#2  /c/Projects/module-webdriver/src/Codeception/Module/WebDriver.php:933
Codeception/Codeception#3  /c/Projects/module-webdriver/tests/web/WebDriverTest.php:955

---------
5) WebDriverTest: Right click
 Test  tests/web/WebDriverTest.php:testRightClick
Failed asserting that  on page /form/click
--> context, offsetX: 304 - offsetY: 334
--> contains "context, offsetX: 123 - offsetY: 88".
Codeception/Codeception#1  /c/Projects/module-webdriver/src/Codeception/Module/WebDriver.php:2953
Codeception/Codeception#2  /c/Projects/module-webdriver/src/Codeception/Module/WebDriver.php:933
Codeception/Codeception#3  /c/Projects/module-webdriver/tests/web/WebDriverTest.php:981

Firefox 73 fails too.

[Naktibalda]

These tests pass on SemaphoreCI with Chrome (but not Chrome Headless) , because it uses Ubuntu 14.04 with Chrome 69. Which means that this change was introduced in later version.

[Naktibalda]

Most likely solution on Codeception side will be documentation update.