refactor: add focus and hover tracking elements with corresponding tests

Author: MrPunyapal

playground/resources/views/test-pages/element-tests.blade.php

@@ -252,6 +252,12 @@ class="profile-picture" />
     <!-- Elements for Event Testing -->
     <div class="section">
         <h2>Event Testing</h2>
+        <div id="focus-display" data-testid="focus-display" class="p-2 bg-blue-50 border text-sm mb-2">No element focused yet</div>
+        <div id="hover-display" data-testid="hover-display" class="p-2 bg-green-50 border text-sm mb-2">No element hovered yet</div>
+        <div id="hover-target" data-testid="hover-target" class="p-4 border bg-blue-100 hover:bg-blue-200 transition-colors cursor-pointer mb-4">
+            Hover Target
+        </div>
+        <input id="focus-target" data-testid="focus-target" type="text" class="bg-white text-black p-2 border focus:border-blue-500 mb-4" placeholder="Focus on me" />
         <button id="event-button" data-testid="event-button">Click Me</button>
         <div id="event-result" data-testid="event-result"></div>
     </div>
@@ -262,9 +268,7 @@ class="profile-picture" />
         <div data-testid="scroll-target" style="margin-top: 500px;">
             This element is far down the page for scroll testing
         </div>
-    </div>
-
-    <script>
+    </div>    <script>
         // Counter for click testing
         let clickCounter = 0;
 
@@ -273,6 +277,22 @@ function incrementCounter() {
             document.querySelector('[data-testid="click-counter"]').textContent = clickCounter;
         }
 
+        // Focus tracking function
+        function trackFocus(elementId) {
+            const focusDisplay = document.getElementById('focus-display');
+            if (focusDisplay) {
+                focusDisplay.textContent = 'Last focused: ' + elementId;
+            }
+        }
+
+        // Hover tracking function
+        function trackHover(elementId) {
+            const hoverDisplay = document.getElementById('hover-display');
+            if (hoverDisplay) {
+                hoverDisplay.textContent = 'Last hovered: ' + elementId;
+            }
+        }
+
         // Add some basic interactivity for testing
         document.addEventListener('DOMContentLoaded', function() {
             // Event button click handler
@@ -285,6 +305,40 @@ function incrementCounter() {
                 });
             }
 
+            // Add focus tracking event listeners
+            document.getElementById('focus-target').addEventListener('focus', function() {
+                trackFocus('focus-target');
+            });
+            document.getElementById('username').addEventListener('focus', function() {
+                trackFocus('username');
+            });
+            document.getElementById('password').addEventListener('focus', function() {
+                trackFocus('password');
+            });
+            document.getElementById('search').addEventListener('focus', function() {
+                trackFocus('search');
+            });
+            document.getElementById('comments').addEventListener('focus', function() {
+                trackFocus('comments');
+            });
+
+            // Hover tracking
+            const hoverTarget = document.getElementById('hover-target');
+            if (hoverTarget) {
+                ['mouseenter', 'mouseover', 'pointerenter'].forEach(event => {
+                    hoverTarget.addEventListener(event, function() {
+                        trackHover('hover-target');
+                    });
+                });
+            }
+
+            // Add global hover detection for Playwright compatibility
+            document.addEventListener('mousemove', function(e) {
+                if (e.target.id === 'hover-target') {
+                    trackHover('hover-target');
+                }
+            });
+
             // Make forms more interactive
             const usernameInput = document.getElementById('username');
             if (usernameInput) {

tests/Browser/Playwright/Element/FocusTest.php

@@ -2,13 +2,36 @@
 
 declare(strict_types=1);
 
-use Pest\Browser\Playwright\Element;
+it('can focus on different elements and track focus changes', function (): void {
+    $page = $this->page()->goto('/test/element-tests');
+
+    $page->waitForSelector('[data-testid="focus-target"]');
+    expect($page->textContent('[data-testid="focus-display"]'))->toBe('No element focused yet');
+
+    $focusTarget = $page->locator('[data-testid="focus-target"]')->elementHandle();
+    $focusTarget->focus();
+
+    $page->waitForSelector('[data-testid="focus-display"]:text("Last focused: focus-target")');
+    expect($page->textContent('[data-testid="focus-display"]'))->toBe('Last focused: focus-target');
+
+    $username = $page->locator('#username')->elementHandle();
+    $username->focus();
 
-it('can focus elements', function (): void {
+    $page->waitForSelector('[data-testid="focus-display"]:text("Last focused: username")');
+    expect($page->textContent('[data-testid="focus-display"]'))->toBe('Last focused: username');
+});
+
+it('can focus and interact with the focused element', function (): void {
     $page = $this->page()->goto('/test/element-tests');
-    $locator = $page->getByLabel('Username');
-    $element = $locator->elementHandle();
 
-    $element->focus();
-    expect($element)->toBeInstanceOf(Element::class);
+    $page->waitForSelector('[data-testid="focus-target"]');
+
+    $input = $page->locator('[data-testid="focus-target"]')->elementHandle();
+    $input->focus();
+
+    $page->waitForSelector('[data-testid="focus-display"]:text("Last focused: focus-target")');
+    expect($page->textContent('[data-testid="focus-display"]'))->toBe('Last focused: focus-target');
+
+    $input->type('typing in focused element');
+    expect($page->inputValue('[data-testid="focus-target"]'))->toBe('typing in focused element');
 });

tests/Browser/Playwright/Element/HoverTest.php

@@ -2,11 +2,19 @@
 
 declare(strict_types=1);
 
-it('can hover over elements', function (): void {
+it('hovers over elements and verifies hover state changes', function (): void {
     $page = $this->page()->goto('/test/element-tests');
-    $locator = $page->getByRole('button', ['name' => 'Save']);
-    $element = $locator->elementHandle();
 
-    $element->hover();
-    expect($element->isVisible())->toBeTrue();
+    $hoverTargetLocator = $page->getByTestId('hover-target');
+    $hoverTarget = $hoverTargetLocator->elementHandle();
+
+    $hoverDisplayLocator = $page->getByTestId('hover-display');
+    $hoverDisplay = $hoverDisplayLocator->elementHandle();
+
+    expect($hoverDisplay->textContent())->toBe('No element hovered yet');
+
+    $hoverTarget->hover();
+
+    expect($hoverDisplay->textContent())->toBe('Last hovered: hover-target');
+    expect($hoverTarget->isVisible())->toBeTrue();
 });

tests/Browser/Playwright/Element/PressTest.php

@@ -2,16 +2,23 @@
 
 declare(strict_types=1);
 
-use Pest\Browser\Playwright\Element;
-
-it('can press keys', function (): void {
+it('presses keys on input elements and verifies input changes', function (): void {
     $page = $this->page()->goto('/test/element-tests');
-    $locator = $page->getByLabel('Username');
+    $locator = $page->getByTestId('text-input');
     $element = $locator->elementHandle();
 
     $element->focus();
+    $element->fill('');
+
+    $element->press('a');
+    $element->press('b');
+    $element->press('c');
+    expect($element->inputValue())->toBe('abc');
+
+    $element->press('Backspace');
+    expect($element->inputValue())->toBe('ab');
 
-    $element->press('Enter');
-    // Key press doesn't change the element state, just verify no error
-    expect($element)->toBeInstanceOf(Element::class);
+    $element->press('Control+a');
+    $element->press('Delete');
+    expect($element->inputValue())->toBe('');
 });