htmltestingplaywrightui-testingplaywright-test

how to select a custome dropdown option in Playwright UI test

I am doing end to end UI testing and when I try to select an option for Harmony web UI component (<ext-support_he-select>), playwright is not able to recognize the custome tag and it error out saying not a select option.

And I am not able to record dropdown select option with Headless Recorder as well, could you please let me know if anybody has come across this kind of issue.

HTML Select Code : { <ext-support_he-select id="workspace-dropdown" class="basic-dropdown basic-workspace-dropdown below valid" aria-labelledby="workspace-label" role="combobox" current-value="" aria-controls="" aria-disabled="false" aria-expanded="false" aria-haspopup="listbox" tabindex="0" position="below" aria-activedescendant="option-14">

    <ext-support_he-option selected="" value="" aria-selected="true" class="selected" role="option" id="option-14" aria-posinset="1" aria-setsize="9"> Select a Workspace </ext-support_he-option>
  
         
    <ext-support_he-option value="accountPlans" aria-selected="false" role="option" id="option-15" aria-posinset="2" aria-setsize="9"> Account Plans </ext-support_he-option>
   
    <ext-support_he-option value="accounts" aria-selected="false" role="option" id="option-16" aria-posinset="3" aria-setsize="9"> Accounts </ext-support_he-option>
   
    <ext-support_he-option value="contacts" aria-selected="false" role="option" id="option-17" aria-posinset="4" aria-setsize="9"> Contacts </ext-support_he-option>
   
    <ext-support_he-option value="engagements" aria-selected="false" role="option" id="option-18" aria-posinset="5" aria-setsize="9"> Engagements </ext-support_he-option>
   
    <ext-support_he-option value="leads" aria-selected="false" role="option" id="option-19" aria-posinset="6" aria-setsize="9"> Leads </ext-support_he-option>
   
    <ext-support_he-option value="opportunities" aria-selected="false" role="option" id="option-20" aria-posinset="7" aria-setsize="9"> Opportunities </ext-support_he-option>
   
    <ext-support_he-option value="partners" aria-selected="false" role="option" id="option-21" aria-posinset="8" aria-setsize="9"> Partners </ext-support_he-option>
   
    <ext-support_he-option value="userProvisioning" aria-selected="false" role="option" id="option-22" aria-posinset="9" aria-setsize="9"> User Provisioning </ext-support_he-option>
  <!--fast-eovm3s:5-->
      </ext-support_he-select> }

Please refer UI screenshot given below. enter image description here

Solution

  • You can use first click on the dropdown and the click on the required dropdown item.

    await page.locator(#workspace-dropdown).Click();
await page.waitForSelector("xpath=//ext-support_he-option[@value='accounts'");
await page.locator("xpath=//ext-support_he-option[@value='accounts'").Click();