(1) In the Vue template:
Wrap the <v-select>
with a <div id="selectStatus"></div>
(2) In the Dusk test, use:
$browser->click('#selectStatus .v-select');
$browser->waitFor('.menuable__content__active');
$browser->elements('.menuable__content__active a')[1]->click();
$browser->waitUntilMissing('.menuable__content__active');
$browser->assertSeeIn('#selectStatus .v-select','theStatusIExpectToSee');
— OR —
The <v-select>
can be tested without wrapping it in a <div id="foo"></div>
if we use a slightly more complicated strategy.
Instead of putting the id
on a div
wrapper, we can put the id
directly on the v-select
or even rely on text content contained within the v-select
with the following strategy (involving xpath
):
use Facebook\WebDriver\WebDriverBy;
public function keyOfParentContainingItem($elements, $itemName, $itemValue = null){
$elWithItemKey = null;
$itemNamePrefix = ($itemName !== 'text()') ? '@' : '';
$itemValueMatchString = ($itemValue !== null) ? '="'.$itemValue.'"' : '';
foreach($elements as $k=>$v){
$xpath = './/*['.$itemNamePrefix.$itemName.$itemValueMatchString.']';
if(!empty($v->findElements(WebDriverBy::xpath($xpath)))){
$elWithItemKey = $k;
}
}
return $elWithItemKey;
}
public function testMyVSelect(){
$this->browse(function (Browser $browser) {
$browser->visit('/myAddress');
$els = $browser->elements('.v-select');
$els[$this->keyOfParentContainingItem($els,'id','idOnVSelect')]->click();
$browser->waitFor('.menuable__content__active');
$menuEls = $browser->elements('.menuable__content__active a');
$menuEls[$this->keyOfParentContainingItem($menuEls,'text()',"some text")]->click();
$browser->waitUntilMissing('.menuable__content__active');
$els = $browser->elements('.v-select');
$key = $this->keyOfParentContainingItem($els,'text()',"some text");
$this->assertTrue($key !== null);
});
}
Using Vuetify 1.5.14
.