How to use _createTimeoutPromise method in Puppeteer

Puppeteer cannot return non-serialisable value from evaluate statement (see this issue and the following PR)

One way to solve this would be:

let projects = await page.evaluate((sel) => {

        return document.getElementsByClassName(sel)[0].href;
    }, 'homepage-project-image');

Remember that document.getElementsByClassName returns HTMLCollection, so if you want to iterate over the results you need something like:

 let projects = await page.evaluate((sel) => {
            return Array.from(document.getElementsByClassName(sel)).map(node => node.href);
        }, 'homepage-project-image');

easier way that worked for me

const localStorage = await page.evaluate(() => Object.assign({}, window.localStorage));

You can use the following solution to iterate and hover over certain elements to obtain the computed style:

const elements = await page.$$('.abc');
const data = [];

for (let i = 0; i < elements.length; i++) {
  await elements[i].hover();
  data.push(await page.evaluate(element => window.getComputedStyle(element), elements[i]));
}

console.log(data);

You should be able to do something like:

await page.waitForFunction((finalUrl) => {
  return document.location === finalUrl
}, {}, finalUrl).catch(retry)

but it might be simpler to just:

await page.waitForResponse(finalUrl).catch(retry)

Give this a shot:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    await page.goto('https://www.yoursite.com');
    await page.setViewport({
        width: 1200,
        height: 800
    });

    await autoScroll(page);

    await page.screenshot({
        path: 'yoursite.png',
        fullPage: true
    });

    await browser.close();
})();

async function autoScroll(page){
    await page.evaluate(async () => {
        await new Promise((resolve) => {
            var totalHeight = 0;
            var distance = 100;
            var timer = setInterval(() => {
                var scrollHeight = document.body.scrollHeight;
                window.scrollBy(0, distance);
                totalHeight += distance;

                if(totalHeight >= scrollHeight - window.innerHeight){
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
    });
}

Source: https://github.com/chenxiaochun/blog/issues/38

EDIT

added window.innerHeight to the calculation because the available scrolling distance is body height minus viewport height, not the entire body height.

Page assets are not stored on disk, they are held in browser memory and sometimes cached, so it's impossible to know their sizes.

What you want to look at is web scraping, which can be done with modules like node-website-scraper or with puppeteer :

page.on('response', async (response) => {
    const url = new URL(response.url());
    let filePath = path.resolve(`./output${url.pathname}`);
    if (path.extname(url.pathname).trim() === '') {
      filePath = `${filePath}/index.html`;
    }
    await fs_extra.outputFile(filePath, await response.buffer());
  });

The piece of code above will intercept requests and save them in an output folder, where you can check their sizes. See the linked article for more details.

You are just calling the constructor in your code. You also need to call the login function. Also you don't want to put the await in front of your constructor but in front of login.

Code

const tools = new Tools();
await tools.login();

About async constructor functions

Be aware that you cannot use constructor calls (new Tools) with await. The reason is, that await waits for the returned Promise to be resolved. But constructor functions cannot return a Promise as they need to return the newly created object.

That's why libraries like puppeteer use factory functions like puppeteer.launch. These functions will create an object in addition to calling asynchronous functions afterwards. If you want to do something similar in your code, you can do it like this:

class Tools {
  async initialize() {
    // ...
  }
  static async create() {
    const newObject = new Tools();
    await newObject.initialize();
  }
}


const tools = await Tools.create();

The timeout you specify here needs to be shorter than the default timeout.

The default timeout is 5000 and the framework by default is jasmine in case of jest. You can specify the timeout inside the test by adding

jest.setTimeout(30000);

But this would be specific to the test. Or you can set up the configuration file for the framework.

Configuring Jest

// jest.config.js
module.exports = {
  // setupTestFrameworkScriptFile has been deprecated in
  // favor of setupFilesAfterEnv in jest 24
  setupFilesAfterEnv: ['./jest.setup.js']
}

// jest.setup.js
jest.setTimeout(30000)

See also these threads:

setTimeout per test #5055

Make jasmine.DEFAULT_TIMEOUT_INTERVAL configurable #652

P.S.: The misspelling setupFilesAfterEnv (i.e. setupFileAfterEnv) will also throw the same error.

Yes,

const browser = await puppeteer.launch({
    args: ['--enable-features=NetworkService'],
    headless: true,
    ignoreHTTPSErrors: true,
  });

--enable-features=NetworkService enables service worker (experimental) and ignoreHTTPSErrors is required to overcome the https requirement of service workers when in the puppeteer context (served over file:///)