Laravel dusk scroll to selector

Hi, I am new to laravel dusk. I want to move mouse to particular field and click there edit or delete link. I have used $browser->script('window.scrollTo(0, 100);'); to get last name but this is not a effective way. is there any way to move moues to particular field based on data-fieldlabel="last name"


<div
  class="snap-field col-sm-6 fbuilder ui-draggable-handle"
  data-fieldid="0"
  data-fieldname="first name"
>
  <label class="control-label pb5">First Name</label>
  <input name="name" type="text" class="form-control" />
  <div class="fbuilder-overlay">
    <div class="overlay-drag">
      <span class="draghelper"
        ><strong>Click and drag to move the field or:</strong></span
      >
      <button
        type="button"
        class="btn btn-default btn-xs pr10 mr10 edit-field-button"
        data-toggle="modal"
        data-backdrop="static"
        data-keyboard="false"
        data-target="#bs-modal-edit-field-text"
      >
        <i class="ico-pencil5"></i> Edit Field Details</button
      ><button
        type="button"
        class="btn btn-default btn-xs pr10 mr10 duplicate-field-button"
      >
        <i class="ico-file-plus"></i> Duplicate Field</button
      ><button
        type="button"
        data-toggle="modal"
        data-target="#bs-modal-delete-field"
        class="btn btn-danger btn-xs pr10 mr10 delete-field-button"
      >
        <i class="ico-trash"></i> Delete Field
      </button>
    </div>
  </div>
  <input
    type="hidden"
    id="field[0][fieldType]"
    name="field[0][fieldType]"
    value="0"
  />
  <input
    type="hidden"
    id="field[0][label]"
    name="field[0][label]"
    data-srcid="#edit-text-label"
    value="First Name"
  />
  <input type="hidden" id="field[0][row]" name="field[0][row]" value="0" />
  <input
    type="hidden"
    id="field[0][column]"
    name="field[0][column]"
    value="0"
  />
</div>

<div
  class="snap-field fbuilder col-sm-6 ui-draggable-handle"
  data-column="2"
  data-fieldid="8777"
  data-fieldname="last name"
  data-fieldlabel="last name"
  data-fieldtype="0"
>
  <label class="control-label mb5">Last Name</label
  ><input
    id="field_8777"
    class="form-control textfield screenShot data-hj-whitelist"
    data-parsley-group="step-0"
    type="text"
    name="field_8777"
    data-hj-whitelist=""
  />
  <div class="fbuilder-overlay">
    <div class="overlay-drag">
      <span class="draghelper"
        ><strong>Click and drag to move the field or:</strong></span
      ><button
        type="button"
        class="btn btn-default btn-xs pr10 mr10 edit-field-button"
        data-toggle="modal"
        data-backdrop="static"
        data-keyboard="false"
        data-target="#bs-modal-edit-field-text"
      >
        <i class="ico-pencil5"></i> Edit Field Details</button
      ><button
        type="button"
        class="btn btn-default btn-xs pr10 mr10 duplicate-field-button"
      >
        <i class="ico-file-plus"></i> Duplicate Field</button
      ><button
        type="button"
        data-toggle="modal"
        data-target="#bs-modal-delete-field"
        class="btn btn-danger btn-xs pr10 mr10 delete-field-button"
      >
        <i class="ico-trash"></i> Delete Field
      </button>
    </div>
  </div>
  <input
    type="hidden"
    id="field[8777][fieldType]"
    name="field[8777][fieldType]"
    value="0"
  /><input
    type="hidden"
    id="field[8777][label]"
    name="field[8777][label]"
    data-srcid="#edit-text-label"
    value="Last Name"
  /><input
    id="field[8777][column]"
    name="field[8777][column]"
    type="hidden"
    value="1"
  /><input
    id="field[8777][row]"
    name="field[8777][row]"
    type="hidden"
    value="0"
  />
</div>

SilenceBringer

5 years ago

Level 56

@david001 did you try scrollIntoView?

$browser->scrollIntoView('[data-fieldlabel="last name"]')

david001

5 years ago

Level 5

@silencebringer got error BadMethodCallException: Call to undefined method [scrollIntoView].

SilenceBringer

5 years ago

Level 56

@david001 it's method from docs https://laravel.com/docs/8.x/dusk#scrolling-an-element-into-view

david001

5 years ago

Level 5

Hi thanks for reply. My project is in laravel 5.8. is there anyway to achieve this in laravel 5.8? Thanks

SilenceBringer

5 years ago

Level 56

@david001 function scrollIntoView is

    public function scrollIntoView($selector)
    {
        $selector = addslashes($this->resolver->format($selector));

        $this->driver->executeScript("document.querySelector(\"$selector\").scrollIntoView();");

        return $this;
    }

so, you can try to it like so:

$selector = addslashes($browser->resolver->format('[data-fieldlabel="last name"]'));

$browser->driver->executeScript("document.querySelector(\"$selector\").scrollIntoView();");

david001

5 years ago

Level 5

@silencebringer , it is not working error: Facebook\WebDriver\Exception\JavascriptErrorException: javascript error: Cannot read property 'scrollIntoView' of null

SilenceBringer

5 years ago

Level 56

@david001 try to play with it

$selector = addslashes($browser->resolver->format("[data-fieldname='first name']"));

$browser->driver->executeScript("document.querySelector(\"$selector\").scrollIntoView();");

try to add $selector

$selector = addslashes($browser->resolver->format("[data-fieldname='first name']"));
dd($selector);

finally, you can try it in browser console

document.querySelector("[data-fieldname=\"first name\"]").scrollIntoView()

will it scroll to your element?

Also - does you render view static or using javascript?

david001

5 years ago

Level 5

is there anyway to scroll uptown text , like upto email address field or first name field

<label class="control-label pb5">First Name</label>

currently I am using this $browser->script('window.scrollTo(0, 140);');

but this is not the best solutions because my field can be anywhere in the form

Please or to participate in this conversation.