如何在 Playwright UI 测试中选择自定义下拉选项

Question

我正在进行端到端 UI 测试，当我尝试为 Harmony Web UI 组件 (<ext-support_he-select>) 选择一个选项时，playwright 无法识别 customere 标签，并且错误提示不是选择选项。

我也无法使用无头录音机记录下拉选择选项，如果有人遇到过此类问题，请告诉我。

HTML 选择代码： { <ext-support_he-select id="workspace-dropdown" class="basic-dropdown basic-workspace-dropdown 低于有效" aria-labelledby="workspace-label" role="combobox" current-value= “” aria-controls =“” aria-disabled =“假” aria-expanded =“假” aria-haspopup =“列表框” tabindex =“0”位置=“下方” aria-activedescendant =“选项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> }

请参阅下面给出的 UI 屏幕截图。

Answer 1

您可以先单击下拉列表，然后单击所需的下拉项目。

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();