Laravel dusk + Vue multiselect

component.php

<?php

namespace Tests\Browser\Components;

use Laravel\Dusk\Browser;
use Laravel\Dusk\Component as BaseComponent;

class Multiselect extends BaseComponent
{
    /**
     * Create a new BaseComponent instance.
     *
     * @param  string  $selector
     * @return void
     */
    public function __construct($selector)
    {
        $this->selector = $selector;
    }

    /**
     * Get the root selector for the component.
     *
     * @return string
     */
    public function selector()
    {
        return $this->selector;
    }

    /**
     * Assert that the browser page contains the component.
     *
     * @param  Browser  $browser
     * @return void
     */
    public function assert(Browser $browser)
    {
        $browser->assertVisible($this->selector());
    }

    /**
     * Get the element shortcuts for the component.
     *
     * @return array
     */
    public function elements()
    {
        return [
            '@field' => '.multiselect__select',
            '@dropdown' => '.multiselect__content',
        ];
    }

    /**
     * Select the given item.
     *
     * @param  \Laravel\Dusk\Browser  $browser
     * @param  string  $label
     * @return void
     */
    public function selectItem($browser, $label)
    {
        $browser->click('@field')
                ->within('@dropdown', function ($browser) use ($label) {
                    $browser->findElementXpath("//ul[@class='multiselect__content']/li[@class='multiselect__element']/span/span[contains(text(), '$label')]")->click();
                });
    }
}

test.php

<?php

// AppServiceProvider

use Facebook\WebDriver\WebDriverBy;

Browser::macro('findElementXpath', function ($path) {
    return $this->driver->findElement(WebDriverBy::xpath($path));
});
            

// The testing...

$browser->within(new Multiselect('@transaction-type'), function ($browser) {
    $browser->selectItem('transfer');
});