Loop Error [No possible multiple URL? no wait? what is the error?]

Question

Im looking to improve my skills with Playwright and I am creating this code to make an "1way-3ways-final way".

error:

page.goto: net::ERR_ABORTED at https://computer-database.gatling.io/computers at tests\ways1-3-1.spec.ts:25:18

Can anyone help me?

  test('1 way to 3 and finish in 1', async ({ page }) => {
    await page.goto('https://large-type.com/#starting');
    await page.waitForTimeout(2000);

    computerData.forEach(async data => {
      
      await page.goto("https://computer-database.gatling.io/computers");
      await page.click("#add");
      await page.fill("#name", data.name);
      await page.selectOption("#company", {label: data.manufacture});
      await page.click("input[type='submit']");
      await expect(page.locator("div.alert-message.warning")).toContainText(`Done ! Computer ${data.name} has been created`);
      
    });
    await page.goto('https://large-type.com/#finished');
    await page.waitForTimeout(2000);
  });

I don't know what a "1way-3ways-final way" is, but the issue is almost certainly [Using async/await with a forEach loop](https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop) as well as a spurious `await page.waitForNavigation();`. Can you try this solution: (1) change `computerData.forEach(async data => {` to `for (const data of computerData) {` and possibly (2) remove `await page.waitForNavigation();` — ggorlen, Dec 02 '22 at 14:56
this is removed "await page.waitForNavigation()" sorry it was just for try and I forget to remove it — user20667346, Dec 02 '22 at 15:57

score 0 · Answer 1 · answered Dec 02 '22 at 16:44

forEach runs synchronously -- the awaits in the async callbacks apply to the function they appear in, not to the surrounding function.

I guess you want each iteration to kick in only when the previous one has completed all the actions being awaited. In that case, just avoid the callback, and use a straight for loop:

    for (const data of computerData) {      
      await page.goto("https://computer-database.gatling.io/computers");
      await page.click("#add");
      await page.fill("#name", data.name);
      await page.selectOption("#company", {label: data.manufacture});
      await page.click("input[type='submit']");
      await expect(page.locator("div.alert-message.warning")).toContainText(`Done ! Computer ${data.name} has been created`); 
    }

score 0 · Answer 2 · answered Dec 04 '22 at 17:22

Complete Data Driven Example:

import { test } from "@fixtures/myFixtures";
import { expect } from "@playwright/test";

const computerData = [{
        name: "Comp A",
        manufacture: "Tandy Corporation"
        },
        {
            name: "Comp B",
            manufacture: "Commodore International"
        },
        {
            name: "Comp C",
            manufacture: "Thinking Machines"
        },
        {
            name: "Comp D",
            manufacture: "Nokia"
        }
        ]
        computerData.forEach(data => {
        
            test(`Parameterized test ${data.name}`, async ({ page }) => {
                await page.goto("https://computer-database.gatling.io/computers");
                await page.click("#add");
                await page.fill("#name", data.name);
                await page.selectOption("#company", {
                    label: data.manufacture
                });
                await page.click("input[type='submit']");
                expect(page.locator("div.alert-message.warning")).toContainText("Done")
            })
    
    })

Loop Error [No possible multiple URL? no wait? what is the error?]

2 Answers2

Complete Data Driven Example: