Question

我正在尝试用黄昏测试我的登录表单。在前端，我使用vue组件。当我尝试访问电子邮件输入并设置值时，收到错误消息：

1) Tests\Browser\LoginTest::testExample
Facebook\WebDriver\Exception\NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"body [dusk="login-email"]"}
  (Session info: headless chrome=84.0.4147.105)

登录表单：

<form @submit.prevent="submitForm" class="q-mt-lg">
        <div class="col q-mb-md">
          <q-input
            v-model="formData.email"
            outlined
            type="email"
            dusk="login-email"
            class="col"
            data-email
            label="Email"
            ref="email"
            stack-label
            :rules="[ val => validateEmail(val) || 'Please enter a valid email address']"
            lazy-rules />
        </div>
        <div class="col q-mb-md">
          <q-input
            v-model="formData.password"
            type="password"
            dusk="login-password"
            outlined
            class="col"
            label="Password"
            ref="password"
            stack-label
            :rules="[ val => val.length >= 8 || 'Password must be at least 8 characters']"
            lazy-rules />
        </div>
        <div class="row">
            <q-btn
            type="submit"
            dusk="login-btn"
            name="login"
            class="login"
            color="primary"
            label="Login" />
        </div>
    </form>

我的测试：

<?php

namespace Tests\Browser;

use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;
use App\User;

class LoginTest extends DuskTestCase
{
    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function testExample()
    {
        $this->browse(function ($browser) {
            $browser->visit('/login')
                    ->type('@login-email', 'test@test.com')
                    ->type('@login-password', '12345678')
                    ->press('@login-btn')
                    ->assertPathIs('/');
        });
    }
}

我的项目在http：// localhost：3002

上运行

在.env文件中-APP_URL = http：// localhost

在DuskTestCase.php中

protected function driver()
    {
        $options = (new ChromeOptions)->addArguments([
            '--disable-gpu',
            '--headless',
            '--window-size=1920,1080',
            '--no-sandbox'
        ]);

        return RemoteWebDriver::create(
            'http://localhost:9515', DesiredCapabilities::chrome()->setCapability(
                ChromeOptions::CAPABILITY, $options
            )
        );
    }

如果我将APP_URL更改为http：// localhost：3002，则错误相同。您能帮我解决这个问题吗？谢谢！

Answer 1

我在黄昏时也遇到了同样的问题。还有很多很多。

您可以采取一些措施来修复此错误，但是要为您的特定版本找到合适的修复程序可能会很困难。

将Chrome更新到最新版本
更新Chrome WebDriver
让我多次受骗的一个人：确保 .env 文件中的APP_URL变量。确保这是实时应用程序正在运行的正确URL。 IE的参数必须与实际情况相符。
尝试不将css选择器传递给type方法。根据{{3}}，您不必这样做-Dusk将尝试查找具有给定name属性的字段。 CSS可能引起的问题超出其价值

例如：

$browser->visit('/login')
    ->type('login-email', 'test@test.com')
    ->type('login-password', '12345678')
    ->press('login-btn')
    ->assertPathIs('/');

Laravel Dusk-NoSuchElementException：没有这样的元素：无法找到元素

1 个答案: