I'm trying to use puppeteer to:

• create an array from an ul list
• Loop through the list and click a button.
• Each button click opens a modal. Within the modal, another button has to be clicked.
• Delay the next loop before continuing.

I've tried to do this a number of ways using page.evaluate and my array always seems to be empty. Can someone please show me what I'm doing wrong here.

<ul>
  <li><button>Connect</button></li>
  <li><button>Wait</button></li>
  <li><button>Connect</button></li>
  <li><button>Connect</button></li>
</ul>

Path: puppeteer.js

const buttons = await page.evaluate(() =>
  Array.from(document.querySelectorAll("ul > li button"))
);

for (let button of buttons) {
  if (button.innerText === "Connect") {
    button.click();
    document
      .querySelector(
        "div.artdeco-modal"
      )
      .click();
  }
}

I'm trying to use puppeteer to:

• create an array from an ul list
• Loop through the list and click a button.
• Each button click opens a modal. Within the modal, another button has to be clicked.
• Delay the next loop before continuing.

I've tried to do this a number of ways using page.evaluate and my array always seems to be empty. Can someone please show me what I'm doing wrong here.

<ul>
  <li><button>Connect</button></li>
  <li><button>Wait</button></li>
  <li><button>Connect</button></li>
  <li><button>Connect</button></li>
</ul>

Path: puppeteer.js

const buttons = await page.evaluate(() =>
  Array.from(document.querySelectorAll("ul > li button"))
);

for (let button of buttons) {
  if (button.innerText === "Connect") {
    button.click();
    document
      .querySelector(
        "div.artdeco-modal"
      )
      .click();
  }
}

• javascript
• node.js
• puppeteer

1 Answer 1

page.evaluate cannot return DOM nodes, as it can only return serializable data. This is data that can be wrapped JSON.stringify to transfer it from the browser environment to Node.js

Instead, you need to use page.$$ to get a list of DOM elements. As you are also only looking for buttons with a specific text, I would remend to use page.$x which runs an XPath query and can also filter depending on the text of the button.

Code Sample

const buttons = await page.$x("//ul/li//button[contains(text(), 'Connect')]");
for (let button of buttons) {
    await button.click();
    const modal = await page.$('div.artdeco-modal');
    await model.click();
}

The above code, first queries all buttons with the text "Connect" on the page and iterates through them. It clicks each button and after each click queries for the model dialog and clicks it.