I need a way to add some delay between clicking elements inside a page.evaluate function

below is what ive tried and it does not work

const result = await page.evaluate(async () => {
        let variants = document.querySelectorAll(".item-sku-image a");


        variants.forEach(async variant => {   
           await new Promise(function(resolve) { 
           setTimeout(resolve, 1000)
           });         
            await variant.click()
        });
        return data
    });

Update:

the for loop below works fine for one element when i try to use another for loop inside it - it goes crazy

const variants = [...document.querySelectorAll(".item-sku-image a")]; // Turn nodelist into an array
const sizes = [...document.querySelectorAll(".item-sku-size a")]; // Turn nodelist into an array

for (let variant of variants){
  // wait one second
  await new Promise(function(resolve) {setTimeout(resolve, 1000)});
  await variant.click()
  for (let size of sizes){
   // wait one second
   await new Promise(function(resolve) {setTimeout(resolve, 1000)});
   await size.click()
 }
}

I need a way to add some delay between clicking elements inside a page.evaluate function

below is what ive tried and it does not work

const result = await page.evaluate(async () => {
        let variants = document.querySelectorAll(".item-sku-image a");


        variants.forEach(async variant => {   
           await new Promise(function(resolve) { 
           setTimeout(resolve, 1000)
           });         
            await variant.click()
        });
        return data
    });

Update:

the for loop below works fine for one element when i try to use another for loop inside it - it goes crazy

const variants = [...document.querySelectorAll(".item-sku-image a")]; // Turn nodelist into an array
const sizes = [...document.querySelectorAll(".item-sku-size a")]; // Turn nodelist into an array

for (let variant of variants){
  // wait one second
  await new Promise(function(resolve) {setTimeout(resolve, 1000)});
  await variant.click()
  for (let size of sizes){
   // wait one second
   await new Promise(function(resolve) {setTimeout(resolve, 1000)});
   await size.click()
 }
}

• javascript
• node.js
• puppeteer

1 Answer 1

.forEach will not work with the promises or async...await the way you want.

Use for..of instead.

const variants = [...document.querySelectorAll(".item-sku-image a")]; // Turn nodelist into an array
for (let variant of variants){
  // wait one second
  await new Promise(function(resolve) {setTimeout(resolve, 1000)});
  await variant.click()
}

It's easy to read, understand and implement.

Here are some references:

• https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Statements/for...of
• https://stackoverflow./a/37576787/6161265