Laravel Dusk + Vue with ElementUI

我的梦境 提交于 2019-12-04 20:02:33

You have to click on the .el-select element and wait for the popper to open up:

$browser->click('.el-select');
$browser->waitFor('.el-select-dropdown.el-popper');

Then you can select an option by index:

$browser->elements('.el-select-dropdown__item')[2]->click();

Or by text:

$selector = "//li[@class='el-select-dropdown__item']/span[text()='Option3']";
$browser->driver->findElement(WebDriverBy::xpath($selector))->click();

I don't see a way to select options by value, since the values aren't anywhere in the HTML.

This works only if you only have one el-select on the page when you have multiple there is no way to identify them or add an identifier

@Lionslair is right: If you use more than one el-select in your page, @JonasStaudenmeir's solution returns error.

To make it works, i use javascript execution. You can add this function in your custom Browser or in your Component :

public function elSelectDropdownClose(Browser $browser)
{
    $browser->script(
<<<EOT
    Array.prototype.slice.call(document.querySelectorAll('.el-select-dropdown.el-popper:not([style*=\"display: none\"])')).map(function(el){
        el.style.display = 'none'
    })
EOT
    );
}
public function elSelectDropdownClick(Browser $browser, $index)
{
    $browser->script(
<<<EOT
    document.querySelectorAll('.el-select-dropdown.el-popper:not([style*=\"display: none\"]) .el-select-dropdown__item')[$index].click()
EOT
    );
    $this->elSelectDropdownClose($browser);
}

To run test :

$browser
    ->click('.el-select.first')
    ->elSelectDropdownClick(0);

$browser
    ->click('.el-select.second')
    ->elSelectDropdownClick(2);
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!