How to use getProduct method in Puppeteer

You need to include the Puppeteer Heroku buildpack to the list of buildpacks for your app. Go to your Heroku dashboard and open your app. Go to Settings > Buildpacks > Add buildpack and use this URL.

https://github.com/jontewks/puppeteer-heroku-buildpack

When you click add buildpack, simply paste that URL into the input, and click save. On the next deploy, your app will also install the dependencies that Puppeteer needs to run.

See the troubleshooting guide for more help.

This code should give you an example of how to understand if you stay on the same page or navigate:

await this.page.submitButton.click();

try {
    await this.page.waitForNavigation();
    // if we are here it means login was successful
} catch(e) {
    // if we are here it means login failed
}

I. using Element Handles within the condition

It can be implemented in JavaScript similarly to your pseudo-code using page.$(selector), which returns null if the specified element is not in the DOM. (Note: watch for the right usage of parenthesis inside the condition!)

I'd also reverse your initial if(falsy)...else condition into a single if(truthy), as you want to execute a command only if the selector exists, the else branch doesn't make too much sense:

if ((await page.$('#elem-id')) !== null) {
  await page.click('#elem-id')
}
// code goes on with *next lines of code*

II. using Locators within the condition

Some may notice the warning in the docs "The use of ElementHandle is discouraged, use Locator objects and web-first assertions instead." By default you shouldn't worry about using ElementHandles or mixing them together with Playwright's Locators in e2e tests or scrapers, they are inherited from Puppeteer and act reliably in Playwright as well (if they wouldn't: Microsoft would have deprecated them). Microsoft promotes Locators over Element Handles only because most of the extra functionalities they invested in in the past years (like "getByAltText", "getByLabel" etc.) are built on top of Locators so you can write e2e tests easier with their help. That's the reason for the warning in the docs. You don't need to avoid Element Handles at every cost.

If you want to reuse a locator in a conditional statement you can use locator.isVisible().

const myElement = page.locator('#elem-id') {
if (await myElement.isVisible())
  await myElement.click()
}
// code goes on with *next lines of code*

Here you go;

var phantom = require('phantom');

phantom.create(function (ph) {
  ph.createPage(function (page) {
    var url = "http://www.bdtong.co.kr/index.php?c_category=C02";
    page.open(url, function() {
      page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
        page.evaluate(function() {
          $('.listMain > li').each(function () {
            console.log($(this).find('a').attr('href'));
          });
        }, function(){
          ph.exit()
        });
      });
    });
  });
});

You can use puppeteer-core. core version by default does not download Chromium, which you do not need if you want to control an Electron app.

In the test you then call launch method, where you define electron as the executable file instead of Chromium, like in following snippet:

const electron = require("electron");
const puppeteer = require("puppeteer-core");

const delay = ms =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, ms);
  });

(async () => {
  try {
    const app = await puppeteer.launch({
      executablePath: electron,
      args: ["."],
      headless: false,
    });
    const pages = await app.pages();
    const [page] = pages;

    await page.setViewport({ width: 1200, height: 700 });
    await delay(5000);
    const image = await page.screenshot();
    console.log(image);
    await page.close();
    await delay(2000);
    await app.close();
  } catch (error) {
    console.error(error);
  }
})();

Update for electron 5.x.y and up (currently up to 7.x.y, I did not test it on 8.x.y beta yet), where puppeteer.connect is used instead of launch method:

// const assert = require("assert");
const electron = require("electron");
const kill = require("tree-kill");
const puppeteer = require("puppeteer-core");
const { spawn } = require("child_process");

let pid;

const run = async () => {
  const port = 9200; // Debugging port
  const startTime = Date.now();
  const timeout = 20000; // Timeout in miliseconds
  let app;

  // Start Electron with custom debugging port
  pid = spawn(electron, [".", `--remote-debugging-port=${port}`], {
    shell: true
  }).pid;

  // Wait for Puppeteer to connect
  while (!app) {
    try {
      app = await puppeteer.connect({
        browserURL: `http://localhost:${port}`,
        defaultViewport: { width: 1000, height: 600 } // Optional I think
      });
    } catch (error) {
      if (Date.now() > startTime + timeout) {
        throw error;
      }
    }
  }

  // Do something, e.g.:
  // const [page] = await app.pages();
  // await page.waitForSelector("#someid")// 
  // const text = await page.$eval("#someid", element => element.innerText);
  // assert(text === "Your expected text");
  // await page.close();
};

run()
  .then(() => {
    // Do something
  })
  .catch(error => {
    // Do something
    kill(pid, () => {
      process.exit(1);
    });
  });

Getting the pid and using kill is optional. For running the script on some CI platform it does not matter, but for local environment you would have to close the electron app manually after each failed try.

Simple demo repo: https://github.com/peterdanis/electron-puppeteer-demo

Take a a look at the Puppeteer documentation for page.evaluate(pageFunction[,...args]). It states:

pageFunction <function|string> Function to be evaluated in the page context

Note (my bold) "evaluated in the page context". The variables j and contactList do not exist in the context of the page.

Thankfully however, Puppeteer has a way of calling server side code from the context of the page with page.exposeFunction(name, puppeteerFunction)

The method adds a function called name on the page's window object. When called, the function executes puppeteerFunction in node.js and returns a Promise which resolves to the return value of puppeteerFunction.

For your use case, it would look something like the following:

const puppeteer = require('puppeteer');

(async function()
{
    const browser = await puppeteer.launch({
        headless: false,
        args: [
            "--no-sandbox", // I needed these args for it to run on my machine, you probably don't need them.
            "--disable-setuid-sandbox"
        ]
    });
    const page = await browser.newPage();
    const contacts = ["Charlie", "Carl", "Dennis", "Conrad"];
    await page.exposeFunction("getContacts", function()
    {
        return contacts;
    });
    await page.exposeFunction("addContact", function(contact)
    {
        contacts.push(contact);
    });
    await page.evaluate(async function()
    {
        await addContact("Henry");
        await addContact("Olav");
        const contacts = await getContacts();
        contacts.forEach(function(contact)
        {
            const div = document.createElement("div");
            div.innerHTML = contact;
            document.body.appendChild(div);
        });
    });
    console.log("Contacts after evaluating page function: ", contacts.join(", "));
})()

Note that this is a toy example, although a complete and runable one. You should be able to figure out the rest from this. The code you posted in your example in the OP does not make much sense (i.e. the endlessly recursive function searchContact()) so you will just have to adapt this to your use case.

Try this:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  console.log(browser.process().spawnargs);
  await browser.close();
})();

UPD. For connected browser:

  await page.goto('chrome://version');
  const tableCell = await page.waitForSelector('#command_line');
  const commandLine = await page.evaluate(element => element.innerText, tableCell);
  console.log(commandLine);

I haven't tried it, but $eval might work for you:

await page.$eval('*', el => el.innerText);

Another programmer suggested that maybe the page.evaluate context is the headless browser environment and not Node.js.

Right, this is one of the keys to Puppeteer, code within the evaluate callback is evaluated in the browser, not in your Node process (even though that's not at all obvious looking at the source of code using Puppeteer).

You can respond to the console event of the Page object, which is raised when any console method (log, error, etc.) is called in the client-side code. From that link:

page.on('console', msg => {
  for (let i = 0; i < msg.args().length; ++i)
    console.log(`${i}: ${msg.args()[i]}`);
});

The console event receives a ConsoleMessage object, which tells you what type of call it was (log, error, etc.), what the arguments were (args()), etc.