如何在Java版Playwright中为隐藏select设置值？

这个页面使用Choices.js实现模拟下拉框（DOM中含choices__前缀的类名），原生<select>是隐藏的受控组件，直接操作它不仅会被Playwright拦截（不可见元素限制），还无法触发React状态同步。正确做法是模拟用户操作UI层的模拟下拉元素：

可行代码实现 #

1. 优化前置登录代码（用Locator替代ElementHandle，更稳定） #

Page page = context.newPage();
page.navigate("https://fatwa.infostrategic.com/ar/login");

// 点击"تسجيل كزائر"按钮（用文本定位更可靠，避免依赖动态class）
page.locator("text=تسجيل كزائر").click();
page.waitForLoadState(LoadState.NETWORK_IDLE); // 等待页面加载完成

2. 操作模拟下拉框（两种方式） #

方式一：直接点击目标选项（已知选项文本时）

// 点击下拉框触发展开
page.locator("div.form-control.ui.fluid.selection.dropdown").click();
// 点击对应选项（替换为值194对应的实际选项文本，例如"السعودية"）
page.locator("div.choices__item.choices__item--choice:text('السعودية')").click();

方式二：通过搜索框输入后选择（选项较多时）

// 点击下拉框展开
page.locator("div.form-control.ui.fluid.selection.dropdown").click();
// 在搜索框输入关键词（匹配目标选项的部分文本）
page.locator("input.choices__input.choices__input--cloned").fill("سعود");
// 点击搜索后的第一个匹配结果
page.locator("div.choices__item.choices__item--choice").first().click();

3. 强制操作原生Select（极端情况，不推荐） #

如果必须直接操作原生隐藏select，可以通过force: true绕过可见性检查，同时手动触发change事件确保React同步状态：

page.locator("select[name='data[info][natId]']")
    .selectOption(new SelectOption().setValue("194").setForce(true));
// 手动触发change事件，同步React状态
page.evaluate("document.querySelector('select[name=\"data[info][natId]\"]').dispatchEvent(new Event('change'));");

为什么之前的方法失败？ #

• 方法1-3：直接操作隐藏的原生select，Playwright默认禁止操作不可见元素，因此报错。
• 方法4-6：尝试修改hidden属性或display样式，但React受控组件会在重新渲染时覆盖手动修改的DOM属性，导致修改无效；即使强制显示，操作原生select也不会触发模拟UI的状态更新，页面无反应。

内容的提问来源于stack exchange，提问作者Ahmad Yousef