PHP Selenium基于文本定位Select2下拉选项失败问题求助

问题详情 #

尝试使用PHP Selenium操作Select2下拉框，希望通过选项文本（而非随机生成的value值）完成自动选择，但执行代码后抛出以下错误：

NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"option[text='Option1']"}

相关代码与HTML结构 #

HTML结构

<div class="input-group-prepend">
    <select name="target" id="target" class="form-control select2-hidden-accessible" data-select2-id="select2-data-acctarget" tabindex="-1" aria-hidden="true">
        <option value="" data-select2-id="select2-data-4-lu1l">-- Please Select --</option>
        <option value="hashrandom" data-select2-id="select2-data-5-i9za">Option1</option>
    </select>
    <span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="select2-data-3-0a3d" style="width: 360.312px;">
        <span class="selection">
            <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-acctarget-container">
                <span class="select2-selection__rendered" id="select2-acctarget-container" role="textbox" aria-readonly="true" title="-- Please Select --">-- Please Select --</span>
                <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
            </span>
        </span>
        <span class="dropdown-wrapper" aria-hidden="true"></span>
    </span>
    <button type="button" class="btn btn-link btn-sm" data-toggle="tooltip" data-placement="top" title="" data-original-title="tooltips_target"><i class="fa fa-question-circle"></i></button>
</div>

执行的PHP代码

if(!$this->wait('#target','visibilityOfElementLocated',5,500)) return $this->sendError('form not found');
if($this->executeScript("$('#target').click();"));
if(!$this->click('option[text=\'Option1\']')) return $this->sendError('select error.');

问题原因 #

1. 原生select被隐藏：Select2会将原生<select>标记为select2-hidden-accessible并设置aria-hidden="true"，直接操作原生<option>通常无效，因为Select2的交互依赖自身生成的自定义DOM结构。
2. CSS选择器错误：option[text='Option1']是无效的CSS选择器，CSS没有text属性选择器；且即使选择器正确，Selenium也无法定位到被隐藏元素内的<option>。
3. Select2下拉选项非原生option：Select2的下拉列表是动态生成的<li>元素，而非原生<option>，直接查找<option>必然失败。

解决方案 #

方案1：使用Selenium Select类操作原生select（简单直接） #

如果原生select只是视觉隐藏但仍可交互，直接用WebDriverSelect类通过文本选择选项：

// 等待原生select元素存在
$this->wait('#target', 'presenceOfElementLocated', 5, 500);

// 初始化Select对象
$selectElement = $this->driver->findElement(\Facebook\WebDriver\WebDriverBy::id('target'));
$select = new \Facebook\WebDriver\WebDriverSelect($selectElement);

// 通过可见文本选择选项
$select->selectByVisibleText('Option1');

方案2：模拟用户操作Select2 UI（最可靠） #

完全模拟用户点击下拉框、选择选项的流程，适配Select2的自定义DOM：

// 点击Select2选择框，打开下拉列表
$this->click('.select2-selection--single');

// 等待下拉选项加载，用XPath定位文本为"Option1"的选项
$optionXpath = "//li[contains(@class, 'select2-results__option') and normalize-space(text())='Option1']";
$this->wait($optionXpath, 'visibilityOfElementLocated', 5, 500);

// 点击目标选项
$this->click($optionXpath);

注：Selenium的CSS选择器不支持:contains()，用XPath更稳定；normalize-space()用于处理文本前后的空格问题。

方案3：通过JavaScript直接设置值（快速高效） #

如果不需要模拟真实交互，用JS直接设置原生select的值并触发Select2的变更事件：

// 通过文本找到对应option的value，设置后触发change事件更新Select2 UI
$this->executeScript("
    const select = document.getElementById('target');
    const option = Array.from(select.options).find(opt => opt.textContent.trim() === 'Option1');
    if(option) {
        select.value = option.value;
        $(select).trigger('change');
    }
");

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