The automation script for Playwright/Puppeteer is having trouble properly handling `async...await` in a `for..loop` on the `/signup` page

Question

The automation script for Playwright/Puppeteer is having trouble properly handling `async...await` in a `for..loop` on the `/signup` page

Currently, I am faced with the challenge of automating rate-limit requests using a playwright automation script.

The issue arises when the script keeps attempting to sign up with the email

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe8a9b8d8acebe9b869f938e929bd09d9193">[email protected]</a>

, resulting in an error indicating that the email is already in use.

Despite my efforts to implement async...await correctly with the for...loop, it seems like something is not working as intended.

import { chromium } from 'playwright'

async function main() {
  const browser = await chromium.launch({ headless: false })

  const page = await browser.newPage()
  for (let i = 0; i < 20; i++) {
    await page.goto('http://localhost:3000/signup')
    await page.waitForLoadState('domcontentloaded')

    await page.fill('input[name="email"]', `test${i}@example.com`)
    await page.click('button[type="submit"]')

    await page.waitForURL('http://localhost:3000/verify-email')
    
    console.log(i)
  }

  await page.close()
  await browser.close()
}

main()

I also attempted the commented code section above, but it did not yield the desired results either.

When examining the response from my server script, it displays:

{ email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2d6c7d1d692e2c7dac3cfd2cec78cc1cdcf">[email protected]</a>' }
{ user: [], unique: true }
{ email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8afeeff9febacaeff2ebe7fae6efa4e9e5e7">[email protected]</a>' }
{
  user: [
    {
      id: '01HNPK1GRM5ZHWXZBV1K2R3A9B',
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f1b0a1c1b5f2f0a170e021f030a410c0002">[email protected]</a>',
      emailVerified: 0
    }
  ],
  unique: false
}

The server checks for unique emails, displaying unique: true initially but then strangely returns unique: false.

This is unexpected given the use of for...loop along with async...await.

The expected output should resemble:

{ email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe8a9b8d8acebe9b869f938e929bd09d9193">[email protected]</a>' }
{ user: [], unique: true }
{ email: '[email protected]' }
{ user: [], unique: true }

What could be going wrong in this scenario?

It's worth mentioning that similar issues were encountered while using Puppeteer as well:

import puppeteer from 'puppeteer'

async function main() {
  const browser = await puppeteer.launch({
    headless: false,
  })
  const page = await browser.newPage()

  for (let i = 0; i < 20; i++) {
    await page.goto('http://localhost:3000/signup')

    await page.type('input[name="email"]', `test${i}@example.com`)
    await page.click('button[type="submit"]')

    await page.waitForNavigation()

    console.log(i)
  }

  await page.close()
  await browser.close()
}

Furthermore, the technology stack involves the utilization of React Server Actions within Next.js 14 -> https://github.com/deadcoder0904/next-14-lucia-v3-sqlite-drizzle-conform-zod-email-verification-otp-server-actions/

javascript next.js async-await puppeteer playwright

Answer 1

Answer №1

If you want to push your promises to an array and execute them in parallel, you can do so by following this approach:

const promiseArr = []
for (let i = 0; i < 20; i++) {
    const page = await browser.newPage()
    promiseArr.push(page.goto('http://localhost:3000/signup'))
    promiseArr.push(page.type('input[name="email"]', `test${i}@example.com`))
    promiseArr.push(page.click('button[type="submit"]'))
    promiseArr.push(page.waitForNavigation())
}
// This will reject all promises if any of them rejects
await Promise.all(promiseArr);

The behavior of awaiting promises within a for loop is different than you might expect. Check out this thread for more details.

Update: The code snippet below offers a potentially better solution for executing promises in parallel using Promise.all:

const promiseArr = []
for (let i = 0; i < 20; i++) {
    const page = await browser.newPage()
    promiseArr.push(signUp(page, i));
}

// This will reject all promises if any one of them rejects
await Promise.all(promiseArr);

function signUp(page, i) {
    return new Promise(async (resolve, reject) => {
        await page.goto('http://localhost:3000/signup')
        await page.type('input[name="email"]', `test${i}@example.com`)
        await page.click('button[type="submit"]')
        await page.waitForNavigation()
        resolve();
    });
}

Answer 2

If you want to push your promises to an array and execute them in parallel, you can do so by following this approach:

const promiseArr = []
for (let i = 0; i < 20; i++) {
    const page = await browser.newPage()
    promiseArr.push(page.goto('http://localhost:3000/signup'))
    promiseArr.push(page.type('input[name="email"]', `test${i}@example.com`))
    promiseArr.push(page.click('button[type="submit"]'))
    promiseArr.push(page.waitForNavigation())
}
// This will reject all promises if any of them rejects
await Promise.all(promiseArr);

The behavior of awaiting promises within a for loop is different than you might expect. Check out this thread for more details.

Update: The code snippet below offers a potentially better solution for executing promises in parallel using Promise.all:

const promiseArr = []
for (let i = 0; i < 20; i++) {
    const page = await browser.newPage()
    promiseArr.push(signUp(page, i));
}

// This will reject all promises if any one of them rejects
await Promise.all(promiseArr);

function signUp(page, i) {
    return new Promise(async (resolve, reject) => {
        await page.goto('http://localhost:3000/signup')
        await page.type('input[name="email"]', `test${i}@example.com`)
        await page.click('button[type="submit"]')
        await page.waitForNavigation()
        resolve();
    });
}

Answer 3

Answer №2

Below is the updated code snippet that tackles the mentioned issue:

javascript
Copy code
import { chromium } from 'playwright'

async function main() {
  const browser = await chromium.launch({ headless: false })

  const page = await browser.newPage()
  for (let i = 0; i < 20; i++) {
    (async (index) => {
      await page.goto('http://localhost:3000/signup')
      await page.waitForLoadState('domcontentloaded')

      await page.fill('input[name="email"]', `test${index}@example.com`)
      await page.click('button[type="submit"]')

      await page.waitForURL('http://localhost:3000/verify-email')
      // await page.waitForSelector('#verify-email-form', {
      //   state: 'visible',
      //   timeout: 0,
      // })

      console.log(index)
    })(i)
  }

  await page.close()
  await browser.close()
}

main()

Answer 4

Below is the updated code snippet that tackles the mentioned issue:

javascript
Copy code
import { chromium } from 'playwright'

async function main() {
  const browser = await chromium.launch({ headless: false })

  const page = await browser.newPage()
  for (let i = 0; i < 20; i++) {
    (async (index) => {
      await page.goto('http://localhost:3000/signup')
      await page.waitForLoadState('domcontentloaded')

      await page.fill('input[name="email"]', `test${index}@example.com`)
      await page.click('button[type="submit"]')

      await page.waitForURL('http://localhost:3000/verify-email')
      // await page.waitForSelector('#verify-email-form', {
      //   state: 'visible',
      //   timeout: 0,
      // })

      console.log(index)
    })(i)
  }

  await page.close()
  await browser.close()
}

main()

The automation script for Playwright/Puppeteer is having trouble properly handling `async...await` in a `for..loop` on the `/signup` page

Answer №1

Answer №2

Similar questions

troubles with dividing string

What is the best way to tidy up a function within a useEffect hook?

Automate Zoom join function with the help of puppeteer

javascript: window.open()

Exploring Angular 8 Route Paths

Explore RxJs DistinctUntilChanged for Deep Object Comparison

SWR Fails to Recognize Environment Variables

Changing the background color of a page to match the background color of a button in React, which can be updated at any time

`npm run build` in Ubuntu does not detect any environment variables in process.env

How can I create a top right profile button similar to Google using AngularJS?

Tips for isolating all the Javascript loaded via ajax or jquery.load within a specific child scope instead of a global scope

Can you explain the concept of "inlining" as it pertains to the "env" document in Next.js?

What is the best way to incorporate NextJS routes in React while utilizing a form?

How can you effectively utilize Selenium to web scrape a webpage featuring collapsible fields?

Tips on adjusting the label on a datetime-local button

What can be done to enhance this particular element?

Notify user before exiting the page if there is an unsaved form using TypeScript

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

Changing the color of a progress bar in Bootstrap based on a specific percentage level

Adjust the flexslider to transition to a new slide when hovering over the thumbnails