Playwright - how do I access an Angular 2-way binding model value with locator if I have multiple dropdowns of the same name?

user_19839027 0
Viewed 50

I have multiple dropdowns with the same name and I am trying to access the currently selected values, which are 2-way bind using Angular. I am trying to compare if the currently displayed values are all set to complete as pictured: Validate dropdowns are set to Complete

The current html elements that the browser sees is:

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

My current code is able to get the collection of dropdown elements but I am not sure how to access the ngModel value of each dropdown. My code is currently:

// 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());
        
    }
playwright angular
1 Answers

If your list isn't dynamic so you always have the same number of select elements and you don't want to deal with setting different ids for selectors, you can use the :nth-match selector to go trough on the list and check the values line by line.

Example:

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

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

A nicer solution:

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 pseudo selector

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

user_72613830
Related