Skip to content

Conversation

@rabrowne85
Copy link

Problem

Pest Plugin Browser currently doesn’t provide a straightforward way to extend the Webpage class with custom, test-specific behaviours.

For example, consider the need to apply padding to an element before taking a screenshot. Right now, this requires verbose and repetitive script() calls in every test:

visit('/')
    ->assertSee('Something')
    ->script("
        const el = document.querySelector('[data-test=\"some-button\"]');
        if (el) {
            el.dataset.originalStyle = el.getAttribute('style') || '';
            el.style.padding = '0.75rem';
        }
    ")
    ->screenshotElement('[data-test="some-button"]', 'some-button')
    ->script("
        const el = document.querySelector('[data-test=\"some-button\"]');
        if (el && el.dataset.originalStyle !== undefined) {
            el.setAttribute('style', el.dataset.originalStyle);
            delete el.dataset.originalStyle;
        }
    ");

This quickly becomes unwieldy across multiple tests.

Unlike Laravel Dusk (which supports macros on the Browser class), there's no current mechanism in Pest Plugin Browser to extend Webpage's behaviour locally.

Proposed Solution

This PR introduces a tap() method to the Webpage class, enabling users to perform inline actions on the current page context - without breaking the fluent chain.

This unlocks clean, composable test logic. For example:

visit('/')
    ->assertSee('Something')
    ->tap(fn ($page) => screenshotElementWithPadding($page, '[data-test="some-button"]', 'some-button'));

Here's how the helper might look in Pest.php:

function screenshotElementWithPadding(
    Webpage $page,
    string $selector,
    string $filename,
): void {

    $page->script("
        const el = document.querySelector('$selector');
        if (el) {
            el.dataset.originalStyle = el.getAttribute('style') || '';
            el.style.padding = '0.75rem';
        }
    ");

    $page->screenshotElement($selector, $filename);

    $page->script("
        const el = document.querySelector('$selector');
        if (el && el.dataset.originalStyle !== undefined) {
            el.setAttribute('style', el.dataset.originalStyle);
            delete el.dataset.originalStyle;
        }
    ");
}

@rabrowne85 rabrowne85 changed the title feat: Implement tap method for instance manipulation feat: Implement tap() method for instance manipulation Sep 17, 2025
@jonnywilliamson
Copy link

That's clever and simple!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants