Playwright点击下拉按钮偶发失效，无法获取全部产品颜色问题

我尝试获取某产品的所有颜色选项，需先点击下拉按钮展开全部选项。但该操作有时成功，有时仅返回默认颜色，仿佛未点击按钮。我尝试设置等待时间无效，也曾尝试等待下拉框元素（id="tippy-5"），但因点击未正确触发而报错。

更新：若在page.click处设置断点后继续执行，结果始终符合预期；若断点设置在该语句之后，则结果相反。

public class StockFetcher {

    public static List<String> getStockFromWebPage() {
        List<String> stockList = new ArrayList<>();
        String productUrl = "https://articulo.mercadolibre.com.pe/MPE-653839472-tapones-loop-quiet";
        try (Playwright playwright = Playwright.create()) {
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(true));
            Page page = browser.newPage();
            page.navigate(productUrl);
            page.waitForSelector(".andes-dropdown__trigger", new Page.WaitForSelectorOptions().setTimeout(5000));
            page.click(".andes-dropdown__trigger");
            // page.waitForSelector("#tippy-5", new
            // Page.WaitForSelectorOptions().setTimeout(5000));
            List<ElementHandle> elements = page.querySelectorAll(".ui-pdp-dropdown-selector__item--label-small");
            for (ElementHandle element : elements) {
                String textContent = element.textContent();
                stockList.add(textContent);
            }
            page.close();
        }
        return stockList;
    }
}

问题核心是点击下拉按钮后，页面还没来得及渲染出所有选项就开始查询元素——断点能正常工作，就是因为手动等待给了页面足够的渲染时间。以下是几个可行的修复方案：

• 等待按钮可交互后再点击：仅等待元素存在不够，要确保按钮处于可点击状态，避免页面加载未完成就触发点击
• 点击后等待选项加载完成：不要直接查询元素，等待下拉选项容器出现或选项数量满足预期后再获取数据
• 改用Playwright推荐的Locator API：Locator会自动处理等待逻辑，比ElementHandle更稳定
• 优化无头模式配置：无头模式下渲染可能有差异，可调整浏览器启动参数

修改后的代码示例 #

import com.microsoft.playwright.*;
import java.util.ArrayList;
import java.util.List;

public class StockFetcher {

    public static List<String> getStockFromWebPage() {
        List<String> stockList = new ArrayList<>();
        String productUrl = "https://articulo.mercadolibre.com.pe/MPE-653839472-tapones-loop-quiet";
        try (Playwright playwright = Playwright.create()) {
            // 无头模式添加启动参数，优化渲染稳定性
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions()
                    .setHeadless(true)
                    .setArgs(List.of("--start-maximized")));
            Page page = browser.newPage();
            page.navigate(productUrl);

            // 等待下拉按钮可见且可点击，再执行点击
            Locator dropdownTrigger = page.locator(".andes-dropdown__trigger");
            dropdownTrigger.waitFor(new Locator.WaitForOptions().setTimeout(5000).setState(VisibilityState.VISIBLE));
            dropdownTrigger.click(new Locator.ClickOptions().setTimeout(5000));

            // 等待至少一个下拉选项出现，确保菜单完全展开
            Locator colorOptions = page.locator(".ui-pdp-dropdown-selector__item--label-small");
            colorOptions.first().waitFor(new Locator.WaitForOptions().setTimeout(5000));

            // 获取所有选项文本，Locator的allTextContents会自动等待元素就绪
            stockList.addAll(colorOptions.allTextContents());

            page.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return stockList;
    }
}

额外优化建议 #

1. 避免依赖动态ID（如tippy-5）：这类ID是页面动态生成的，刷新后会变化，改用下拉菜单的类选择器更可靠
2. 增加错误处理：添加try-catch块捕获异常，方便排查执行过程中的问题
3. 等待页面加载完成：在page.navigate后添加page.waitForLoadState(LoadState.NETWORKIDLE)，确保页面静态资源加载完毕

内容的提问来源于stack exchange，提问作者Franco Romero