Test mouse interaction with elements outside the viewport

tests/Js/OutsideViewportTest.php

@@ -0,0 +1,90 @@
+<?php
+
+namespace Behat\Mink\Tests\Driver\Js;
+
+use Behat\Mink\Element\NodeElement;
+use Behat\Mink\Tests\Driver\TestCase;
+
+/**
+ * Mouse interaction with elements that are outside the viewport.
+ */
+final class OutsideViewportTest extends TestCase
+{
+    /**
+     * @group mouse-events
+     */
+    public function testClick(): void
+    {
+        $element = $this->findOutsideViewport('click-target');
+
+        $this->scrollToTop();
+        $element->click();
+
+        $this->assertElementText('clicked', $element);
+    }
+
+    /**
+     * @group mouse-events
+     */
+    public function testDoubleClick(): void
+    {
+        $element = $this->findOutsideViewport('double-click-target');
+
+        $this->scrollToTop();
+        $element->doubleClick();
+
+        $this->assertElementText('double clicked', $element);
+    }
+
+    /**
+     * @group mouse-events
+     */
+    public function testRightClick(): void
+    {
+        $element = $this->findOutsideViewport('right-click-target');
+
+        $this->scrollToTop();
+        $element->rightClick();
+
+        $this->assertElementText('right clicked', $element);
+    }
+
+    /**
+     * @group mouse-events
+     */
+    public function testMouseOver(): void
+    {
+        $element = $this->findOutsideViewport('mouse-over-target');
+
+        $this->scrollToTop();
+        $element->mouseOver();
+
+        $this->assertElementText('mouse overed', $element);
+    }
+
+    private function findOutsideViewport(string $id): NodeElement
+    {
+        $this->getSession()->visit($this->pathTo('/outside_viewport.html'));
+
+        $this->scrollToTop();
+        $this->assertTrue(
+            $this->getSession()->evaluateScript(
+                'document.getElementById("' . $id . '").getBoundingClientRect().top >= window.innerHeight'
+            ),
+            'The element must be outside the viewport before the test'
+        );
+
+        return $this->findById($id);
+    }
+
+    private function scrollToTop(): void
+    {
+        $this->getSession()->executeScript('window.scrollTo(0, 0);');
+    }
+
+    private function assertElementText(string $expected, NodeElement $element): void
+    {
+        $this->scrollToTop();
+        $this->assertSame($expected, $element->getText());
+    }
+}

web-fixtures/outside_viewport.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Outside viewport</title>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
+</head>
+<body>
+    <div style="height: 3000px;"></div>
+
+    <!-- in a row, so the mouse is never already over the next target -->
+    <div style="display: flex; gap: 20px;">
+        <div id="click-target">not clicked</div>
+        <div id="double-click-target">not double clicked</div>
+        <div id="right-click-target">not right clicked</div>
+        <div id="mouse-over-target">not mouse overed</div>
+    </div>
+
+    <script type="text/javascript">
+        document.getElementById('click-target').addEventListener('click', function () {
+            this.textContent = 'clicked';
+        });
+
+        document.getElementById('double-click-target').addEventListener('dblclick', function () {
+            this.textContent = 'double clicked';
+        });
+
+        document.getElementById('right-click-target').addEventListener('contextmenu', function (event) {
+            event.preventDefault();
+            this.textContent = 'right clicked';
+        });
+
+        document.getElementById('mouse-over-target').addEventListener('mouseover', function () {
+            this.textContent = 'mouse overed';
+        });
+    </script>
+</body>
+</html>