为什么我在 javascript 中的 for 循环代码只运行一次？

Question

我不知道为什么 for 循环只运行一次。 我的意图是让代码在foodGroupIdsOnPage1中的所有元素中运行。 但它现在只贯穿第一个元素。

谁能给我解释一下？ 提前谢谢你的帮助。

async function initialize() {
    const browser = await playwright.chromium.launch({
        headless: false
    });
    const context = await browser.newContext();                        ////create a new browser context, which means no cookies and cache saved
    const tab1 = await context.newPage();
    return { tab1, context };
}

async function GotoPage2() {     ////wait for function>>>only run the next command after all the commands inside the next bracket run

    const page1_foodGroupButton = id.querySelector('a')         ////beginning of the for loop
    await page1_foodGroupButton.click();
};

async function main() {

    const { tab1, context } = await initialize();

    await tab1.goto('https://www.cfs.gov.hk/tc_chi/nutrient/search1.php');

    const foodGroupIdsOnPage1 = await tab1.evaluate(async function getFoodGroupsOnPage1() {

        return [...document.querySelector('.tableResponsive').querySelectorAll('td ')].map(e => e.id);

    })

    for (let id of foodGroupIdsOnPage1) {

        await tab1.evaluate(id => {

            const page1_foodGroupButton = document.querySelector('[id=' + `"${id}"` + ']').querySelector('a')         ////beginning of the for loop
            page1_foodGroupButton.click();

        }, id);

        await tab1.waitForTimeout(2000);
        await tab1.click('[id^=grp] > a');

        await tab1.waitForTimeout(2000);
        const ArrayOfTabs = context.pages();   ////get how many tabs chromium are

        let tab2 = ArrayOfTabs[1];              ////make active tab to the second tab
        await tab2.evaluate(async function extractFoodGroupData() {
            let tableOfAllFoods = [];
            let rowsOnPage3 = document.querySelector(".colorTable2").querySelectorAll("tr");
            for (let row_OnPage3 of rowsOnPage3) {
                let arrayNutritionOfOneFood = [];
                let cellsInOneRow = row_OnPage3.querySelectorAll("td");
                for (let cell of cellsInOneRow) {
                    arrayNutritionOfOneFood.push(cell.innerText);
                }

                tableOfAllFoods.push(arrayNutritionOfOneFood);
            }

        });
        tab2.close();
        tab1.goBack();
        return;

    }

}

main();

Answer 1

我找到了解决方案。

第一个问题是return终止了迭代。 所以删除它。

第二个问题是第二个迭代周期在tab1.goBack();

只需在tab1.goBack();之前添加await 解决第二个问题。