Тестирование vuetify v-select с помощью laravelsummer

Кто-нибудь знает, как протестировать vuetify v-select с помощью laravelsummer?

Я пытался $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

введите здесь описание изображения


vuetify.js laravel-5 browser-testing laravel-dusk
person Eder Ramírez Hernández    schedule 03.07.2018    source источник
comment
Можете ли вы опубликовать сгенерированный HTML?   -  person Jonas Staudenmeir    schedule 04.07.2018
comment
я обновил свой вопрос   -  person Eder Ramírez Hernández    schedule 04.07.2018
comment
Не могли бы вы создать минимальный пример на JSFiddle?   -  person Jonas Staudenmeir    schedule 04.07.2018
comment
вот минимальный пример v-select jsfiddle.net/v41pyq53/9   -  person Eder Ramírez Hernández    schedule 05.07.2018

Ответы (3)


arrow_upward
4
arrow_downward

Нажмите на элемент .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();
person Jonas Staudenmeir    schedule 05.07.2018

arrow_upward
1
arrow_downward

(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 непосредственно в 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.

person Cato Minor    schedule 24.06.2019
comment
Примечание: мы можем воспользоваться тем фактом, что Browser имеет трейт Macroable, чтобы еще больше упростить приведенный выше код, как описано здесь. - person Cato Minor; 25.06.2019

arrow_upward
0
arrow_downward

Нажмите на элемент v-select, чтобы получить список опций, затем подождите, пока появится класс выпадающего меню, прежде чем выбрать элемент из списка (2 в примере ниже), щелкнув третий тег в списке меню. Наконец, подождите, пока класс выпадающего меню не исчезнет, ​​прежде чем переходить к следующей части теста.

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