I&#39;m using Puppeteer and Jest to run some front end tests.

My tests look as follows:

&lt;!-- language: lang-html --&gt;

    describe(&quot;Profile Tab Exists and Clickable: /settings/user&quot;, () =&gt; {
        test(`Assert that you can click the profile tab`, async () =&gt; {
          await page.waitForSelector(PROFILE.TAB);
          await page.click(PROFILE.TAB);
        }, 30000);
    });

&lt;!-- end snippet --&gt;

Sometimes, when I run the tests, everything works as expectedly. Other times, I get an error:

&gt; Timeout - Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.
&gt;
&gt;          at node_modules/jest-jasmine2/build/queue_runner.js:68:21 &lt;br/&gt;
&gt;          at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:633:19)

This is strange because:

1. I specified the timeout to be 30000

2. Whether or not I get this error is seemingly very random

Why is this happening?







Message &quot;Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout&quot;

I&#39;m trying to pass a variable into a `page.evaluate()` function in [Puppeteer][1], but when I use the following very simplified example, the variable `evalVar` is undefined.

I&#39;m new to Puppeteer and can&#39;t find any examples to build on, so I need help passing that variable into the `page.evaluate()` function so I can use it inside.

    const puppeteer = require(&#39;puppeteer&#39;);
    
    (async() =&gt; {
    
      const browser = await puppeteer.launch({headless: false});
      const page = await browser.newPage();

      const evalVar = &#39;WHUT??&#39;;
    
      try {
    
        await page.goto(&#39;https://www.google.com.au&#39;);
        await page.waitForSelector(&#39;#fbar&#39;);
        const links = await page.evaluate((evalVar) =&gt; {

          console.log(&#39;evalVar:&#39;, evalVar); // appears undefined

          const urls = [];
          hrefs = document.querySelectorAll(&#39;#fbar #fsl a&#39;);
          hrefs.forEach(function(el) {
            urls.push(el.href);
          });
          return urls;
        })
        console.log(&#39;links:&#39;, links);
    
      } catch (err) {
    
        console.log(&#39;ERR:&#39;, err.message);
    
      } finally {
    
        // browser.close();
    
      }
    
    })();


  [1]: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args

How can I pass variable into an evaluate function?

Is there any method (didn&#39;t find in API) or solution to click on element with text?

For example I have html:

    &lt;div class=&quot;elements&quot;&gt;
        &lt;button&gt;Button text&lt;/button&gt;
        &lt;a href=#&gt;Href text&lt;/a&gt;
        &lt;div&gt;Div text&lt;/div&gt;
    &lt;/div&gt;

And I want to click on element in which text is wrapped (click on button inside .elements), like:

    Page.click(&#39;Button text&#39;, &#39;.elements&#39;)


How to click on element with text in Puppeteer

In *puppeteer* I would like to wait a defined time before going to the next line of code.

I&#39;ve tried to put a `setTimeout` in an evaluate function but it seems to be simply ignored 

```javscript
console.log(&#39;before waiting&#39;);
await page.evaluate(async() =&gt; {
  setTimeout(function(){
      console.log(&#39;waiting&#39;);
  }, 4000)
});
console.log(&#39;after waiting&#39;);
```
This code don&#39;t wait and just write *before waiting* and *after waiting*

Do you know how to do this?

puppeteer: wait N seconds before continuing to the next line

I submit a form using the following code and i want Puppeteer to wait page load after form submit.


    await page.click(&quot;button[type=submit]&quot;);
    
    //how to wait until the new page loads before taking screenshot?
    // i don&#39;t want this:
    // await page.waitFor(1*1000);  //← unwanted workaround
    await page.screenshot({path: &#39;example.png&#39;});


How to wait for page load with puppeteer?

Puppeteer wait page load after form submit

I&#39;m using [Puppeteer][1] for E2E test, and I am now trying to fill an input field with the code below:

    await page.type(&#39;#email&#39;, &#39;test@example.com&#39;);

It worked, but I found the email address was typed into the field one character by one character as if a real human being was typing.

Is it possible to fill the input field with the email address all at one time?

  [1]: https://github.com/GoogleChrome/puppeteer

How to fill an input field using Puppeteer?

I can click the selector but my question is how to select one of the options from the dropdown list? 

```javascript
await page.click(&#39;#telCountryInput &gt; option:nth-child(4)&#39;)
```

Click the option using CSS selector does not work.

For example, select a country code from a list like below:

[![screenshot of the select element][1]][1]


  [1]: https://i.stack.imgur.com/m7eLDm.png

How to select an option from dropdown select

I am working on creating PDF from web page.

The application on which I am working is single page application.

I tried many options and suggestion on https://github.com/GoogleChrome/puppeteer/issues/1412

But it is not working

        const browser = await puppeteer.launch({
        executablePath: &#39;C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe&#39;,
        ignoreHTTPSErrors: true,
        headless: true,
        devtools: false,
        args: [&#39;--no-sandbox&#39;, &#39;--disable-setuid-sandbox&#39;]
    });

    const page = await browser.newPage();

    await page.goto(fullUrl, {
        waitUntil: &#39;networkidle2&#39;
    });

    await page.type(&#39;#username&#39;, &#39;scott&#39;);
    await page.type(&#39;#password&#39;, &#39;tiger&#39;);
    
	await page.click(&#39;#Login_Button&#39;);
	await page.waitFor(2000);

    await page.pdf({
        path: outputFileName,
        displayHeaderFooter: true,
        headerTemplate: &#39;&#39;,
        footerTemplate: &#39;&#39;,
        printBackground: true,
        format: &#39;A4&#39;
    });

What I want is to generate PDF report as soon as Page is loaded completely.

I don&#39;t want to write any type of delays i.e. 	await page.waitFor(2000);

I can not do waitForSelector because the page has charts and graphs which are rendered after calculations.

Help will be appreciated.


Puppeteer wait until page is completely loaded

I&#39;m using node.js and puppeteer to get some data. Some of the files I&#39;m opening are quite large ... and then I get an error:

Error: 

	our error { TimeoutError: Navigation Timeout Exceeded: 30000ms exceeded
	    at Promise.then (/project/node_modules/puppeteer/lib/NavigatorWatcher.js:74:21)
	    at &lt;anonymous&gt; name: &#39;TimeoutError&#39; }
	
How can I ignore it or set a higher timeout?	
	
That&#39;s my script:	

	await page.goto(&#39;url&#39;+tableCell04Val, {waitUntil: &#39;load&#39;});
	

Node.js puppeteer - How to set navigation timeout?

I would like to know if I can tell puppeteer to wait until an element is displayed.

```javascript
const inputValidate = await page.$(&#39;input[value=validate]&#39;);
await inputValidate.click()
        
// I want to do something like that 
waitElemenentVisble(&#39;.btnNext &#39;)

const btnNext = await page.$(&#39;.btnNext&#39;);
await btnNext.click();
```

Is there any way I can accomplish this?

puppeteer: how to wait until an element is visible?

I am in a situation where new content is created when I scroll down. The new content has a specific class name.

How can I keep scrolling down until all the elements have loaded?

In other words, I want to reach the stage where if I keep scrolling down, nothing new will load.

I was using code to scroll down, coupled with an 

    await page.waitForSelector(&#39;.class_name&#39;);

The problem with this approach is that after all the elements have loaded, the code keeps on scrolling down, no new elements are created and eventually I get a timeout error.

This is the code:

    await page.evaluate( () =&gt; {
      window.scrollBy(0, window.innerHeight);
    });
    await page.waitForSelector(&#39;.class_name&#39;);

Puppeteer - scroll down until you can&#39;t anymore

I want to create a scraper that:

 1. opens a headless browser,
 2. goes to a [url][1],
 3. logs in (there is steam oauth),
 4. fills some inputs, 
 5. and clicks 2 buttons.

My problem is that every new instance of headless browser clears my login session, and then I need to login again and again... 

**How to save it through instances?** (using puppeteer with headless chrome)

Or **how can I open already logged in chrome headless instance?** (if I have already logged in in my main chrome window)


  [1]: https://cs.money/

How to manage log in session through headless chrome?

Is it possible to open a local HTML file with headless Chrome using Puppeteer (without a web server)? I could only get it to work against a local server.

I found `setContent()` and `goto()` in the [Puppeteer API documentation][1], but:

 1. `page.goto`: did not work with a local file or `file://`.
 2. `page.setContent`: is for an HTML string

  [1]: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options

Opening local HTML file using Puppeteer

I am fetching a page with puppeteer that has some errors in the browser console but the puppeteer&#39;s console event is not being triggered by all of the console messages.

The puppeteer chromium browser shows multiple console messages

![multiple console messages][1]

However, puppeteer only console logs one thing in node


![console logs one thing in node][2]

Here is the script I am currently using:

    const puppeteer = require(&#39;puppeteer&#39;);

    (async () =&gt; {
      const browser = await puppeteer.launch();
      const page = await browser.newPage();
      page.on(&#39;console&#39;, msg =&gt; console.log(&#39;PAGE LOG:&#39;, msg.text));
      await page.goto(&#39;https://pagewithsomeconsoleerrors.com&#39;);
      await browser.close();
    })();

Edit: As stated in my comment below, I did try the page.waitFor(5000) command that Everettss recommended but that didn&#39;t work.

Edit2: removed spread operator from `msg.text` as it was there by accident.

Edit3: I opened an issue on github regarding this with similar but different example screenshots: https://github.com/GoogleChrome/puppeteer/issues/1512

  [1]: https://i.stack.imgur.com/j083t.png
  [2]: https://i.stack.imgur.com/OgWer.png

How to get all console messages with puppeteer? including errors, CSP violations, failed resources, etc

Pressing enter in puppeteer doesn&#39;t seem to have any effect. However, when I press other keys, it does what it should. 
This works:

    await page.press(&#39;ArrowLeft&#39;);

This doesn&#39;t:

    await page.press(&#39;Enter&#39;);

This is how the input looks like:

[![enter image description here][1]][1]

Any ideas?


  [1]: https://i.stack.imgur.com/F3Eo4.png

EDIT: I&#39;ve also tried page.keyboard.down &amp; page.keyboard.up to be sure.

Pressing Enter button in puppeteer

When I run a new page, I must specify size of the viewport using the `setViewport` function:

	await page.setViewport({
		width: 1920,
		height: 1080
	})

I want use max viewport.

How can I make the viewport resizable according to the window size?

How to set max viewport in Puppeteer?

I am using [Puppeteer][1] to try to take a screenshot of a website after all images have loaded but can&#39;t get it to work.

Here is the code I&#39;ve got so far, I am using https://www.digg.com as the example website:

    const puppeteer = require(&#39;puppeteer&#39;);
    
    (async () =&gt; {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto(&#39;https://www.digg.com/&#39;);
    
        await page.setViewport({width: 1640, height: 800});
    
        await page.evaluate(() =&gt; {
            return Promise.resolve(window.scrollTo(0,document.body.scrollHeight));
        });
    
        await page.waitFor(1000);
    
        await page.evaluate(() =&gt; {
            var images = document.querySelectorAll(&#39;img&#39;);
    
            function preLoad() {
    
                var promises = [];
    
                function loadImage(img) {
                    return new Promise(function(resolve,reject) {
                        if (img.complete) {
                            resolve(img)
                        }
                        img.onload = function() {
                            resolve(img);
                        };
                        img.onerror = function(e) {
                            resolve(img);
                        };
                    })
                }
    
                for (var i = 0; i &lt; images.length; i++)
                {
                    promises.push(loadImage(images[i]));
                }
    
                return Promise.all(promises);
            }
    
            return preLoad();
        });
    
        await page.screenshot({path: &#39;digg.png&#39;, fullPage: true});
    
        browser.close();
    })();


  [1]: https://github.com/GoogleChrome/puppeteer

Puppeteer wait for all images to load then take screenshot

How can I console.log something inside the page.evaluate, passing it to node and using it **during** the evaluation of the page?

I actually want to log the progress of the page.evaluate to the console and show some results to the user. 

Puppeteer log inside page.evaluate

I used `npm i puppeteer` as stated in the [Documentation][1]
and I&#39;m getting the following error:

 **(node:2066) UnhandledPromiseRejectionWarning: Error: Chromium revision is not downloaded. Run &quot;npm install&quot; or &quot;yarn install&quot;
    at Launcher.launch** 

when im trying this example (also from the docs):

    const puppeteer = require(&#39;puppeteer&#39;);
    (async () =&gt; {
      const browser = await puppeteer.launch();
      const page = await browser.newPage();
      await page.goto(&#39;https://example.com&#39;);
      await page.screenshot({path: &#39;example.png&#39;});
      await browser.close();
    })();


Also in the documentation:

&gt; Note: When you install Puppeteer, it downloads a recent version of Chromium (~170MB Mac, ~282MB Linux, ~280MB Win) that is guaranteed to work with the API.

Any help would be appreciated.


  [1]: https://github.com/GoogleChrome/puppeteer#getting-started

Puppeteer Error: Chromium revision is not downloaded

Using [puppeteer][1], how could you programmatically submit a form? So far I&#39;ve been able to do this using `page.click(&#39;.input[type=&quot;submit&quot;]&#39;)` if the form actually includes a submit input. But for forms that don&#39;t include a submit input, focusing on the form text input element and using `page.press(&#39;Enter&#39;)` doesn&#39;t seem to actually cause the form to submit:


    const puppeteer = require(&#39;puppeteer&#39;);
    
    (async() =&gt; {
    	
    	const browser = await puppeteer.launch();
    	const page = await browser.newPage();
    	await page.goto(&#39;https://stackoverflow.com/&#39;, {waitUntil: &#39;load&#39;});
    	console.log(page.url());
    
    	// Type our query into the search bar
    	await page.focus(&#39;.js-search-field&#39;);
    	await page.type(&#39;puppeteer&#39;);
    
    	// Submit form
    	await page.press(&#39;Enter&#39;);
    
    	// Wait for search results page to load
    	await page.waitForNavigation({waitUntil: &#39;load&#39;});
    
    
    	console.log(&#39;FOUND!&#39;, page.url());
    
    	// Extract the results from the page
    	const links = await page.evaluate(() =&gt; {
    	  const anchors = Array.from(document.querySelectorAll(&#39;.result-link a&#39;));
    	  return anchors.map(anchor =&gt; anchor.textContent);
    	});
    	console.log(links.join(&#39;\n&#39;));
    	browser.close();
    
    })();

  [1]: https://github.com/GoogleChrome/puppeteer


All Puppeteer Solutions on Gang of Coders

Total of 20 Puppeteer Solutions

Message "Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout"