How to use wsEndpoint method in Puppeteer

As discussed in the comments,

page.$eval('.loaded.active .full', el => el.src)

works thanks to two things:

1. Using $eval rather than $$eval to select one element
2. Using .loaded.active .full to select the first .full descendent of the first .loading.active parent.

Puppeteer provides a method to click on a specific pixel on the page (Mouse.click(x, y)). You could calculate where that is relative to your element's position:

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("http://yoursite.com");

  const elem = await page.$("#my-element");
  await clickOnElement(elem, 400);

  await page.screenshot({ path: "example.png" });

  await browser.close();

  // Clicks on an element at position x,y
  async function clickOnElement(elem, x = null, y = null) {
    const rect = await page.evaluate(el => {
      const { top, left, width, height } = el.getBoundingClientRect();
      return { top, left, width, height };
    }, elem);

    // Use given position or default to center
    const _x = x !== null ? x : rect.width / 2;
    const _y = y !== null ? y : rect.height / 2;

    await page.mouse.click(rect.left + _x, rect.top + _y);
  }
})();

$$ returns a promise of an element, while length is not a promise, it's actual value.

It should be:

const read = (await page.$$('.Ns6lhs9._gfh3')).length;

i found the answer , just in case anyone has this problem just in your browser console play with this object ___grecaptcha_cfg to find the callback mine was here

___grecaptcha_cfg.clients[0].L.L.callback

but it can have different structure for other websites

so basically after i recived the token and put it in the #g-recaptcha-response` i called this function and passed the token as argument

    let js = `___grecaptcha_cfg.clients[0].L.L.callback("${cap}")`;
    await page.evaluate(js);

sudo apt-get update
sudo apt-get install -y libgbm-dev

Above command fixed my problem. While doing some research on this issue I also found some other useful links which might help someone.

Answer which helped me
Official Puppeteer Github Guide for different Platforms
Medium Tutorial

You can use

document.getElementById

You want the text content so use :

var res = document.getElementById('dt-card-entry_info').textContent;

Your method can be used like this then :

const text = await page.evaluate(() => {
        const el = document.getElementById('dt-card-entry_info');
        return el.textContent;
    })

I don't like the await pageEval in the const def, so I would change it outside the scope of the eval.

This is because the pageEval is a promise, so you will need in turn to return a promise of the string content. Read More Here

let text = '';
await page.evaluate(() => {
    const el = document.getElementById('dt-card-entry_info');
    text = el.textContent;
})
console.log(text);

You can it working here : https://jsfiddle.net/9s4zxvLk/

There are two environments to consider when using Puppeteer:

1. Node.js Environment
2. Page DOM Environment

The Node.js environment is built upon Google's Chrome V8 JavaScript engine.

Chrome V8 describes its relation to the DOM:

JavaScript is most commonly used for client-side scripting in a browser, being used to manipulate Document Object Model (DOM) objects for example. The DOM is not, however, typically provided by the JavaScript engine but instead by a browser. The same is true of V8—Google Chrome provides the DOM. V8 does however provide all the data types, operators, objects and functions specified in the ECMA standard.

In other words, the DOM is not provided by default to Node.js.

This means that Node.js does not have the capability to interpret DOM elements on its own.

This is where Puppeteer comes in.

The Puppeteer function page.evaluate() allows you to evaluate an expression in the current Page DOM context using Chrome or Chromium.

The Puppeteer documentation describes what happens when you attempt to return a non-serializable value, like a DOM element:

If the function passed to the page.evaluate returns a non-Serializable value, then page.evaluate resolves to undefined.

Again, this is because Node.js does not know how to interpret DOM elements without help.

As a result, Puppeteer has implemented an ElementHandle class which represents an in-page DOM element.

You can use elementHandle.$(), elementHandle.$$(), or elementHandle.$x() to return ElementHandles back to Node.js.

The ElementHandle class is serializable, so that it can be interpreted properly in the Node.js environment.

Therefore, if you need to manipulate an element directly, you can do so inside page.evaluate(). If you need to access a representation of an element, use page.$() or one of its related functions.

If you have control over the server, you can pass the size of the image as HTTP headers. Otherwise, you can only read the size of the image without loading it.

Reading the size of the image

The following code is a minimal example on how to read the size (in bytes) of the image without downloading it. It will abort any image requests and then instead do a HEAD request to only request the headers of the file to read the content-length header. Be aware that this only returns the total file size and not width or height.

const puppeteer = require('puppeteer');
const fetch = require('node-fetch');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setRequestInterception(true);

    page.on('request', interceptedRequest => {
        if (interceptedRequest.resourceType() === 'image') {
            interceptedRequest.abort();
            const response = await fetch(interceptedRequest.url(), {
                method: 'HEAD'
            });
            if (response.ok) {
                const sizeOfImage = response.headers.get('content-length');
                // handle image size
            } else {
                // something went wrong...
            }
        } else {
            interceptedRequest.continue();
        }
    });
    await page.goto('...');
    await browser.close();
})();

Passing the size of the image as header

In case you have control of the backend/server, you can pass the size of the image as an header and the read it with the same code as given before. Just change the header from content-length to the headers sending the width and height.

As you did not say anything about the backend I'm assuming this is not possible. In case you have control over the backend and you are using Node.js as backend, you might want to read this question on how to read the image size with Node.js.

More is not possible without loading the image. In a case you do not control the server, but need to know the naturalHeight and naturalWidth properties of the image, you have to load the image.

await expect(page.locator(".MyClass")).toHaveCount(0)