laravel - 我们如何使用 Laravel Dusk 检查 Twitter Bootstrap 单选按钮？

Question

根据twitter bootstrap，这就是我们做收音机的方式：

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

这是我的代码：

$browser->click('#menu-reports')
        ->waitForText('Users')
        ->click('#menu-reports-users')
        ->radio('sitesActive', '2')
        ->radio('includeDisabled', '2')
        ->radio('includeNonCertifiable', '2')
        ->press('Apply')
        ->waitForText('Showing 0 to 0 of 0 entries')
;

使用标签标签内的输入。但问题是 Dusk（实际上是 Facebook Webdriver）无法通过这种方式找到它。它不断提高：

Facebook\WebDriver\Exception\ElementNotVisibleException: element not visible

为了使它工作，我将输入放在标签之外，但是，当然，boostrap 收音机不再按应有的方式显示。

<div class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  <label>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

也不能使用 ID：

甚至没有为输入设置 ID：

<input 
   type="radio" 
   name="sitesActive" 
   id="sitesActive3" 
   value="2"
>

并尝试以这种方式选择它：

->radio('#sitesActive3', '2')

问题是 Dusk (Webdriver) 甚至看不到页面中的元素，因为这个简单的类似失败的方式完全相同：

$browser->waitFor('#sitesActive3');

导致：

Facebook\WebDriver\Exception\TimeOutException: Waited 5 seconds for selector [#sitesActive3].

每当我有一个带有标签的输入表单时都会发生这种情况，如果我从标签中取出输入，它就会起作用。但这并不像收音机那样简单，因为它与其他一些输入，收音机一样。

这是一个正确编码的收音机：

这是一个带有标签标签外输入的收音机：

那么，你是怎么做到的呢？

Answer 1

我的表单有一个单选按钮。这就是我检查它的方式。

userCreate.blade.php

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label>Gender</label>
            <div>
                <label class="radio-inline">
                    <input type="radio" id="gender" name="gender" value="m">Male
                </label>
                <label class="radio-inline">
                    <input type="radio" id="gender" name="gender" value="f">Female
                </label>
            </div>
        </div>
    </div>
</div>

创建用户测试.php

class CreateUserTest extends DuskTestCase
{

    public function  testCreateForm()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/user/create')
                ->radio('#gender', 'm')
                ->click('button[type="submit"]')
                ->assertSee('Successfully created user.');
        });
    }
}

这对我有用。我想这会对你有所帮助。

Answer 2

最简单的方法是单击父级

$el = $this->resolver->resolveForRadioSelection($field, $value);
$el = $el->findElement(WebDriverBy::xpath(".."));
$el->click();

由于收音机不可见黄昏无法点击它

如果您在项目中使用引导程序，则可以创建如下特征

trait BootstrapInteraction
{
    /**
     * Undocumented variable
     * @var \Laravel\Dusk\ElementResolver $resolver
     */
    public   $resolver;
    public function radioB($field, $value)
    {
        /**
         * @var RemoteWebElement $el
         */
        $radio = $this->resolver->resolveForRadioSelection($field, $value);
        // click on parent
        $el = $radio->findElement(WebDriverBy::xpath(".."));
        $el->click();
        // if not selected click on label 
        if (!$radio->isSelected()) {
            $el = $el->findElement(WebDriverBy::cssSelector("label"));
            $el->click();
        }

        PHPUnit::assertTrue(
            $radio->isSelected(),
            "Not able to select Radio [{$field}] within value [{$value}]."
        ); 

        return $this;
    }

Answer 3

您可能不乐意为了您的测试脚本而编辑您的视图，但如果您对此持开放态度，那么在

<input type="radio" ... > 

然后使用

        ->click('.yourClass') 

在你的黄昏测试？

Answer 4

黄昏文档说：

要“选择”一个单选按钮选项，您可以使用该radio方法。与许多其他与输入相关的方法一样，不需要完整的 CSS 选择器。如果找不到精确的选择器匹配，Dusk 将搜索具有匹配name和value属性的收音机：$browser->radio('version', 'php7');

就我而言，Dusk 对于​​我的大多数单选按钮都可以正常工作，但不适用于：

->radio('Field728', 'Know it\'s what anyone committed to this dream would do if she found a great program that features a proven process and supportive community')

我也尝试过使用双引号，但这也不起作用。（也许值太长了？我不知道。）

所以我这样做了：

->radio('#Field728_0', true)//this is the specific ID of the first radio button of this group