如何用Playwright定位器获取多个同名Angular双向绑定下拉框的ngModel值

我有多个name属性为dispo的下拉框，采用Angular双向绑定（ngModel），需要验证所有下拉框的当前选中值是否均为Completed。

浏览器解析后的HTML元素如下：

<select _ngcontent-pis-c119="" name="dispo" class="dash-select ng-pristine ng-valid ng-touched">
    <option _ngcontent-pis-c119="" value="Active" class="ng-star-inserted"> Active </option>
    <option _ngcontent-pis-c119="" value="On Hold" class="ng-star-inserted"> On Hold </option>
    <option _ngcontent-pis-c119="" value="Completed" class="ng-star-inserted"> Completed </option>
    <option _ngcontent-pis-c119="" value="Canceled" class="ng-star-inserted"> Canceled </option>
    <!---->
</select>

我当前能获取到所有下拉框元素集合，但不知道如何获取每个下拉框的ngModel值，代码如下：

// 获取所有Disposition元素集合
const dispositionsCompleted = page.locator('select[name="dispo"]');
// 检查所有Disposition是否设置为Completed
const count = await dispositionsCompleted.count();

for (let i = 0; i < count; i++) {   
    console.log(await dispositionsCompleted.nth(i).locator('option').inputValue());
}

解决方法 #

不需要直接获取ngModel的值，Playwright可以直接读取下拉框的选中状态，以下是几种可行方案：

方案1：遍历验证选中的value值

直接对<select>元素调用inputValue()方法，即可获取当前选中option的value属性值：

// 获取所有name为dispo的下拉框
const dispositionsCompleted = page.locator('select[name="dispo"]');
const count = await dispositionsCompleted.count();

for (let i = 0; i < count; i++) {   
    const selectedValue = await dispositionsCompleted.nth(i).inputValue();
    console.log(selectedValue);
    // 断言选中值为Completed
    expect(selectedValue).toBe('Completed');
}

方案2：验证显示文本（处理空格）

如果需要验证下拉框显示的文本（示例中option文本带有前后空格），可以定位到选中的option并去除空格后比对：

const dispositionsCompleted = page.locator('select[name="dispo"]');
const count = await dispositionsCompleted.count();

for (let i = 0; i < count; i++) {   
    const selectedText = await dispositionsCompleted.nth(i).locator('option:checked').textContent();
    // 去除前后空格后断言
    expect(selectedText?.trim()).toBe('Completed');
}

方案3：批量断言简化代码

利用Playwright的异步能力，批量获取所有选中值后统一验证：

const dispositionsCompleted = page.locator('select[name="dispo"]');
// 批量获取所有下拉框的选中值
const allSelectedValues = await Promise.all(
    (await dispositionsCompleted.all()).map(el => el.inputValue())
);
// 断言所有值都是Completed
allSelectedValues.forEach(value => expect(value).toBe('Completed'));

内容的提问来源于stack exchange，提问作者Davidx.You