测试vuetify v-select with laravel dusk

Question

有人知道如何用laravel dusk测试vuetify v-select吗？

我尝试过$browser->select('size', 'Large');，但没有成功

这是我想要测试的v-select之一

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

这是生成的HTML

​

​

单击v-select时，在HTML的其他部分显示选项列表

​

​

Answer 1

单击.v-select元素，等待select打开：

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

然后您可以按索引选择一个选项：

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

或通过文本(使用XPath)：

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

Answer 2

Vue模板中的(1)：

用<div id="selectStatus"></div>包装<v-select>

(2)在黄昏测试中，使用：

  $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');

-或-

如果我们使用稍微复杂的策略，则可以在不将<v-select>包装在<div id="foo"></div>中的情况下测试它。

与将id放在div包装器上不同，我们可以将id直接放在v-select上，甚至可以通过以下策略依赖于v-select中包含的文本内容(涉及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);
    });
  }

使用Vuetify 1.5.14。

Answer 3

单击v-select元素以列出选项，然后等待下拉菜单类出现，然后通过单击菜单列表中的第三个标记从列表中选择一个元素(以下示例中为2)。最后，等待dropdown-menu类消失，然后再进入测试的下一部分。

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