Laravel dusk scroll and waitFor dynamic element

Question

I have lists which dynamically shows when scroll down the page, for example, when I open the page, there is only <div id="list-0" date="2018-01-01"></div>, and after I scroll down, <div id="list-1" date="2018-01-02"></div> will dynamically shows up, same as <div id="list-2" date="2018-01-03"></div> and <div id="list-3" date="2018-01-04"></div> and so on.

Those lists are not able to see on chrome view-source(ctrl+U)

I want to use laravel dusk to scroll down page if there is no list-n, and retrieve the date attribute.

Here is my code

/** @test */
public function scroll_down_each_list_and_match_the_date()
{
    $this->browse(function (Browser $browser) {

        $browser->visit('/lists');

        $listsLength = $this->listsLength();

        for($i = 0; $i <= $listsLength; $i++){

            $selector = "div[id=\"list-$i\"]";

            while(!$browser->waitFor($selector)){

                $browser->driver->executeScript('window.scrollTo(0, 500);');
            }

        $date = $browser->attribute($selector, 'date');

        $browser->assertEquals($date, $this->date($i));

        }
    });
}

The Assertion Error is Facebook\WebDriver\Exception\TimeOutException: Waited 5 seconds for selector [div[id="list-1"]].

if I replace while(!$browser->waitFor($selector)) to while(!$browser->element($selector)), it seems like laravel dusk will execute forever and won't stop.

gboone gboone · Accepted Answer · 2018-12-08T15:57:13

Instead of: $selector = "div[id=\"list-$i\"]";

Maybe try: $selector = $browser->attribute('list-$i', 'id');

Laravel dusk scroll and waitFor dynamic element

1 Answers