Use a custom Laravel Dusk selector attribute (data-dusk)

Question

The default Laravel Dusk selector looks for the dusk="something" attribute in your HTML. https://laravel.com/docs/10.x/dusk#dusk-selectors

This is not very compatible when using Typescript for React/Vue as it is not a standard HTML element attribute.

It would be more compatible to use an attribute such as data-dusk="something" as Typescript knows anything prefixed with data- is a custom attribute.

Answer 1

Unfortunately this doesn't seem to be documented anywhere, but you can change the the attribute that Dusk looks for by adding this to the boot() method of your app/Providers/AppServiceProvider.php file.

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        // ...

        \Laravel\Dusk\Dusk::selectorHtmlAttribute('data-dusk');
    }
}

Taylor added this in this commit: https://github.com/laravel/dusk/commit/cf04717664f80204567ad3077ea7484a0be16497