angular - Playwright - 如果我有多个同名下拉菜单，如何使用定位器访问 Angular 2 路绑定(bind)模型值？

Question

我有多个同名的下拉菜单，我正在尝试访问当前选定的值，这些值是使用 Angular 进行双向绑定(bind)的。我正在尝试比较当前显示的值是否全部设置为如图所示完成:Validate dropdowns are set to Complete

浏览器当前看到的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 值。我的代码当前是:

// Get the collection of Disposition elements
    const dispositionsCompleted = page.locator('select[name="dispo"]');
    // Check that all Dispositions are set to Complete
    const count = await dispositionsCompleted.count();

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

Answer 1

如果您的列表不是动态的，因此您始终具有相同数量的选择元素，并且您不想为选择器设置不同的 id，则可以使用 :nth-match选择器进入列表并逐行检查值。

示例:

// wait for the selector
await page.waitForSelector(':nth-match("select", 0)');

// Check the value
await expect(page.locator('option[selected="selected"]')).toHaveText("Value");

更好的解决方案:

await page.waitForSelector("select");

// get all the select
const dropdowns = await page.$$("select");
console.log(dropdowns.length);
console.log(await dropdowns[0].innerText());
console.log(await dropdowns[1].innerText());

// the expect() comes here

剧作家:第n场比赛伪选择器

https://playwright.dev/docs/selectors#pick-n-th-match-from-the-query-result