Laravel Dusk how to find elements inside elements?

Question

I'm using Laravel 5.8, Dusk. I would like to find certain elements inside a class.

So let's say I extracted every element on the page with the class of selectable.

$browser->visit('https://www.website.com')
        ->script('window.scrollTo(0, 10000);');

$elems = $browser              
          ->pause(1000)
          ->elements('.selectable');

After this I iterate through these elements like this:

foreach ($elems as $elem) {

}

The question is, how can I find every element with the class of .custom-item inside these .selectable classes. Additionally, I'd like to get one of .custom-item's attribute. I used to get it like this:

$elem->getAttribute('custom-attribute');

(Learned from this Laravel Dusk how to get multiple element's attributes? post)

So how can I find/extract elements inside elements and then get their custom attributes with Laravel Dusk?

Answer 1

Laravel Dusk does not provide an API method to locate elements. You can do it by utilising the underlying webdriver API.

You can access the webdriver via

$browser->driver

And to find an element wihtin another element. You will probably need to approach it via xPath

$browser->driver->findElements(WebDriverBy::xpath('//*[@class="selectable"][@class="custom-attribute"]'));

I made up xpath in above example. You can find the exact xpath by inspecting the element in chrome developer tool.

You can read more about selectors in Dusk here

https://www.5balloons.info/understanding-selectors-laravel-dusk-browser-testing/

Answer 2

The easier way:

$advs = $browser->elements('CSS_SELECTOR');

foreach ($advs as $adv) {

   // for example
   $adv->click();

}