Advanced Mouse and Touch Interactions

Selenium's Actions class required building complex interaction chains to handle sophisticated mouse behaviors like hover effects and drag-and-drop operations. These chains often failed due to timing issues and coordinate calculation errors that made advanced mouse interactions unreliable and difficult to debug. Each interaction required understanding browser-specific quirks and implementing defensive programming patterns to handle various failure modes.

Playwright integrates advanced mouse interactions directly into the locator interface, applying the same auto-waiting and actionability intelligence that makes basic interactions reliable. These methods handle coordinate calculation automatically, manage timing requirements transparently, and provide consistent behavior across different browsers and operating systems.

Specialized Mouse Operations

Beyond standard clicking, applications often require specialized mouse behaviors for accessing context menus, triggering double-click actions, or handling modifier-key combinations that change interaction behavior.

// Right-click for context menus
await _page.GotoAsync("https://the-internet.herokuapp.com/context_menu");
await _page.Locator("#hot-spot").ClickAsync(new() { Button = MouseButton.Right });

// Double-click operations
await element.DblClickAsync();

// Click with modifier keys (Ctrl+Click for new tabs/windows)
await linkElement.ClickAsync(new() { Modifiers = new[] { KeyboardModifier.Control } });

// Click with Shift for multi-selection
await listItem.ClickAsync(new() { Modifiers = new[] { KeyboardModifier.Shift } });

Hover Effects and Interactive Elements

Modern web applications rely heavily on hover effects to reveal additional interface elements and create progressive disclosure patterns. Testing these hover-based interactions requires precise timing and positioning that was challenging to achieve consistently with Selenium's Actions class. You can find the code examples used in this lesson in the 06-playwright-advanced-interactions solution folder of our test repository.

// Page Object demonstrating hover-based interactions
public class HoversPage
{
    private readonly IPage _page;

    public ILocator PageTitle => _page.Locator("h3");
    public ILocator UserAvatars => _page.Locator(".figure");

    public HoversPage(IPage page)
    {
        _page = page;
    }

    public async Task NavigateAsync()
    {
        await _page.GotoAsync("https://the-internet.herokuapp.com/hovers");
    }

    // Method demonstrating hover interaction with hidden content
    public async Task HoverOverUserAsync(int userIndex)
    {
        var userAvatar = UserAvatars.Nth(userIndex);

        // Hover over user avatar to reveal hidden content
        await userAvatar.HoverAsync();

        // Verify hidden content becomes visible
        var userDetails = userAvatar.Locator(".figcaption");
        await Assertions.Expect(userDetails).ToBeVisibleAsync();

        // Verify specific user information appears
        var userName = userDetails.Locator("h5");
        var userLink = userDetails.GetByRole(AriaRole.Link, new() { Name = "View profile" });

        await Assertions.Expect(userName).ToBeVisibleAsync();
        await Assertions.Expect(userLink).ToBeVisibleAsync();

        var nameText = await userName.TextContentAsync();
        TestContext.WriteLine($"Hovered over {nameText}");
    }
}

Drag-and-Drop Operations

Drag-and-drop interactions represent some of the most complex mouse behaviors that applications implement, involving coordinate calculations, timing sequences, and event coordination that was notoriously difficult to automate reliably with Selenium. Playwright's integrated drag-and-drop methods handle these complexities automatically while providing options for fine-grained control when needed.

// Page Object demonstrating drag-and-drop functionality
public class DragAndDropPage
{
    private readonly IPage _page;

    public ILocator ColumnA => _page.Locator("#column-a");
    public ILocator ColumnB => _page.Locator("#column-b");

    public DragAndDropPage(IPage page)
    {
        _page = page;
    }

    public async Task NavigateAsync()
    {
        await _page.GotoAsync("https://the-internet.herokuapp.com/drag_and_drop");
    }

    // Simple drag-and-drop using built-in method
    public async Task SwapElementsAsync()
    {
        // Verify initial state
        await Assertions.Expect(ColumnA).ToHaveTextAsync("A");
        await Assertions.Expect(ColumnB).ToHaveTextAsync("B");

        // Perform drag-and-drop operation
        await ColumnA.DragToAsync(ColumnB);

        // Verify elements swapped
        await Assertions.Expect(ColumnA).ToHaveTextAsync("B");
        await Assertions.Expect(ColumnB).ToHaveTextAsync("A");

        TestContext.WriteLine("Successfully swapped elements using drag-and-drop");
    }

    // Method demonstrating drag-and-drop verification
    public async Task VerifyDragDropBehaviorAsync()
    {
        var initialAText = await ColumnA.TextContentAsync();
        var initialBText = await ColumnB.TextContentAsync();

        // Perform drag operation
        await ColumnA.DragToAsync(ColumnB);

        // Verify content actually changed
        var finalAText = await ColumnA.TextContentAsync();
        var finalBText = await ColumnB.TextContentAsync();

        Assert.That(finalAText, Is.EqualTo(initialBText));
        Assert.That(finalBText, Is.EqualTo(initialAText));

        TestContext.WriteLine($"Drag-and-drop verified: {initialAText} and {initialBText} swapped positions");
    }
}

Test Integration with Page Objects

Advanced mouse interactions integrate seamlessly with the Page Object patterns you've been building throughout the course, enabling sophisticated user workflows that combine multiple interaction types within coherent test scenarios.

public class AdvancedInteractionsTests : PageTest
{
    [Test]
    public async Task DemonstrateAdvancedMouseWorkflows()
    {
        // Test hover interactions
        var hoversPage = new HoversPage(Page);
        await hoversPage.NavigateAsync();
        await hoversPage.HoverOverUserAsync(0); // Hover over first user

        // Test drag-and-drop interactions
        var dragDropPage = new DragAndDropPage(Page);
        await dragDropPage.NavigateAsync();
        await dragDropPage.SwapElementsAsync();
        await dragDropPage.VerifyDragDropBehaviorAsync();

        TestContext.WriteLine("Advanced mouse interaction workflow completed successfully");
    }
}

Playwright's integrated approach to advanced mouse interactions eliminates the complexity and reliability issues that characterized Selenium's Actions class while providing comprehensive control over sophisticated user behaviors. These capabilities enable testing modern applications that rely on rich mouse interactions while maintaining the architectural consistency and reliability principles that make automation frameworks maintainable and effective.

Keyboard Operations

Modern applications rely heavily on keyboard shortcuts and complex key sequences. Playwright handles these interactions with cross-platform compatibility and proper event sequencing.

// Basic text input and key presses
await _page.Keyboard.TypeAsync("text to input");
await _page.Keyboard.PressAsync("Enter");
await _page.Keyboard.PressAsync("Tab");
await _page.Keyboard.PressAsync("Escape");

// Keyboard shortcuts - automatically adapts to platform (Ctrl vs Cmd)
await _page.Keyboard.PressAsync("Control+a"); // Select all
await _page.Keyboard.PressAsync("Control+c"); // Copy
await _page.Keyboard.PressAsync("Control+v"); // Paste
await _page.Keyboard.PressAsync("Control+z"); // Undo

// Function keys and navigation
await _page.Keyboard.PressAsync("F1");
await _page.Keyboard.PressAsync("ArrowDown");
await _page.Keyboard.PressAsync("ArrowUp");
await _page.Keyboard.PressAsync("PageDown");

// Testing key press detection
await _page.GotoAsync("https://the-internet.herokuapp.com/key_presses");
await _page.Keyboard.PressAsync("Control+a");
await Expect(_page.Locator("#result")).ToContainTextAsync("CONTROL");

These advanced interaction patterns enable comprehensive testing of keyboard-driven workflows that represent critical user interaction methods in modern applications. Playwright's integrated approach eliminates the complexity of Selenium's Actions class while providing reliable cross-platform behavior.

Form Element Mastery

Form interactions in web applications extend far beyond simple text input to include complex controls like multi-select dropdowns, file uploads, date pickers, and custom components that required specialized handling in Selenium through dedicated classes and workarounds. Playwright integrates these interactions into the standard locator interface while providing more powerful capabilities for handling modern form elements.

Dropdown and Selection Controls

Dropdown controls represent one of the most common complex form elements, yet they often caused reliability issues in Selenium automation due to timing problems and browser-specific rendering differences. Playwright's integrated approach handles these complexities while providing multiple selection strategies for different scenarios.

// Page Object demonstrating dropdown interactions
public class DropdownPage
{
    private readonly IPage _page;

    public ILocator Dropdown => _page.Locator("#dropdown");

    public DropdownPage(IPage page)
    {
        _page = page;
    }

    public async Task NavigateAsync()
    {
        await _page.GotoAsync("https://the-internet.herokuapp.com/dropdown");
    }

    // Method demonstrating different dropdown selection approaches
    public async Task SelectDropdownOptionsAsync()
    {
        // Select by visible text
        await Dropdown.SelectOptionAsync(new SelectOptionValue { Label = "Option 1" });
        await Assertions.Expect(Dropdown).ToHaveValueAsync("1");

        // Select by value attribute
        await Dropdown.SelectOptionAsync(new SelectOptionValue { Value = "2" });
        await Assertions.Expect(Dropdown).ToHaveValueAsync("2");

        // Select by index
        await Dropdown.SelectOptionAsync(new SelectOptionValue { Index = 1 });
        await Assertions.Expect(Dropdown).ToHaveValueAsync("1");
    }
}

File Upload Operations

File upload functionality is a common feature in web applications, allowing users to submit documents, images, or other data from their local devices. Implementing and testing file uploads requires interaction with input elements that accept files, and ensuring that the uploaded content is correctly processed by the server. Playwright provides robust APIs to simulate file selection and submission by programmatically setting file inputs, bypassing native system dialogs. This approach enables seamless automation of upload workflows, supports both local and in-memory file payloads, and ensures consistent behavior across browsers

// Page Object demonstrating file upload functionality
public class FileUploadPage
{
    private readonly IPage _page;

    public ILocator FileInput => _page.Locator("#file-upload");
    public ILocator UploadButton => _page.Locator("#file-submit");
    public ILocator UploadedFiles => _page.Locator("#uploaded-files");

    public FileUploadPage(IPage page)
    {
        _page = page;
    }

    public async Task NavigateAsync()
    {
        await _page.GotoAsync("https://the-internet.herokuapp.com/upload");
    }

    // Method demonstrating file upload with actual files
    public async Task UploadFileAsync()
    {
        // Create temporary test file
        var tempFilePath = Path.GetTempFileName();
        var testContent = "Test file content for upload verification";
        await File.WriteAllTextAsync(tempFilePath, testContent);

        try
        {
            // Set file on input element
            await FileInput.SetInputFilesAsync(tempFilePath);

            // Submit the upload
            await UploadButton.ClickAsync();

            // Verify successful upload
            await Assertions.Expect(_page.GetByText("File Uploaded!")).ToBeVisibleAsync();
            await Assertions.Expect(UploadedFiles).ToContainTextAsync(Path.GetFileName(tempFilePath));

            TestContext.WriteLine($"Successfully uploaded file: {Path.GetFileName(tempFilePath)}");
        }
        finally
        {
            // Clean up temporary file
            if (File.Exists(tempFilePath))
                File.Delete(tempFilePath);
        }
    }

    // Method demonstrating programmatic file creation
    public async Task UploadProgrammaticFileAsync()
    {
        // Create file content programmatically without filesystem
        var fileContent = "Programmatically created test content";
        var fileName = "test-upload.txt";

        await FileInput.SetInputFilesAsync(new FilePayload
        {
            Name = fileName,
            MimeType = "text/plain",
            Buffer = System.Text.Encoding.UTF8.GetBytes(fileContent)
        });

        await UploadButton.ClickAsync();

        // Verify upload success
        await Assertions.Expect(_page.GetByText("File Uploaded!")).ToBeVisibleAsync();
        await Assertions.Expect(UploadedFiles).ToContainTextAsync(fileName);

        TestContext.WriteLine($"Successfully uploaded programmatic file: {fileName}");
    }
}

Checkbox and Radio Button Interactions

Checkbox and radio button controls require specific interaction patterns that verify both the visual state and the underlying form values. These interactions often involve testing group behaviors and validation logic that affects form submission and data processing workflows.

// Page Object demonstrating checkbox and radio button interactions
public class CheckboxRadioPage
{
    private readonly IPage _page;

    public CheckboxRadioPage(IPage page)
    {
        _page = page;
    }

    // Method demonstrating checkbox interactions
    public async Task TestCheckboxInteractionsAsync()
    {
        await _page.GotoAsync("https://the-internet.herokuapp.com/checkboxes");

        var checkboxes = _page.Locator("input[type='checkbox']");
        var firstCheckbox = checkboxes.First;

        await Assertions.Expect(firstCheckbox).Not.ToBeCheckedAsync();

        await firstCheckbox.CheckAsync();
        await Assertions.Expect(firstCheckbox).ToBeCheckedAsync();

        await firstCheckbox.UncheckAsync();
        await Assertions.Expect(firstCheckbox).Not.ToBeCheckedAsync();
    }
}

Mastering form element interactions enables comprehensive testing of data entry workflows that represent critical user journeys in most web applications. Playwright's integrated approach to form handling eliminates the specialized classes and workarounds required in Selenium while providing more reliable interaction patterns that handle modern form complexity gracefully.

JavaScript Operations: Strategic DOM Manipulation

Your Selenium experience with IJavaScriptExecutor taught you that JavaScript execution could be both powerful and potentially brittle. While Selenium's approach felt like a separate, lower-level API that you resorted to when other methods failed, Playwright's JavaScript execution integrates more naturally with modern automation patterns while providing strategic solutions for edge cases that standard interactions cannot handle effectively.

Understanding when and how to use JavaScript operations requires developing judgment about when this approach provides genuine value versus when it represents a shortcut that creates maintenance problems. The key principle once again involves using JavaScript execution to solve specific problems rather than as a default automation approach.

JavaScript Evaluation Methods

Playwright provides two primary approaches for executing JavaScript code: page-level evaluation through Page.EvaluateAsync() and element-specific evaluation through ILocator.EvaluateAsync(). Understanding when to use each approach helps you choose the most appropriate method for different automation scenarios.

Page-level evaluation provides access to the global window context and page-wide functionality, making it suitable for application state manipulation, data extraction from global objects, and operations that affect the entire page. Element-specific evaluation operates within the context of specific DOM elements, providing direct access to element properties and methods while maintaining the reliability benefits of Playwright's locator system.

// Page-level evaluation - access to global context
var pageTitle = await _page.EvaluateAsync<string>("() => document.title");
var windowSize = await _page.EvaluateAsync<object>("() => ({ width: window.innerWidth, height: window.innerHeight })");

// Manipulate global application state
await _page.EvaluateAsync(@"() => {
    window.testMode = true;
    localStorage.setItem('debug', 'enabled');
}");

// Element-specific evaluation - operates on located elements
var elementText = await _page.Locator("#content").EvaluateAsync<string>("el => el.textContent");
var isVisible = await _page.Locator(".modal").EvaluateAsync<bool>("el => el.offsetParent !== null");

// Modify specific element properties
await _page.Locator("#user-input").EvaluateAsync("el => el.value = 'test data'");

// Get computed styles for specific elements
var backgroundColor = await _page.Locator(".highlight").EvaluateAsync<string>(
    "el => window.getComputedStyle(el).backgroundColor"
);

// Element evaluation with parameters
var elementAttribute = await _page.Locator(".data-item").EvaluateAsync<string>(
    "(el, attrName) => el.getAttribute(attrName)",
    "data-id"
);

Element-specific evaluation automatically handles element location and timing, making it more reliable than page-level evaluation when working with specific DOM elements. Use page-level evaluation for global operations and element-specific evaluation when you need to interact with or extract information from particular elements identified through Playwright's locator system.

When JavaScript Execution Provides Strategic Value

JavaScript operations become valuable when you need to extract complex data structures from page context, trigger application state changes that would be difficult to achieve through normal user interactions, or work around limitations in third-party components that don't respond reliably to simulated user events.

// Extracting complex data that isn't easily accessible through locators
public async Task<Dictionary<string, object>> ExtractApplicationDataAsync()
{
    // Get complex JavaScript objects directly from page context
    var appData = await _page.EvaluateAsync<Dictionary<string, object>>(@"() => {
        return {
            userPreferences: window.appState?.userPreferences || {},
            cartItems: window.shoppingCart?.items?.length || 0,
            sessionId: window.sessionManager?.currentSession,
            featureFlags: window.featureFlags || {}
        };
    }");

    return appData;
}

// Triggering application events that are difficult to simulate through UI
public async Task TriggerCustomApplicationEventAsync()
{
    await _page.EvaluateAsync(@"() => {
        // Trigger custom event that application listens for
        window.dispatchEvent(new CustomEvent('test:simulate-timeout', {
            detail: { reason: 'automation-testing' }
        }));
    }");

    // Verify application responded to the custom event
    await Assertions.Expect(_page.GetByText("Session timeout warning")).ToBeVisibleAsync();
}

DOM Manipulation and State Modification

Sometimes applications have complex initialization sequences or require specific DOM states that would be time-consuming to achieve through normal user interactions. JavaScript operations can set up these states efficiently while maintaining test reliability.

// Setting up complex application state for testing
public async Task SetupTestScenarioAsync()
{
    // Modify application state directly to create test conditions
    await _page.EvaluateAsync(@"() => {
        // Set up user preferences for testing
        if (window.userSettings) {
            window.userSettings.theme = 'dark';
            window.userSettings.notifications = false;
            window.userSettings.autoSave = true;
        }

        // Simulate localStorage data that would normally be set over time
        localStorage.setItem('returnUser', 'true');
        localStorage.setItem('lastVisit', Date.now() - 86400000); // 24 hours ago
    }");

    // Refresh to apply the state changes
    await _page.ReloadAsync();
}

// Getting computed styles or complex element properties
public async Task<string> GetElementComputedStyleAsync(ILocator element, string property)
{
    var computedValue = await element.EvaluateAsync<string>(@"(el, prop) => {
        return window.getComputedStyle(el).getPropertyValue(prop);
    }", property);

    return computedValue;
}

// Scrolling to specific elements or positions
public async Task ScrollToElementCenterAsync(ILocator element)
{
    await element.EvaluateAsync(@"(el) => {
        el.scrollIntoView({
            behavior: 'smooth',
            block: 'center',
            inline: 'center'
        });
    }");

    // Wait for scroll animation to complete
    await Task.Delay(500);
}

Working Around Third-Party Component Limitations

Some third-party components or complex widgets don't respond reliably to Playwright's standard interaction methods. JavaScript execution provides a way to interact with these components directly while maintaining test reliability.

// Interacting with complex third-party date pickers
public async Task SetDatePickerValueAsync(string dateValue)
{
    await _page.EvaluateAsync(@"(dateStr) => {
        const datePicker = document.querySelector('.custom-date-picker');
        if (datePicker && datePicker._datePickerInstance) {
            datePicker._datePickerInstance.setDate(new Date(dateStr));
            datePicker._datePickerInstance.close();
        }
    }", dateValue);
}

// Working with canvas or complex interactive elements
public async Task InteractWithCanvasElementAsync(int x, int y)
{
    await _page.EvaluateAsync(@"(coords) => {
        const canvas = document.querySelector('#interactive-canvas');
        const rect = canvas.getBoundingClientRect();
        const event = new MouseEvent('click', {
            clientX: rect.left + coords.x,
            clientY: rect.top + coords.y,
            bubbles: true
        });
        canvas.dispatchEvent(event);
    }", new { x, y });
}

Playwright's JavaScript execution capabilities provide strategic solutions for edge cases and complex scenarios while integrating naturally with standard automation patterns. Used judiciously, these operations enable comprehensive testing of sophisticated applications without compromising the architectural consistency that makes automation frameworks maintainable and reliable.