Laravel Dusk Compatibility

[GarethSomers]

I've extended the use of Laravel Dusk's dusk attribute to allow developers to better target flexible content areas.

Where possible I've matched the button's name (which also works) but I think it's cleaner and clearer to include both. The outer wrapper is always the field name, e.g. @content. Each layout / row is the field name + dash + index, e.g. @content-0. This same element (@content-0) has an id attribute (e.g. 12345). That id can use to then target the layout's subfields with the pattern id + underscore + underscore + field name, e.g. 12345__title).

Here's an example where I have a field named content which has multiple layouts; One of which is called WYSIWYG which has a title field:

$browser
    ->with('@content', function ($layouts) {
        // Add Layout
        $layouts
            ->click('@toggle-layouts-dropdown-or-add-default')
            ->click('@add-wysiwyg');

        // Within each layout the field's `dusk` attribute's are {ID}__{NAME}
        // Because the ID is dynamic we need to grab it before we use it
        $id = $layouts->attribute('@content-0', 'id');

        // Add Title
        $layouts
            ->with('@content-0', function ($layout) use ($id) {
                $layout->
                    type('@' . $id . '__title', 'Hello World');
        });
    })

[voidgraphics]

Hi @GarethSomers, I have to admit I'm not very familiar with Laravel Dusk. Could you walk me through what this is for? Is it to help with writing tests?

[GarethSomers]

Hi @voidgraphics yep it is.

Dusk runs automated browser tests. It boots up a web browser and clicks around the page (using jQuery I think).

It can use a few methods of targetting button's on the page, for example via an input's name or similar. But the easiest and defined method is to use the @selector method which matches where the dusk attribute is equal to selector.

I've just added a few simple dusk attributes to some of the buttom's on the page. This makes my automated test's a bit easier to code.

[voidgraphics]

Very nice, thank you!