Laravel 黄昏没有看到 vuejs 选择器

Posted 2023-02-22

【中文标题】Laravel 黄昏没有看到 vuejs 选择器

【英文标题】：Laravel dusk doesn't see vuejs selectors

【发布时间】：2018-06-13 00:22:56

【问题描述】：

我正在尝试使用 vuejs 运行 laravel 黄昏，但出现错误

1) 测试\Browser\UserCreateTest::testAdminCanCreateAnotherUser Facebook\WebDriver\Exception\TimeOutException：等待选择器 [.users] 5 秒。

这是我的测试

$this->browse(function (Browser $browser) 
            $user = User::find(1);
            $browser
                ->loginAs($user)
                ->visit('/users');

            $browser->waitFor('.users');

在 Vue 模板中，我有类用户的 div。

有人知道这是怎么回事吗？

【参考方案1】：

这就是waitFor 方法的工作原理。

来自the docs：

waitFor 方法可用于暂停测试的执行，直到页面上显示与给定 CSS 选择器匹配的元素。默认情况下，这将在抛出异常之前暂停测试最多五秒钟。

所以，它会等待.users 出现 5 秒，然后抛出异常。

【讨论】：

我明白了，但是为什么测试中没有带有类用户的div？以及为什么测试失败了？

@ArtemPetrusenko Dusk 在给定页面上没有看到任何具有 users 类的元素。他等待 5 秒钟，然后抛出异常。这就是测试失败的原因。

但是你可以看到这个选择器出现在页面上。 clip2net.com/s/3QNqWd2

显然，当 Dusk 运行时，该元素不存在。

如何检查？

【参考方案2】：

该异常的原因是我使用的是“npm run hot”而不是“npm run prod”

【参考方案3】：

要检查元素是否在页面上，您必须这样做：

$browser->assertSee('Connection')

连接就是一个例子。

我也很难做黄昏测试。我无法按下按钮等。

【参考方案4】：

您可以尝试在 html 元素中添加dusk 属性，例如：

<div class="users" dusk="user-list">
...
</div>

在您的测试中，使用以下内容：

$browser
    ->waitFor('@user-list');

dusk="" 属性用作 Laravel Dusk 用来与页面上的 HTML 元素交互的自定义​​选择器。

参考： Testing Vue components with Laravel Dusk