Question

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

我尝试$browser->select('size', 'Large');失败

这是我要测试的V型选择之一

 <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元素，然后等待选择打开：

$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

单击v-select元素以列出选项，然后等待下拉菜单类出现，然后单击列表中的第三个标签，从列表中选择一个元素（下例中为2）。菜单列表。最后，等待下拉菜单类消失，然后再进行测试的下一部分。

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

Answer 3

（1）在Vue模板中：

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

（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包装上，甚至可以依靠{{1 }}采用以下策略（涉及v-select）：

v-select

使用xpath。

使用Laravel黄昏测试Vuetify V-Select

3 个答案: