Codeception：如何测试被篡改的下拉选框选项值？

当你直接用$I->selectOption('#foobar', 100000);时，Codeception会先验证下拉框中是否存在该选项，不存在就直接抛出错误，根本到不了提交表单验证错误提示的环节。这里有几个可行的方法绕过这个限制：

方法1：用JavaScript直接设置下拉框的值 #

直接通过JS修改DOM元素的value属性，跳过Codeception的选项检查，模拟用户篡改前端值的场景：

// 设置下拉框的值为100000
$I->executeJS("document.getElementById('foobar').value = '100000';");
// 提交表单
$I->click('#submit-button');
// 检查是否出现预期的错误提示
$I->see('Input "foobarId" cannot take "100000" as a value');

如果使用WebDriver模块，也可以用executeScript方法，语法和上面一致。

方法2：直接发送POST请求测试后端验证 #

如果你的核心需求是验证后端对非法值的处理，不需要模拟前端操作，直接发送POST请求传递非法值更高效：

// 直接提交POST请求，参数名要和表单的name属性一致（错误提示里是foobarId）
$I->sendPost('/your-form-submit-url', [
    'foobarId' => 100000,
    // 其他表单参数也需要一并传递，比如必填项
    'other_field' => 'test_value'
]);
// 检查响应中是否包含错误信息
$I->see('Input "foobarId" cannot take "100000" as a value');

方法3：先添加不存在的选项再选择 #

通过JS向下拉框中动态添加一个选项，这样selectOption方法就能找到并选择它，模拟用户手动添加选项的场景：

// 动态添加值为100000的选项
$I->executeJS("
    const select = document.getElementById('foobar');
    const option = document.createElement('option');
    option.value = '100000';
    option.textContent = '临时测试选项';
    select.appendChild(option);
");
// 现在可以正常选择这个选项了
$I->selectOption('#foobar', '100000');
// 提交表单并检查错误
$I->click('#submit-button');
$I->see('Input "foobarId" cannot take "100000" as a value');

这三个方法都能帮你完成测试需求，你可以根据自己的测试场景选择：如果要模拟前端用户操作，选方法1或3；如果只需要验证后端逻辑，方法2更直接。

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