Dusk Not finding Elements even when Elements exists in Devtools Dom

Hello every one,

The issue I am having is a bit complicated to spell out but let me try.

I am trying to make a simple dusk test that clicks buttons on a pop up, the pop up is set as an overlay of the home page. When I try to find the pop up element Dusk returns a null value. both by using $browser->press("selector") or hard coding the JS in like as follows

$js = "return document.querySelector('selector')";
         $element = $browser->script($js)[0];

I have narrowed down the issue. In chrome dev tools, In the JS console there is a dropdown field that decides "javaScript Context:" The default is "Top".

screenshot of chrome dev tools

while the contexts is set to "Top", Chrome cannot find the element. But, when I change the javascript context, Chrome DevTools console can now access the elements that I am trying to find.

so what can I do?

Is there a way to change the "JavaScript Context" in Dusk?

Is there another way for me to access the elements?

Here is a copy of my simple test (work in progrss)

public function testPopUpMain()
    {
        $this->browse(function(Browser $browser){
			// The public test logs me in and sends me to the base url.
           // The pop up I am trying to access loads automatically after log in
            $publicTest = new publicTest();
            $publicTest->LogIn();
            $browser->pause(5000);

            $js = "document.querySelector('Selector').click()";
            $browser->script($js);
        });
    }

Any help would be appreciated

Yonibrese

2 years ago

Best Answer

Level 1

Ok, so I found the answer.

Part of the issue was that I did not understand that the pop up is in an Iframe.

This changes the Javascript context in the devtools.

To access an Iframe and all of the elements inside, I used the following method:

$browser->withinFrame("Iframe_selector",function(Browser $popUpFrame){
                    $js = "return document.querySelector('selector')";
                    $element = $popUpFrame->script($js)[0];
                });

Please or to participate in this conversation.