Comments (11)
@gsouf I agree that being able to tell the waitForNavigation
function to wait until the instance of a particular element is present on the page would be really cool. For now, the second option being to wait for the networkIdle
event seems to work great. Thanks for your detailed answer!
from chrome.
@orditeck I think there are 2 options.
The more accurate is that you are able to identify a state where your operation has completed. For instance the loader is not in the dom anymore. Unfortunately there are no shortcut to do that in the library yet, but it can be added.
The second option is to wait for the page event networkIdle
. This event occurs after the "load" event once no network operation are running for at least 500ms. The only drawback with this approach is that if the code that connects to your API waits for more than 500ms to trigger, then it would fail, but you can still try to give it a try:
$page
->navigate('http://page_with_react_asyn_fecth_data')
->waitForNavigation('networkIdle', 10000);
Can you let me know if it solves?
from chrome.
<?php
require_once 'vendor/autoload.php';
use HeadlessChromium\BrowserFactory;
use HeadlessChromium\Page;
$browserFactory = new BrowserFactory('/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome');
$browser = $browserFactory->createBrowser();
$page = $browser
->createPage();
$page
->navigate('http://page_with_react_asyn_fecth_data')
->waitForNavigation(Page::DOM_CONTENT_LOADED, 10000);
$html = $page
->evaluate('document.documentElement.innerHTML')
->getReturnValue();
echo $html;
from chrome.
This problem occurs with asynchronous javascripts.
from chrome.
@gsouf Is there any way right now to force the browser to wait until JavaScript is executed before marking waitForNavigation
as completed?
from chrome.
Hi @orditeck
Do you mean, when the javascript initially executes when page has loaded?
from chrome.
Basically I'd like the browser to wait for async call before marking waitForNavigation
as done. I have a react app calling an API and during the API call it shows a loading. getReturnValue()
only shows the loader, never the content, and it's all local for now so it load very fast, the browser just doesn't wait and as soon as the DOM is ready it sends the response and mark waitForNavigation
as completed.
from chrome.
@orditeck there are some confusions that I need to clarify before I give you the right answer.
waitForNavigation
is used when the page initially loads and getReturnValue()
is used after we injected code to be executed in the browser.
Can you, please, give me a sample of the code that you are running to make sure I'll answer it corretcly?
from chrome.
@orditeck You could also deasync the function
from chrome.
The ->waitForNavigation('networkIdle', 60000);
solved it for me. But I still had to put in a little hack couse 500ms was not enough for my JS to finish. So I made a server request where the endpoint took 5 secords to finish, and it gave me cca. 5500ms before the page got evaluated (before network idle was true I guess) .
Example:
Route::get('headlessChrome/fakeCall', function(){
sleep(5);
return 'You got 5 seconds of network not idle!';
});
Am not too proud of this, but its a solution
Note: I put the server request to the page myself becouse the page I am accessing is mine. But as its possible to add a script before waitForNavigation()
, technically you should be able to inject a script that makes a call to a "delay" endpoint. DID NOT TEST THIS!
If I missed an obvious solution to this problem, please ping me about it :).
from chrome.
This issue has been automatically marked as stale because there has been no recent activity. It will be closed after 30 days if no further activity occurs. Thank you for your contributions.
from chrome.
Related Issues (20)
- HeadlessChromium\Input\Mouse::find() should support XPath HOT 1
- About alert(); HOT 4
- About Network information HOT 1
- How to press escape HOT 3
- Only get specific pages of pdf HOT 1
- How to login to a page HOT 6
- `headless` set to `false` doesn't show GUI when executing as a service on Windows HOT 5
- PDF styles (assets) are not loading
- [BUG] Timeout not being honored
- [Question] How to close all opened browsers HOT 2
- How to achieve a cyclic refresh of the page to obtain the latest content? HOT 2
- headless=>false is ignored in WSL? HOT 2
- Sometimes content is not fully loaded. How can we check if it is fully loaded or not HOT 7
- Trying to click <option> tag inside <select> throws "Could not compute box model" in getPosition HOT 2
- Error creating browser, traced to symfony process HOT 1
- Looping over `querySelectorAll` results and performing actions throws `Uncaught DomException: -32000 - Could not find node with given id`
- referer work or not? HOT 4
- Support for Firefox headless
- WebGL issues with ARM (Mac M1 etc) version of Chrome
- Running chrome-php inside a Docker Container: Permission denied HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chrome.