akogler
234
3
Testing

Dusk does not execute button click & contenteditable field updates sporadically

Posted 2 months ago by akogler

Hi to all,

I have two issues with my dusk test case that drive me nuts as I can't figure out what I am doing wrong. My test case is:

/** @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.');
    });
}

The problems are:

->click('@dusk-update-job') never executes.

Relevant dump() section:

<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.') is sporadically updated.

Relevant dump() section:

<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

Does anybody have an idea what I am doing wrong, how I could further debug the issue or what I could do to optimize the test case?

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.