編劇 - 如果我有多個同名下拉菜單，如何使用定位器訪問 Angular 2 向綁定 model 值？

Question

我有多個同名下拉列表，我正在嘗試訪問當前選擇的值，這些值是使用 Angular 進行的 2 向綁定。 我正在嘗試比較當前顯示的值是否全部設置為如圖所示：驗證下拉菜單設置為完成

瀏覽器看到的當前 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

如果您的列表不是動態的，因此您始終擁有相同數量的 select 元素，並且您不想為選擇器設置不同的 id，則可以使用:nth-match選擇器到列表中的 go 槽並檢查一行一行的取值。

例子：

 // 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

Playwright:nth-match 偽選擇器

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