如何使用Codeception测试Select2组件的动态标签功能

Codeception 操作Select2动态标签实现方法 #

从预填充列表中选择Select2选项的基础操作方法如下：

$selector = "select[name='tags']";
$this->tester->openSelect2($selector);
$this->tester->selectOptionForSelect2($selector, array('text' => $tag));
$this->tester->closeSelect2($selector);

针对支持动态标签功能的Select2组件，可基于基础操作扩展实现动态标签创建，具体实现逻辑如下：

• 打开Select2下拉框后，定位到组件自带的搜索输入框
• 输入要创建的新标签文本
• 触发回车事件确认生成该动态标签
• 关闭Select2下拉框完成操作

你可以在测试助手类中新增如下封装方法：

public function createDynamicTagForSelect2($selector, string $newTag)
{
    // 打开Select2下拉面板
    $this->openSelect2($selector);
    // 定位Select2搜索输入框
    $searchInputSelector = '.select2-search__field';
    // 输入自定义标签内容
    $this->tester->fillField($searchInputSelector, $newTag);
    // 触发回车确认创建动态标签
    $this->tester->pressKey($searchInputSelector, \WebDriver\WebDriverKeys::ENTER);
    // 关闭Select2下拉面板
    $this->closeSelect2($selector);
}

方法调用示例：

// 要创建的新标签内容
$customTag = '新增的自定义标签';
// 目标Select2选择器
$selector = "select[name='tags']";
// 执行动态标签创建
$this->tester->createDynamicTagForSelect2($selector, $customTag);

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