Testing vuetify v-select with laravel dusk

Question

Does anyone know how to test vuetify v-select with laravel dusk?

I've tried $browser->select('size', 'Large'); without success

this is one of the v-selects that i want to test

 <v-flex class="form__item">
       <v-select
                    id="estatus"
                    dusk="estatus"
                    v-model="form.id_estatus"
                    label="Estatus"
                    :items="estatus"
                    item-text="nombre"
                    item-value="id"
                    v-validate="{ required:true }"
                    data-vv-name="estatus"
                    data-vv-as="estatus"
                    :error-messages="(errors.collect('estatus'))"
                    required
        ></v-select>
  </v-flex>

And this the generated HTML

When v-select is clicked, shows the option list in other part of the HTML

Answer 1

Click on the .v-select element and wait for the select to open up:

$browser->click('.v-select');
$browser->waitFor('.v-menu__content');

Then you can select an option by index:

$browser->elements('.v-menu__content a')[2]->click();

Or by text (using XPath):

$selector = "//div[@class='v-menu__content menuable__content__active']//div[text()='State 3']";
$browser->driver->findElement(WebDriverBy::xpath($selector))->click();

Answer 2

(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.

Answer 3

Click on the v-select element for it to list the options, then wait for the dropdown-menu class to be present before selecting an element from the list (2 in the example below) by clicking on the third tag in the menu list. Finally, wait until the dropdown-menu class disappears before moving onto the next part of the test.

$browser->click('#region')
    ->with('#region', function ($vSelect) {
        $vSelect->waitFor('.dropdown-menu')
            ->elements('.dropdown-menu a')[2]->click();
    })
    ->waitUntilMissing('.dropdown-menu');