黄昏不执行按钮单击和内容可编辑的字段偶尔更新

Question

我的黄昏测试用例有两个问题，这使我发疯，因为我不知道自己在做什么错。我的测试用例是：

/** @test */
public function update_a_job()
{
    $this->browse(function (Browser $browser)
    {
        $browser
            ->visit(route('jobs-overview', ['project' => 1, 'customerprofile' => 1]))
            ->click('@dusk-edit-job')
            ->type('jobOutcome', 'Renamed job outcome.')
            ->type('@dusk-job-purpose-contenteditable-1', 'Renamed job purpose.')
            ->select('@dusk-job-purpose-rating-1', 5)
            ->select('jobImportance', 5)
            ->select('jobFrustration', 5)
            ->click('@dusk-update-job')
            ->screenshot('current_state')
            ->dump()
            ->assertSee('Renamed job outcome.')
            ->assertSee('Renamed job purpose.');
    });
}

问题是：

->click('@dusk-update-job')从不执行。

相关的dump（）部分：

<div class="form-group row">\n
    <div class="col-6">\n
        <a href="http://ps.dev/en/app/projects/1/customerprofiles/1/jobs" class="btn btn-default waves-effect waves-light">Back</a>\n
    </div>\n
    <div class="col-6 text-right">\n
        <button dusk="dusk-update-job" class="btn btn-default waves-effect waves-light">Next</button>\n
    </div>\n
</div>\n

->type('@dusk-job-purpose-contenteditable-1', 'Renamed job purpose.')被不定期地更新。

相关的dump（）部分：

<ul id="jobPurposeList" class="list-group">\n
    <li class="list-group-item d-flex justify-content-between flex-nowrap">\n
        <input type="hidden" name="jobPurpose[1][db]" value="1" />\n
        <span class="jobPurposeListItem flex-grow-1 mr-auto" contenteditable="true" dusk="dusk-job-purpose-contenteditable-1"\n
            <input type="hidden" name="jobPurpose[1][purpose]" value="A first job purpose." dusk="dusk-job-purpose-value-1" />A first job purpose.\n
        </span>\n
            <div id="jobPurposeOptions">\n
                <select name="jobPurpose[1][rating]" class=" form-control" required="" dusk="dusk-job-purpose-rating-1">\n
                    <option value="" selected="" disabled="">---</option>\n
                    <option value="1">Not important</option>\n
                    <option value="2" selected="">Slightly Important</option>\n
                    <option value="3">Moderately important</option>\n
                    <option value="4">Important</option>\n
                    <option value="5">Very important</option>\n
                </select>\n
            </div>\n
            <span class="deleteJobPurposeFromPurposeList">\n
            <i class="fa fa-trash-o"></i>\n
        </span>\n
    </li>\n
</ul>\n

有人知道我做错了什么，如何进一步调试问题，或者可以做些什么来优化测试用例？

Answer 1

我在另一个讨论区中得到了一些宝贵的意见。最后，我解决了：

我最终得到了：

/** @test */
public function update_a_job()
{
    $this->browse(function (Browser $browser)
    {
        $browser
            ->visit(route('jobs-overview', ['project' => 1, 'customerprofile' => 1]))
            ->click('@dusk-edit-job')
            ->type('jobOutcome', 'Renamed job outcome.')
            ->keys('@dusk-job-purpose-contenteditable-1', 'Updated: ')
            ->select('@dusk-job-purpose-rating-1', 5)
            ->select('jobImportance', 5)
            ->select('jobFrustration', 5)
            ->press('@dusk-update-job')
            ->assertSee('Renamed job outcome.')
            ->assertSee('Updated: A first job purpose.');
    });
}

经验教训：

• 有一个很棒的工具Laravel TestTools，也可以用于调试。
• 验证是否需要应用黄昏的click（）或press（）方法。