Skip to content

Instantly share code, notes, and snippets.

@eklundkristoffer
Created May 8, 2019 11:54
Show Gist options
  • Save eklundkristoffer/34253778407914edb351167eb0c5063c to your computer and use it in GitHub Desktop.
Save eklundkristoffer/34253778407914edb351167eb0c5063c to your computer and use it in GitHub Desktop.
Laravel dusk + Vue multiselect
<?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();
});
}
}
<?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');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment