Feb 20, 2024

Level 1

Laravel Dusk timeout

Hey together, I'm trying to run laravel dusk on my m2 mac with laravel sail and inertia but I'm not getting it to run properly. I did the setup as mentioned in the documentation and I can run the LoginTest, but it's returning false for every element I'm trying to look for and afterwards throws this error:

  timeout: Timed out receiving message from renderer: 10.000
  (Session info: chrome=121.0.6167.85)

  at vendor/php-webdriver/webdriver/lib/Exception/WebDriverException.php:136
    132▕                     throw new StaleElementReferenceException($message, $results);
    133▕                 case 'detached shadow root':
    134▕                     throw new DetachedShadowRootException($message, $results);
    135▕                 case 'timeout':
  ➜ 136▕                     throw new TimeoutException($message, $results);
    137▕                 case 'unable to set cookie':
    138▕                     throw new UnableToSetCookieException($message, $results);
    139▕                 case 'unable to capture screen':
    140▕                     throw new UnableToCaptureScreenException($message, $results);

This is the test I try to run:

    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->assertSee('email');
        });
    }

alden8

2 years ago

Level 1

@therabber

-- Element Not Rendered or State Issues:

--- Timing and Rendering: Ensure the 'email' element exists and is visually rendered on the page before asserting its presence. Use wait() or waitFor($selector, $timeout) before assertions to give the browser time to load and render the element.

--- Element Visibility: If the element is hidden by CSS or JavaScript, use assertVisible() instead of assertSee().

--- Shadow DOM or Dynamic Components: If the element is within a Shadow DOM or dynamically loaded, use techniques like withinShadow() or waitForInertial` (see #3 below) to access it correctly.

-- Chrome Driver Version and Configuration:

--- Compatibility: Verify that your Chrome driver version aligns with your Chrome browser version. Use the latest stable versions or check compatibility charts.

--- Headless or Debugging Modes: If using headless or debugging modes (i.e., with flags), double-check that they don't interfere with rendering or communication.

--- Network Issues: Ensure stable network connectivity and a fast enough connection for browser tasks.

--- Permissions: Consider granting necessary permissions to Chrome Driver, especially in controlled environments.

-- Inertia-Specific Causes:

--- waitForInertial(): Implement waitForInertial($timeout) before assertions or interactions that depend on Inertia app state changes. This waits for the page to become interactable after state updates.

--- State Synchronization: If your test involves modifying application state, ensure proper synchronization between Dusk and the Inertia app to avoid element staleness or missing actions. Use visitInertial() or relevant assertInertial() methods.

-- Browser Configuration/Extensions:

--- Disable Extensions: Temporarily disable extensions that might interfere with WebDriver communication or page loading.

--- Profile Cleanup: Try starting with a fresh Chrome profile to rule out profile-specific issues.

---- Chrome DevTools: Use Chrome DevTools to inspect element states, network requests, and console logs for debugging clues.

-- Debugging and Logging:

--- Increase Verbosity: Use LogLevel::debug in DuskTestCase or DuskEnvironment for detailed logs.

--- Chrome Debugging: Consider enabling WebDriver Chrome debugging port and attaching DevTools for deeper visibility.

--- Network Inspection: Monitor network requests and responses in DevTools to identify potential problems during loading or interactions.

TheRabber

2 years ago

Level 1

@alden8 Thanks for the reply, I checked with $browser->dump() for what is rendered and it shows the desired text inside the body, not hidden.

I also added a wait for 10 seconds and it wasn't working. I don't have the waitforInertia option available.

Short Update: I now also took a look at what the browser shows using the selenium ui output. It only renders a blank page, however it's calling the correct url, as when I remove the DatabaseTruncation it throws an Error with table not found... So there must be a problem with rendering the inertia stuff in the chrome browser used by selenium.

alden8

2 years ago

Level 1

@TheRabber

Good. Here are some other steps you can take to fix this problem:

-- Debug Inertia Rendering:

--- Network Monitoring: Thoroughly inspect network requests and responses in Chrome DevTools to see if Inertia requests are failing, returning errors, or not being sent properly by the Laravel Sail environment. Check for CORS issues if applicable.

--- JavaScript Console: Open the JavaScript console in DevTools and look for any errors or warnings that might hinder Inertia's functionality. Pay attention to potential JavaScript errors or conflicts with other scripts that could interfere with rendering.

--- Inertia Server-Side Debugging: If configured, use Inertia's server-side debugging tools to log information about requests and responses, providing insight into any issues on the server side.

-- Verify ChromeDriver Configuration:

--- Capabilities: Double-check your ChromeDriver capabilities used by Dusk. Ensure they're set up correctly for headless or debugging modes if that's your testing environment.

--- Network Restrictions: Make sure ChromeDriver has necessary network permissions, especially in controlled environments like Docker containers.

--- Chrome Versions: Confirm compatibility between your ChromeDriver version and your Chrome browser version. Refer to official documentation for supported combinations.

-- Browser Extension Interference:

--- Temporary Disabling: As before, temporarily disable any Chrome extensions that might interfere with Inertia or page rendering. Try running your tests again to see if it resolves the issue.

--- Incognito Mode: Test in Chrome's incognito mode to rule out extension interference in a clean profile.

-- Code-Level Checks:

--- Inertia Setup: Verify that your Inertia setup in Laravel Sail is correct, including configuration files, middleware, and routing. Ensure everything is defined as expected for the test environment.

--- Test Page Structure: Examine the HTML structure of the test page. Ensure the 'email' element exists in the DOM structure with appropriate tags and attributes. If it's dynamically generated by JavaScript, address waitForInertial() or wait() strategies as needed.

-- Consider Alternative Debugging Tools:

--- BrowserStack Selenium Grid: Try running your tests using a cloud-based Selenium Grid like BrowserStack to see if the issue persists in different browser environments. This can help isolate the problem to your local setup or configuration.

--- Visual Testing Tools: If applicable, consider using visual testing tools like Cypress or Playwright. These tools often offer better debugging capabilities and might provide more clues about the rendering issue.

TheRabber

2 years ago

Level 1

@alden8 I think I give up for now. I have no clue what exactly is happening. I checked the console. Data is inside the body tag, but loading the .vue file causes conection refused. I can't see why. Like the Login.vue is returning a connection refused. Laravel.test istself not

Update: just restarted the mac for updates and now it works... wtf?

1 like

anchan42

1 year ago

Level 4

In my case, the problem comes from npm run dev that taking too long. When Dusk swap the .env file it would trigger vite to re-bundle the assets and that take too long. It would work ok if I use npm run build.

I resolve it by changing from scss to css. That cut the time is take to convert scss to css. Hope it help someone that might come along :)

2 likes

Please or to participate in this conversation.